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分享（一）

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

AngularJs的UI组件ui-Bootstrap分享（六）——Tabs的更多相关文章

  1. Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu

    1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...

  2. Ionic4.x 中的 UI 组件(UI Components) 日期组件

    1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...

  3. Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

    Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...

  4. Ionic4.x 中的 UI 组件(UI Components)表单相关组件

    1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...

  5. 挂号平台首页开发（UI组件部分）

    JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...

  6. AngularJs的UI组件ui-Bootstrap分享（一）

    最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...

  7. AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

    Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...

  8. AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

    进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条.第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条. 这 ...

  9. AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

    Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...

随机推荐

  1. C#常用错误

    解决方法: 在配置文件连接数据库设置后加 MultipleActiveResultSets=true; <add key="ConnectionString" value=& ...

  2. RESTFUL API 安全设计指南

    RESTFUL API 安全设计指南 xxlegend · 2015/10/18 15:08 0x01 REST API 简介 REST的全称是REpresentational State Trans ...

  3. no route to host

    防火墙没有关闭: systemctl stop firewalld

  4. TAP/TUN摘要

    TUN适用于IP帧.Tap适用于以太网帧.TAP摸拟一个以太网设备(以arp广播MAC识别),它操作第二层数据包如以太网数据帧.TUN模拟了网络层ip设备(以点对点的方式,使用ip标识),操作第三层数 ...

  5. Apache Commons Lang

    http://commons.apache.org/proper/commons-lang/javadocs/api-release/org/apache/commons/lang3/package- ...

  6. 学习笔记找到多个具有相同 ID“_header”的控件,FindControl 要求控件具有唯一的 ID.

    解决 找到多个具有相同 ID“_header”的控件,FindControl 要求控件具有唯一的 ID. private void DisplayHotBooks()    {        //获取 ...

  7. c# 打乱数组

    有时候得到了一个List,我想把它随机排列一下顺序.而且如果针对不同类型的List都能用,就要用到泛型. 其实思想很简单,就是从原List中每次随机取一项,添加到新的List中,并在原List中删除. ...

  8. JQuery的ajaxFileUpload图片上传初试

    本案例主要说讲使用ajaxFileUpload实现图片的异步上传. 1.html代码部分 这里的代码,主要设置一下name,后台获取时候要用到,还有设置一个onchange的事件对应的方法:ajaxF ...

  9. MySQL中如何查看“慢查询”，如何分析执行SQL的效率？

    一.MySQL数据库有几个配置选项可以帮助我们及时捕获低效SQL语句 1,slow_query_log这个参数设置为ON,可以捕获执行时间超过一定数值的SQL语句. 2,long_query_time ...

  10. Scala 学习笔记（五）

    def main(args : Array[String]): Unit = { def add(x:Int,y:Int):Int = { return x+y; } def subtract:(In ...