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. JS存取Cookie值

    一:存Cookie //存Cookie document.cookie = "id=" + escape(value); 二:取Cookie //提取Cookie值 functio ...

  2. caroufredsel 参数

    caroufredsel 参数 参数列表:参数名     默认值     说明circular     true     循环模式,true为无限循环,false为单轮循环.infinite      ...

  3. C语言的总结

    在C语言考试的中,我成绩不是很好,其实在学习C语言的时候我没有好好去学过,我知道了是我自己的错误,我不应该抱着侥幸的心里去上课的,我会去好好听课的哦l

  4. 了解Android的编译器

    了解一下Android的编译器并记录下来: Android在4.4以前是使用Dalvik VM的,通过Just In Time(JIT即时编译)来完成编译工作,在Android4.4提供了一种测试版本 ...

  5. 【转】常用聚类算法（一） DBSCAN算法

    原文链接:http://www.cnblogs.com/chaosimple/p/3164775.html#undefined 1.DBSCAN简介 DBSCAN(Density-Based Spat ...

  6. mac OS.NE开发环境搭建

    合肥程序员群:49313181.    合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入,申请备注填写姓名+技术+工作年限) Q  Q:408365330     E-Mail:eg ...

  7. Java 根据当前时间获取明天、当前周的周五、当前月的最后一天

    private Date getDateByType(Date date, Integer type) { Calendar calendar = Calendar.getInstance(); ca ...

  8. 未能加载文件或程序集“Newtonsoft.Json”或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配

    引用第三方的 fineui 库依然使用旧版本导致.更换 fineui为新版,或找到源码更改引用 为新版,问题解决.

  9. 20169212《Linux内核原理与分析》 第九周作业

    可执行程序的装载 一.预处理.编译.链接和目标文件的格式 可执行程序是怎么来的?通过以下这个图来呈现过程: 以我们常写的helloworld为例.我们编写了一个helloworld的.c文件,我们来把 ...

  10. Spring Bean

    一.Spring的几大模块:Data access & Integration.Transcation.Instrumentation.Core Spring Container.Testin ...