AngularJs的UI组件ui-Bootstrap分享（六）——Tabs
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的更多相关文章
- Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu
1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...
- Ionic4.x 中的 UI 组件(UI Components) 日期组件
1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...
- Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件
Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...
- Ionic4.x 中的 UI 组件(UI Components)表单相关组件
1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...
- 挂号平台首页开发（UI组件部分）
JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...
- AngularJs的UI组件ui-Bootstrap分享（一）
最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...
- AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel
Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...
- AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar
进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条.第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条. 这 ...
- AngularJs的UI组件ui-Bootstrap分享（十二）——Rating
Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...
随机推荐
- 【Java】集合_学习笔记
一.集合 1.集合类也称容器类,主要负责保存.盛装其他数据. 2.集合可以保存数量不确定的数据,保存具有映射关系的数据(也称关联数组). 3.Java5后提供一些多线程安全的集合类,放在java.ut ...
- 在web.xml注册applicationContext.xml配置文件
概要: Spring配置文件是集成了Spring框架的项目的核心,引擎的开始是:容器先是加载web.xml,接着是applicationContext.xml在web.xml里的注册.以下我们将介绍a ...
- java利用Scanner获取键盘输入
首发地址:我的网易博客 在运行一个java程序的时候,可能我们需要在运行的时候传递一些参数进去...咋办呢... java提供了一个Scanner类,利用这个类,我们可以很方便的获取键盘输入的参数.. ...
- Image放大缩小在放进Imageview
// 拿到要缩小放大的Bitmap obitmap = BitmapFactory.decodeResource(this.getResources(),R.drawable.ic_launcher) ...
- 阿里云docker
https://cr.console.aliyun.com docker 安装mysql image sudo docker pull mysql docker 运行 mysql docker r ...
- Sql Server R2还有备份数据库错误
错误信息描述 该数据库是运行版本10.50.1600的服务器上备份的.该版本与此服务器(运行版本10.00.1600)不兼容.请在支持该被份的服务器上还原该数据, 或者使用与此服务器兼容的备份(M ...
- express+gulp构建项目（三）gulp任务
这次来看一看gulp是怎么工作的. tasks/paths.js paths.js文件里存放的是gulp任务中需要导入的文件的路径和导出的路径. /** * gulp.src 地址 * gulp.de ...
- lua实现私有函数
本文是原创文章,如需转载,请注明文章出处 要用lua实现私有函数,关键就是使用metatable的特性来实现. Test.lua: local v = {};v.x = 100;v.y = 200; ...
- explain 执行计划详解
id:id是一组数字,表示查询中执行select子句或操作表的顺序,如果id相同,则执行顺序从上至下,如果是子查询,id的序号会递增,id越大则优先级越高,越先会被执行. id列为null的就表是这是 ...
- Process Explorer使用图文教程
这是一款由Sysinternals开发的Windows系统和应用程序监视工具,目前Sysinternals已经被微软收购,此款不仅结合了文件监视和注册表监视两个工具的功能,还增加了多项重要的增强功能, ...