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

时间：2016-07-02 22:44:11 收藏：0 阅读：5021

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>

View Code

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控件是一样的。