angular Tabs (ui.bootstrap.tabs)

1:引入基础文件搭建环境

<pre name="code" class="html"><link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" /> <link rel="stylesheet" href="lib/Font-Awesome/css/font-awesome.min.css" />
<script src="lib/angular/angular-1.4.9/angular.js"></script>
<script src="lib/bootstrap/ui-bootstrap-tpls-1.1.1.min.js"></script>
<script src="js/controllers/ui.bootstrap.demo.js"></script>

angular.module('ui.bootstrap.demo',[ ])
.controller('TabsNavCtrl', function ($scope, $window) {
$scope.addNewTab = function(coin,title,times,active,tem) {
$scope.isclick=false;
angular.forEach($scope.tabs, function(tabs) {
if(tabs.template==tem){
$scope.isclick=true;//判断是否找到这个地址,如果找到就意味着已经存在了,不需要添加了
}
});
if(  !$scope.isclick){
$scope.tabs.push({
coin:coin,
title:title,
times:times,
active: active,
template:tem
});
}
};
$scope.tabs = [
{
coin:' fa-home',
title:' ',
times:'none',
active: '',
template:'home/projects.html'
}
];
});

注意:此处我为这个模块命名为"ui.bootstrap.demo"所以要在主要的模块myApp中引入

我的为:

angular.module('myApp', [ 'ui.router', 'uiRouterSample.setting','uiRouterSample.utils.service','ui.setting.controllers','ui.bootstrap','ui.bootstrap.demo','myApp.directives'])

此处需要的是'ui.bootstrap'和'ui.bootstrap.demo'

index.html

<html lang="en" ng-app="myApp"><body ng-controller="TabsNavCtrl"><header ng-include=" 'home/header.html' ">  </header> <div class="tabBox"><uib-tabset><uib-tab ng-repeat="tab in tabs"  active="tab.active" ><uib-tab-heading><b class="fa   {{tab.coin}}"></b><i class="fa fa-times"   ng-click="tab.$parent.tabManager.removeTab($index);tabs.splice($index, 1);" style="display:{{tab.times}}"></i>//点击这个"x"图案就删除这个tab{{tab.title}}</uib-tab-heading>
<div ng-include="tab.template"></div></uib-tab></uib-tabset>
</div>
<body></html>

header.html

 <nav class="navbar navbar-default " role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse topBar " id="example-navbar-collapse"> <ul class="nav navbar-nav  "> <li><nav-button><a  class="active" ng-click="tabs[0].template = 'home/projects.html';tabs[0].active = true">Projects </a></nav-button></li><li> <nav-button> <a ng-click="tabs[0].template = 'home/assets.html';tabs[0].active = true">Assets</a></nav-button></li><li> <nav-button ><a  ng-click="tabs[0].template = 'home/reports.html';tabs[0].active = true">Reports </a></nav-button></li></ul> <form class="navbar-form navbar-left search" role="search"> <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button> <div class="form-group"> <input type="text" class="form-control" value="Search by pid or project / task name..." οnblur="if (this.value == '') {this.value = 'Search by pid or project / task name...';}" οnfοcus="if (this.value == 'Search by pid or project / task name...') {this.value = '';}" /> </div> </form> <div class="navbar-text navbar-right"> <ul class="list-inline list-unstyled"> <li class="usrBar btnH"><a href="#" alt="#" title="#"><img src="img/user.jpg" /><span>Hello, Jason</span></a></li> <li class="rightIcn btnH"><a  title="setting"  ng-click="addNewTab('fa-cog','','',true,'setting/setting.html')"><i class="fa fa-cog"></i></a></li> <li class="rightIcn btnH"><a href="#" alt="#" title="#"><i class="fa fa-question"></i></a></li> <li class="rightIcn btnH"><a href="#" alt="#" title="#"><i class="fa fa-sign-in"></i></a></li> <div class="clearfix"></div></ul> </div> </div> </nav>

此处该注意的是

关于"<nav-button>"可以参照我这篇文章"angular点击一个元素添加类,其他同辈元素删除类" 当然你不需要这个效果,你也可以去除.

      <li><nav-button><a  class="active" ng-click="tabs[0].template = 'home/projects.html';tabs[0].active = true">Projects </a></nav-button></li><li> <nav-button> <a ng-click="tabs[0].template = 'home/assets.html';tabs[0].active = true">Assets</a></nav-button></li><li> <nav-button ><a  ng-click="tabs[0].template = 'home/reports.html';tabs[0].active = true">Reports </a></nav-button></li>

点击"projects","assets"和"reprots"的时候设置tabs中的第一个元素的"template"和"active"属性

到此为止,基础的功能已经实现,现在我们来做一个功能,就是

       <li class="rightIcn btnH"><a  title="setting"  ng-click="addNewTab()"><i class="fa fa-cog"></i></a></li>

点击该按钮时候动态添加一个tab和tab内容,大家看执行函数都知道了,我这里就不多说了.

页面效果

初始状态

点击"assets"

点击"setting"

再点击"assets"

参考文献http://angular-ui.github.io/bootstrap/#/tabs 所需bootstrap控件文件也在次链接下载.

angular Tabs (ui.bootstrap.tabs)相关推荐

紫色管理系统UI bootstrap后台模板
简介: 紫色管理系统UI bootstrap后台模板网盘下载地址: http://kekewangLuo.net/10Ck3J4nOm60 图片:
jquery.easyui.tabs 中的首个tabs被最后tabs覆盖的问题解决方法
jquery.easyui.tabs 中的首个tabs被最后tabs覆盖的问题解决方法参考文章: (1)jquery.easyui.tabs 中的首个tabs被最后tabs覆盖的问题解决方法 (2) ...
vue页面使用饿了么UI给tabs标题增加下拉选细化分类操作
最近需要将一个之前实现的tabs页面改造,实现每个tabs页再细化按照不同分类展示,第一反应是给每个tabs页中再增加tabs,思来想去总觉得导致页面很冗余不精简.最后决定使用slot插槽来实现这个需 ...
Vue、React、Angular最佳UI框架
摘要: 今天我们不聊技术,只"以貌取人". 刚入门的小伙伴问我(上面是我的自拍照),现在前端Vue.React.Angular这三个框架似乎都很好,反而不知道选择什么了,我当时开玩 ...
容器化分布式日志组件ExceptionLess的Angular前端UI
写在前面随着微服务架构的流行,日志也需要由专门的分布式日志组件来完成这个工作,我们项目使用的是 ExceptionLess 这个组件,它是前后端分离的:这篇文章我们就来实践容器化 Exception ...
使用Angular 4、Bootstrap 4、TypeScript和ASP.NET Core开发的Apworks框架案例应用
最近我为我自己的应用开发框架Apworks设计了一套案例应用程序,并以Apache 2.0开源,开源地址是:https://github.com/daxnet/apworks-examples,目的是 ...
如何使用Angular JS设置bootstrap navbar活动类？
本文翻译自:How to set bootstrap navbar active class with Angular JS? If I have a navbar in bootstrap with ...
用angular JS和 bootstrap完成一个简单的购物车界面
初学angularJS,自己做一个简单的demo玩一下. 购物车界面:(1)能显示商品基本信息: (2)能对购买数量进行修改: (3)能够删除不想购买的商品: (4)能够自动计 ...
解决Angular Kendo UI 导出PDF中文乱码
在使用 Kendo UI for Angular 的 PDFExportComponent 组件时,如果内容是中文则导出PDF将会出现乱码,网上许多人认为是官方不支持中文,但其实不然,阅读文档 The ...

angular Tabs (ui.bootstrap.tabs)

angular Tabs (ui.bootstrap.tabs)相关推荐

最新文章

热门文章