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的更多相关文章

  1. Angular -ui - BootStrap组件的解释以及使用

    关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...

  2. jquery ui bootstrap日期插件

    http://blog.csdn.net/php_897721669/article/details/7404527 搜索“jquery ui日期插件怎么显示年份”? $("#datepic ...

  3. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  4. Bootstrap插件概述

    前面的话 Bootstrap除了包含丰富的Web组件之外,如下拉菜单.按钮组.导航.分页等,还包括一些JavaScript的插件.插件为 Bootstrap 的组件赋予了“生命”.Bootstrap的 ...

  5. 20个超棒的jQuery bootstrap 插件

    1. Bootstrap File Input Bootstrap3.x 的一个增强版的HTML 5 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...

  6. Bootstrap插件的使用

    昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...

  7. angular-ui-bootstrap插件API - Pagination

    Pagination: 案例 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <h ...

  8. angular-ui-bootstrap插件API - Pager

    Pager: 案例 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head&g ...

  9. Android视频编辑SDK--RDVECore来自锐动的无UI,高度抽象化API

    1 RDVECore功能概述 RDVECore是锐动推出的无UI,高度抽象化API的视频编辑SDK,支持以下功能: 1.1 丰富的编辑功能 RDVECore包含了丰富的基础功能,对于编辑中的视频.图片 ...

随机推荐

  1. [置顶] 如何使用c3p0+spring连接oracle数据库

    1. 首先是jdbc.properties属性文件的编写,便于数据库移植: datasource.driverClassName=oracle.jdbc.driver.OracleDriver dat ...

  2. Linux内核编译和运行

      内核获取网站:https://www.kernel.org/pub/linux/kernel/ 步骤如下: 1.打开终端,更改用户权限为root.具体做法是在终端输入sudo su,然后按提示输入 ...

  3. [google面试CTCI] 1-4.判断两个字符串是否由相同字符组成

    [字符串与数组] Q:Write a method to decide if two strings are anagrams or not 题目:写一个算法来判断两个字符串是否为换位字符串.(换位字 ...

  4. poj1269

    基础题,直线间关系 #include <iostream> #include <math.h> #include <iomanip> #define eps 1e- ...

  5. 随机生成n个不相等的随机数

    在计算机视觉中,(例如8点算法)经常用到RANSAC算法在N个数据中找到最合适的一组n(n<N)个数据对,使某项指标达到最大.解决这个问题需要随机的在N个数据对中采样.本文实现一种线性的,复杂度 ...

  6. 《Troubleshooting SQL Server》读书笔记-CPU使用率过高(下)

    <Troubleshooting SQL Server>读书笔记-CPU使用率过高(下) 第三章 High CPU Utilization. CPU使用率过高的常见原因 查询优化器会尽量从 ...

  7. C#常用的数据格式转换

    用DataFormatString格式化GridView 在 GridView里面显示数据,要显示的数据有好多位小数,就想让它只显示两位小数,在delphi里,直接用DisplayFormat就行了, ...

  8. Linux下SSH+Firefox

    Linux下SSH+Firefox 简明FQ攻略 FQ的软件有很多,楼主原来在Windows下用过Tor(洋葱头).Puff.freegate等,一般只需要打开FQ软件,简单的设置后就可以FQ浏览了. ...

  9. POJ 1654 Area

    题意:从原点出发,沿着8个方向走,每次走1个点格或者根号2个点格的距离,最终回到原点,求围住的多边形面积. 分析:直接记录所经过的点,然后计算多边形面积.注意,不用先保存所有的点,然后计算面积,边走变 ...

  10. 自制AutoMapper实现DTO到持久层Entity的转换

    自制AutoMapper实现DTO到持久层Entity的转换 项目中经常涉及到页面DTO更新,保存到数据库的操作,这就必然牵扯到DTO和持久层对象的转换,常见的第三方库有: java:dozer .n ...