angular Tabs (ui.bootstrap.tabs)
生活随笔
收集整理的這篇文章主要介紹了
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>
<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)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： excel怎么算复购率(EXCEL怎么算
- 下一篇： 毒你没商量！DOC病毒原理完全解析（转）