AngularJs的UI组件ui-Bootstrap分享(六)——Tabs
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
posted on 2016-07-02 22:21 pilixiami 阅读(18189) 评论(4) 编辑 收藏 举报