tabs控件使用uib-tabset指令和uib-tab指令，效果是這樣的：
1 <!DOCTYPE html>
2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <link href="/Content/bootstrap.css" rel="stylesheet" />
6 <title></title>
7
8 <script src="/Scripts/angular.js"></script>
9 <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10 <script>
11
12 angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('TabsDemoCtrl', function ($scope, $window) { 13 $scope.tabs = [ 14 { title: '標簽頁a', content: '標簽頁a的內容' }, 15 { title: '標簽頁b', content: '標簽頁b的內容', disabled: true } 16 ]; 17
18 $scope.alertMe = function () { 19 setTimeout(function () { 20 $window.alert('clicked!'); 21 }); 22 }; 23 }); 24 </script>
25 </head>
26 <body>
27 <div ng-controller="TabsDemoCtrl">
28 <uib-tabset active="active" type="tabs">
29 <uib-tab index="0" heading="標簽頁1">內容1</uib-tab>
30 <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
31 {{tab.content}} 32 </uib-tab>
33 <uib-tab index="3" select="alertMe()">
34 <uib-tab-heading>
35 <i class="glyphicon glyphicon-bell"></i> Alert! 36 </uib-tab-heading>
37 內容部分 38 </uib-tab>
39 </uib-tabset>
40 </div>
41 </body>
42 </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