Tabs

案例

<!DOCTYPE html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href='../node_modules/bootstrap/dist/css/bootstrap.css'>

    <link rel="stylesheet" href='../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-csp.css'>

    <script src="../node_modules/angular/angular.min.js"></script>

    <script src="../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>

    <style type="text/css">

        form.tab-form-demo .tab-pane {

            margin: 20px 20px;

        }

    </style>

    <script>

        angular.module('myApp',['ui.bootstrap'])

            .controller('TabsDemoCtrl', function ($scope, uibDateParser) {

                $scope.tabs = [

                    { title:'Dynamic Title 1', content:'Dynamic content 1' },

                    { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }

                ];

                $scope.alertMe = function() {

                    setTimeout(function() {

                        $window.alert('You\'ve selected the alert tab!');

                    });

                };

                $scope.model = {

                    name: 'Tabs'

                };

            });

    </script>

</head>

<body>

<div ng-controller="TabsDemoCtrl">

    <p>Select a tab by setting active binding to true:</p>

    <p>

        <button type="button" class="btn btn-default btn-sm" ng-click="active = 1">Select second tab</button>

        <button type="button" class="btn btn-default btn-sm" ng-click="active = 2">Select third tab</button>

    </p>

    <p>

        <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>

    </p>

    <hr />

    <uib-tabset active="active">

        <uib-tab index="0" heading="Static title">Static content</uib-tab>

        <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" 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>

            I've got an HTML heading, and a select callback. Pretty cool!

        </uib-tab>

    </uib-tabset>

    <hr />

    <uib-tabset active="activePill" vertical="true" type="pills">

        <uib-tab index="0" heading="Vertical 1">Vertical content 1</uib-tab>

        <uib-tab index="1" heading="Vertical 2">Vertical content 2</uib-tab>

    </uib-tabset>

    <hr />

    <uib-tabset active="activeJustified" justified="true">

        <uib-tab index="0" heading="Justified">Justified content</uib-tab>

        <uib-tab index="1" heading="SJ">Short Labeled Justified content</uib-tab>

        <uib-tab index="2" heading="Long Justified">Long Labeled Justified content</uib-tab>

    </uib-tabset>

    <hr />

    Tabbed pills with CSS classes

    <uib-tabset type="pills">

        <uib-tab heading="Default Size">Tab 1 content</uib-tab>

        <uib-tab heading="Small Button" classes="btn-sm">Tab 2 content</uib-tab>

    </uib-tabset>

    <hr />

    Tabs using nested forms:

    <form name="outerForm" class="tab-form-demo">

        <uib-tabset active="activeForm">

            <uib-tab index="0" heading="Form Tab">

                <ng-form name="nestedForm">

                    <div class="form-group">

                        <label>Name</label>

                        <input type="text" class="form-control" required ng-model="model.name"/>

                    </div>

                </ng-form>

            </uib-tab>

            <uib-tab index="1" heading="Tab One">

                Some Tab Content

            </uib-tab>

            <uib-tab index="2" heading="Tab Two">

                More Tab Content

            </uib-tab>

        </uib-tabset>

    </form>

    Model:

    <pre>{{ model | json }}</pre>

    Nested Form:

    <pre>{{ outerForm.nestedForm | json }}</pre>

</div>

</body>

</html>

效果

uib-tabset 配置

active (Default: Index of first tab) - 选项卡索引。设置这个现有选项卡的标签索引。

<button type="button" class="btn btn-default btn-sm" ng-click="uibTabDemo = 1">点击后切换到two</button>

    <uib-tabset active="uibTabDemo">

        <uib-tab index="0" heading="one">

            one

        </uib-tab>

        <uib-tab index="1" heading="two">

            two

        </uib-tab>

    </uib-tabset>

justified $ (Default: false) -标签填补容器的宽度受否一致。

<uib-tabset active="activeJustified" justified="true">

        <uib-tab index="0" heading="Justified">Justified content</uib-tab>

        <uib-tab index="1" heading="SJ">Short Labeled Justified content</uib-tab>

        <uib-tab index="2" heading="Long Justified">Long Labeled Justified content</uib-tab>

        <uib-tab index="3" heading="Long ">Long Labeled content</uib-tab>

        <uib-tab index="4" heading="Justified">Justified content</uib-tab>

    </uib-tabset>

<uib-tabset active="activeJustified" justified="false">

        <uib-tab index="0" heading="Justified">Justified content</uib-tab>

        <uib-tab index="1" heading="SJ">Short Labeled Justified content</uib-tab>

        <uib-tab index="2" heading="Long Justified">Long Labeled Justified content</uib-tab>

        <uib-tab index="3" heading="Long ">Long Labeled content</uib-tab>

        <uib-tab index="4" heading="Justified">Justified content</uib-tab>

    </uib-tabset>

template-url (Default: uib/template/tabs/tabset.html) - 一个URL代表组件使用的模板位置。

type (Defaults: tabs) - 导航类型。可能的值是“tabs”和“pills”。以下是pills类型

<uib-tabset type="pills">

        <uib-tab heading="Default Size">Tab 1 content</uib-tab>

        <uib-tab heading="Small Button" classes="btn-sm">Tab 2 content</uib-tab>

    </uib-tabset>

vertical $ (Default: false) - 标签是否垂直堆叠显示（最好设置type为pills，因为ui-bootstrap并没有对对垂直显示做样式调整）。

<uib-tabset active="activePill" vertical="true" type="pills">

        <uib-tab index="0" heading="Vertical 1">Vertical content 1</uib-tab>

        <uib-tab index="1" heading="Vertical 2">Vertical content 2</uib-tab>

    </uib-tabset>

uib-tab 配置

classes $ - 一个可选的字符串，内容为空格分隔的CSS类.这个类是作用到标签上的，而不是内容上的

Tabbed pills with CSS classes

    <uib-tabset type="pills">

        <uib-tab heading="Default Size">Tab 1 content</uib-tab>

        <uib-tab heading="Small Button" classes="btn-sm">Tab 2 content</uib-tab>

    </uib-tabset>

deselect() $ - 当标签被激活时，一个可选的表达式
disable $ (Default: false) - 禁用选项卡

heading - 标题文本

<uib-tabset>

        <uib-tab index="0" heading="one">

            one

        </uib-tab>

        <uib-tab index="1" heading="two">

            two

        </uib-tab>

    </uib-tabset>

index - 标签索引。必须是唯一的数字或字符串。

select() $ - 一个可选的表达式，当标签被激活时触发。

$scope.tabs = [

                    { title:'Dynamic Title 1', content:'Dynamic content 1' },

                    { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }

                ];

                $scope.alertMe = function() {

                    console.log('demo')

                };

template-url (Default: uib/template/tabs/tab.html) - 一个URL的位置代表使用选项卡标题的模板。

Tabset heading

如果使用uib-tabset字符串标题无法满足需求,您也可以使用一个uib-tab-heading元素。也可以使用HTML。

<uib-tabset active="active">

        <uib-tab index="0" heading="Static title">Static content</uib-tab>

        <uib-tab index="1" select="alertMe()">

            <uib-tab-heading>

                <i class="glyphicon glyphicon-bell"></i> Alert!

            </uib-tab-heading>

            I've got an HTML heading, and a select callback. Pretty cool!

        </uib-tab>

    </uib-tabset>

已知的问题

要在标签中使用可点击元素（例如a标签），你必须改为使用div元素，而不是a元素，并设置相应的样式。

angular-ui-bootstrap插件API - Tabs的更多相关文章

Angular -ui - BootStrap组件的解释以及使用
关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...
jquery ui bootstrap日期插件
http://blog.csdn.net/php_897721669/article/details/7404527 搜索“jquery ui日期插件怎么显示年份”? $("#datepic ...
Angular.js+Bootstrap实现手风琴菜单
说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...
Bootstrap插件概述
前面的话 Bootstrap除了包含丰富的Web组件之外,如下拉菜单.按钮组.导航.分页等,还包括一些JavaScript的插件.插件为 Bootstrap 的组件赋予了“生命”.Bootstrap的 ...
20个超棒的jQuery bootstrap 插件
1. Bootstrap File Input Bootstrap3.x 的一个增强版的HTML 5 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...
Bootstrap插件的使用
昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...
angular-ui-bootstrap插件API - Pagination
Pagination: 案例 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <h ...
angular-ui-bootstrap插件API - Pager
Pager: 案例 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head&g ...
Android视频编辑SDK--RDVECore来自锐动的无UI,高度抽象化API
1 RDVECore功能概述 RDVECore是锐动推出的无UI,高度抽象化API的视频编辑SDK,支持以下功能: 1.1 丰富的编辑功能 RDVECore包含了丰富的基础功能,对于编辑中的视频.图片 ...

随机推荐

使用ReSharper打造团队代码
当前标签: 漂亮代码请看高质量的代码——更新 Leo C.W 2014-04-01 19:16 阅读:544 评论:5 我们的终极编码规范 Leo C.W 2014-03-31 22:34 ...
Parameter Binding in ASP.NET Web API(参数绑定)
Parameter Binding in ASP.NET Web API(参数绑定) 导航阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnbl ...
vijos1009：扩展欧几里得算法
1009:数论扩展欧几里得算法其实自己对扩展欧几里得算法一直很不熟悉...应该是因为之前不太理解的缘故吧这次再次思考,回看了某位大神的推导以及某位大神的模板应该算是有所领悟了首先根据题意:L1= ...
SOCKET网络编程细节问题1
SOCKET网络编程快速上手(二)——细节问题(1) 三.细节问题一个也不能少 Socket编程说简单也简单,程序很容易就能跑起来,说麻烦还真是麻烦,程序动不动就出问题.记得刚开始写网络代码的时候,那 ...
分布式EventBus的Socket实现 - 发布订阅
分布式EventBus的Socket实现 - 发布订阅在这篇文章中,EventBus实现 - 发布订阅 - XML加载所适用的范围只是本机的事件传播,要是牵涉到多台服务器之间的事件传播就不行了,解 ...
完整显示当前日期和时间的JS代码（2007年2月25日星期日正午12:42:48）
代码演示效果为“2007年2月25日星期日正午12:42:48”. 使用方法:将下面的JS代码放到你想要显示的页面中(支持HTML页面),然后在你想要显示时间的位置插入下面的代码即可 <div ...
Vim 7.4.1952 with Python/Ruby/Lua/Perl/C Syntax built for Ubuntu 16.04 x86_64
The default Vim provided by Ubuntu 16.04 even did not have Python support. That's insane. I say, wha ...
杨辉三角形II(Pascal's Triangle II)
杨辉三角形II(Pascal's Triangle II) 问题给出一个索引k,返回杨辉三角形的第k行. 例如,给出k = 3,返回[1, 3, 3, 1] 注意: 你可以优化你的算法使之只使用O( ...
Android 点击桌面快捷方式和Notifycation跳转到Task栈顶Activity
我们一般下载的应用在第一次启动应用的时候都会给我创建一个桌面快捷方式,然后我在网上找了些资料整理下了,写了一个快捷方式的工具类,这样我们以后要创建快捷方式的时候直接拷贝这个类,里面提供了一些静态方法, ...
mysql基础：数据库的创建，增删改查
=============查看数据库========================== 使用SHOW语句找出服务器上当前存在什么数据库: mysql> SHOW DATABASES; +--- ...

angular-ui-bootstrap插件API - Tabs