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.5 运算符
1. 关系运算符:大于(>).小于(<).等于(==).不等于(!=).大于等于(>=).小于等于(<=),关系运算的结果是个boolean值.2. 逻辑运算符:重点讲解两个, ...
- yyyy-MM-dd与YYYY-MM-dd
Date date=new Date(); DateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:MM:SS"); DateForm ...
- Treap
treap模板 期望复杂度为O(nlogn) 带合并的treap期望复杂度为O(nlognlogn) #include <bits/stdc++.h> ; struct tree{ int ...
- JQuery_DOM 节点操作之包裹节点
jQuery 提供了一系列方法用于包裹节点,那包裹节点是什么意思呢?其实就是使用字符串代码将指定元素的代码包含着的意思. <script type="text/javascript&q ...
- leetcode刷题全纪录(持续更新)
2.Add Two Numbers 原题链接https://leetcode.com/problems/add-two-numbers/ AC解: public ListNode addTwoNumb ...
- 如何解决子元素设了margin-top之后父元素所受的影响
解决方法: 1.在父元素上加:overflow:hidden. 2.给父元素加border; 3.外容器上加上padding.
- JavaWeb 自定义404页面
本来,Tomcat中自定义404页面不过是在web.xml文件中写4行代码的事情. 直接引用 Tomcat官方FAQ 怎样自定义404页面? 编辑web.xml <error-page> ...
- gulp入门教程
第1步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问 nodejs.org,下载完成后直接运行程序,就一切准备就绪.npm会随着安装包一起安装,稍后会用到它. 为了确保Nod ...
- hdu1754 I Hate It
题目链接:hdu1754 I Hate It 树状数组学习参考博客:http://blog.csdn.net/u010598215/article/details/48206959 树状数组之前没看懂 ...
- Bootstrap网格系统
一.网格系统 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 二.基本结构 <div class="container"> &l ...