原文地址：http://www.cnblogs.com/pilixiami/p/5635137.html
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控件是一样的。