tabs控件使用uib-tabset指令和uib-tab指令，效果是这样的：

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('TabsDemoCtrl', function ($scope, $window) {

             $scope.tabs = [

               { title: '标签页a', content: '标签页a的内容' },

               { title: '标签页b', content: '标签页b的内容', disabled: true }

             ];

             $scope.alertMe = function () {

                 setTimeout(function () {

                     $window.alert('clicked!');

                 });

             };

         });

     </script>

 </head>

 <body>

     <div ng-controller="TabsDemoCtrl">

         <uib-tabset active="active" type="tabs">

             <uib-tab index="0" heading="标签页1">内容1</uib-tab>

             <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">

                 {{tab.content}}

             </uib-tab>

             <uib-tab index="3" select="alertMe()">

                 <uib-tab-heading>

                     <i class="glyphicon glyphicon-bell"></i> Alert!

                 </uib-tab-heading>

                 内容部分

             </uib-tab>

         </uib-tabset>

     </div>

 </body>

 </html>

uib-tabset可使用的属性有：

属性名

默认值

备注

active

第一个标签页的索引

当前激活的标签页的索引

justified

false

是否将各个标签页等宽分布在父容器中

template-url

uib/template/tabs/tabset.html

type

tabs

标签页的类型。可设置为tabs或pills

vertical

false

是否垂直显示

uib-tab可使用的属性有：

属性名

默认值

备注

classes

可添加用空格分隔的类名

deselect

标签页面板取消选中时（激活其他标签页）触发的函数。支持传入事件对象参数$event，并且可以用$event.preventDefault()取消操作。

disable

false

是否禁用

heading

标签页标题的文本

index

标签页的索引。每个索引必须唯一

select

标签页选中时触发的函数。支持传入事件对象参数$event，并且可以用$event.preventDefault()取消操作。

template-url

uib/template/tabs/tab.html

如果面板的标题是简单的文本，使用heading属性就足够了。如果是复杂的内容，比如有图标，那么可以使用uib-tab-heading。这一点和According控件是一样的。

目录：

AngularJs的UI组件ui-Bootstrap分享（一）

AngularJs的UI组件ui-Bootstrap分享（二）——Collapse

AngularJs的UI组件ui-Bootstrap分享（三）——Accordion

AngularJs的UI组件ui-Bootstrap分享（四）——Datepicker Popup

AngularJs的UI组件ui-Bootstrap分享（五）——Pager和Pagination

AngularJs的UI组件ui-Bootstrap分享（六）——Tabs

AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown

AngularJs的UI组件ui-Bootstrap分享（八）——Tooltip和Popover

AngularJs的UI组件ui-Bootstrap分享（九）——Alert

AngularJs的UI组件ui-Bootstrap分享（十）——Model

AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead

AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

AngularJs的UI组件ui-Bootstrap分享（六）——Tabs的更多相关文章

  1. Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu

    1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...

  2. Ionic4.x 中的 UI 组件(UI Components) 日期组件

    1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...

  3. Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

    Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...

  4. Ionic4.x 中的 UI 组件(UI Components)表单相关组件

    1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...

  5. 挂号平台首页开发（UI组件部分）

    JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...

  6. AngularJs的UI组件ui-Bootstrap分享（一）

    最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...

  7. AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

    Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...

  8. AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

    进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条.第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条. 这 ...

  9. AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

    Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...

随机推荐

  1. 关于C语言结构体，指针，声明的详细讲解。——Arvin

    关于结构体的详细分析 只定义结构体 struct Student { int age; char* name; char sex;//结构体成员 };//(不要忘记分号) Student是结构体的名字 ...

  2. OpenCV计算点到直线的距离 数学法

    我们在检测图像的边缘图时,有时需要检测出直线目标,hough变换检测出直线后怎么能更进一步的缩小区域呢?其中,可以根据距离来再做一判断,就涉及到了点与直线的距离问题. 点到直线距离代码如下: //== ...

  3. 附加类型的实体失败，因为相同类型的其他实体已具有相同的主键值。在使用 "Attach" 方法或者将实体的状态设置为 "Unchanged" 或 "Modified" 时如果图形中的任何实体具有冲突键值

    var list= DAL.LoadEntities(x => x.OrderCode == orderCode).AsNoTracking().ToList().FirstOrDefault( ...

  4. Javascript实现二级select联动

    1.js cities = new Object(); cities['河北省']=new Array('石家庄', '张家口市', '承德市', '秦皇岛市', '唐山市', '廊坊市', '保定市 ...

  5. HTML 的 meta 标签

    我们先来看看维基百科上对 meta element 的定义: Meta elements are tags used in HTML and XHTML documents to provide st ...

  6. PHP加速处理插件 Zend Optimizer，Zend Guard Loader 和 Zend Opcache 区别

    PHP 5.3.X   以前版本 为  Zend Optimizer PHP 5.3.X   之后 更名为  Zend Guard Loader 可以帮助php执行加密后的php代码 安装实例以Ubu ...

  7. ionic ngCordova插件安装

    ngCordova的安装配置 官网提供了两种安装的方法: 1. 使用bower来安装 2. 下载zip文件 推荐使用bower安装,在使用bower之前,我们电脑中需要先配置bower.bower的配 ...

  8. 配置handler vs2013 iis8.0

    <system.webServer> <modules runAllManagedModulesForAllRequests="true" /> <v ...

  9. js倒计时跳转页面

    var t=10; setInterval(function refer(){ if(t>0){ document.getElementById("em").innerHTM ...

  10. XSS 初识

    xss(跨站脚本攻击)xss是指攻击者在网页中嵌入客户端脚本,通常是javascript编写的恶意代码,当用户使用浏览器浏览被嵌入恶意代码的网页时,恶意代码将在用户的浏览器上被解析执行.重点是“脚本” ...