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. 【python】安装python第三方库lxml时，遇到问题：[ERROR: 'xslt-config' 不是内部或外部命令，也不是可运行的程序]

    一.概述 lxml介绍http://lxml.de/ 二.问题 ERROR: 'xslt-config' 不是内部或外部命令,也不是可运行的程序 三.解决方法 Scrapy在Windows上的安装笔记 ...

  2. 配置ssl访问(https)

    转载自http://www.blogjava.net/stevenjohn/archive/2012/09/26/388600.html 简要记录主要步骤备忘 1.进入到jdk下的bin目录 2.输入 ...

  3. IOS 开发调用打电话，发短信

    1.调用 自带mail[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"mailto://admin@hzl ...

  4. 【5集iCore3_ADP演示视频】5-1 iCore3应用开发平台开箱视频

    iCore3双核心应用开发平台基于iCore3双核心板,包含ARM.FPGA.7寸液晶屏.双通道数字示波器.任意波发生器.电压表等模块,是一款专为电子爱好者设计的综合性电子学习系统. [视频简介]本视 ...

  5. 一起来做webgame，《Javascript贪食蛇》

    2019-09-22更新: 使用canvas实现:https://github.com/onlyfu/SnakeSir-Javascript 以下为HTML4实现: 今天来个略有意思的,<贪食蛇 ...

  6. Linux下解压命令大全 解压缩 tar bz2 zip tar.gz gz

    .tar解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!)---------------.gz解压1:gunz ...

  7. php count()函数用法 及其 一个坑

    用法 count() 函数返回数组中元素的数目. count(array,mode); [mode] 0 - 默认.不计算多维数组中的所有元素. 1 - 递归地计算数组中元素的数目(计算多维数组中的所 ...

  8. Java 三章错题

    1.每个类都使用Object作为超类.所以对象(包括数组)都实现这个类的方法. 2.在不明确给出超类的情况下,java会自动把object作为要定义的超类. 可以使用类型为Object的变量指向任意类 ...

  9. angularJS实现二级联动查询以及自定义过滤器的使用

    <!DOCTYPE html><html lang="en"><head>    <meta http-equiv="Conte ...

  10. cocoapods 升级到最新beta 版

    1 确保你的ruby源是https://rubygems.org/  国内的镜像不一定行 2 sudo gem install -n /usr/local/bin cocoapods 或者 sudo ...