码迷,mamicode.com
首页 > Web开发 > 详细

AngularJs的UI组件ui-Bootstrap分享(六)——Tabs

时间:2017-04-23 15:54:14      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:url   meta   cal   xmlns   timeout   控件   并且   function   time   

原文地址: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控件是一样的。

 

AngularJs的UI组件ui-Bootstrap分享(六)——Tabs

标签:url   meta   cal   xmlns   timeout   控件   并且   function   time   

原文地址:http://www.cnblogs.com/gongshunkai/p/6752533.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!