angular Tabs (ui.bootstrap.tabs)

最新推荐文章于 2022-09-23 13:36:55 发布

吴杼恩

最新推荐文章于 2022-09-23 13:36:55 发布

阅读量5.8k

点赞数 1

分类专栏： AngularJS知识点汇总文章标签： angular动态添加tab ui.bootstrap.tabs

本文链接：https://blog.csdn.net/qianqianyixiao1/article/details/50587580

版权

AngularJS知识点汇总专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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控件文件也在次链接下载.

吴杼恩

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
17
评论
angular Tabs (ui.bootstrap.tabs)

1:引入基础文件搭建环境 2 详细文件ui.bootstrap.demo.jsangular.module('ui.bootstrap.demo',[ ]).controller('TabsNavCtrl', function ($scope, $window) { $scope.addNewTab = function() {//动态添加tab函数
复制链接

扫一扫