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可使用的属性有：


uib-tab可使用的属性有：

如果面板的标题是简单的文本，使用heading属性就足够了。如果是复杂的内容，比如有图标，那么可以使用uib-tab-heading。这一点和According控件是一样的。

AngularJs的UI组件ui-Bootstrap---tabs控件的更多相关文章

  1. 第32讲 UI组件之 时间日期控件DatePicker和TimePicker

    第32讲 UI组件之 时间日期控件DatePicker和TimePicker 在Android中,时间日期控件相对来说还是比较丰富的.其中, DatePicker用来实现日期输入设置,    Time ...

  2. 第31讲 UI组件之 Gallery画廊控件

    第31讲 UI组件之 Gallery画廊控件 1.Gallery的简介 Gallery(画廊)是一个锁定中心条目并且拥有水平滚动列表的视图,一般用来浏览图片,并且可以响应事件显示信息.Gallery只 ...

  3. JS组件系列——Bootstrap 树控件使用经验分享

    前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...

  4. js插件---Bootstrap 树控件

    js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...

  5. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.4.Tabs控件

    之前,我们已经介绍了 jQuery UI 库,CSS 框架.下面,我们将学习这些有增强可视化效果,高度可配置的用户交互组件. Tab 的特性是,点击 tab 后,会高亮该 tab,并显示他的关联con ...

  6. HTML5 Web app开发工具Kendo UI Web中Grid网格控件的使用

    Kendo UI Web中的Grid控件不仅可以显示数据,并对数据提供了丰富的支持,包括分页.排序.分组.选择等,同时还有着大量的配置选项.使用Kendo DataSource组件,可以绑定到本地的J ...

  7. angularjs 整合bootstrap 时间控件

    一.引入js <link href="${basePath}/static/plugin/bootstrap/css/bootstrap-datetimepicker.min.css& ...

  8. iOS开发UI篇—使用picker View控件完成一个简单的选餐应用

    iOS开发UI篇—使用picker View控件完成一个简单的选餐应用 一.实现效果 说明:点击随机按钮,能够自动选取,下方数据自动刷新. 二.实现思路 1.picker view的有默认高度为162 ...

  9. iOS开发UI篇—Quartz2D(自定义UIImageView控件)

    iOS开发UI篇—Quartz2D(自定义UIImageView控件) 一.实现思路 Quartz2D最大的用途在于自定义View(自定义UI控件),当系统的View不能满足我们使用需求的时候,自定义 ...

  10. [转]通过AngularJS directive对bootstrap日期控件的的简单包装

    本文转自:http://www.cnblogs.com/Benoly/p/4109460.html 最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的 ...

随机推荐

  1. 《大道至简》第一章——编程的精义_读后感（Java伪代码形式）

    <大道至简>第一章——编程的精义_读后感(Java伪代码形式)1.愚公移山//愚公为团体的项目组织者.团体经理.编程人员.技术分析师等//子孙荷担者三人为三名技术人员//遗男为外协//目标 ...

  2. android——利用SharedPreference做引导界面

    很久以前就接触过sharedPreference这个android中的存储介质.但是一直没有实际使用过,今天在看之前做的“民用机型大全”的app时,突然想到可以使用sharedPreference类来 ...

  3. Zxing库

    一.介绍 Zxing是一个开放的源码,用java实现的多种样式的1D/2D条码处理库,它包含了联系到其他语言的端口.Zxing可以实现手机的内置摄像头完成条码的扫描及解码.目前支持:UPC-A ,UP ...

  4. 72. 求m到n之和

    求m到n之和 int sum(int m, int n) { int i, result = 0; for (i=m; i<=n; i++) result = result+i; return ...

  5. PHP （sendmail / PHPMailer / ezcMailComposer）发送邮件

    一. 使用 PHP 内置的 mail() 函数 1. Windows 下 环境:WampServer2.5(Windows 10,Apache 2.4.9,MySQL 5.6.17,PHP 5.5.1 ...

  6. Clustering Methods: Benefits and Limitations

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION

  7. Apache2 worker

    http://www.php-internals.com/book/?p=chapt08/08-03-zend-thread-safe-in-php 在多线程系统中,进程保留着资源所有权的属性,而多个 ...

  8. 自己生成nginx的https证书

    #自己生成ssl证书 这里说下Linux 系统怎么通过openssl命令生成 证书. 首先执行如下命令生成一个key openssl genrsa -des3 -out ssl.key 1024 然后 ...

  9. css线性渐变--linear-gradient

    使用css直接写渐变,对于现在而言,应该属于比价简单的一件事了,在一定程度上,扁平化的设计趋势的出现,减少了使用渐变色的场景,但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法. ...

  10. Android NDK常见配置问题的解决方案

    添加NDK包时出现"Not a valid NDK directory" 在解压的android-ndk-rxxx文件夹中新建一个txt文件,将名字包括后缀更改为ndk-build ...