ui-bootstrap-tpls 中文 现在还不全的啊~,组件太多了,有空就更新
UI Bootstrap,用angular打造的bootstrap组件.
开始
依赖:
- angularJS
- angular-animate
- Bootstrap Css
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
配置:
手风琴--Accordion (ui.bootstrap.accordion)
<div ng-controller="AccordionDemoCtrl"><script type="text/ng-template" id="group-template.html"><div class="panel {{panelClass || 'panel-default'}}"><div class="panel-heading"><h4 class="panel-title" style="color:#fa39c3"><a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><spanng-class="{'text-muted': isDisabled}">{{heading}}</span></a></h4></div><div class="panel-collapse collapse" uib-collapse="!isOpen"><div class="panel-body" style="text-align: right" ng-transclude></div></div></div></script><p><button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button><button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button></p><div class="checkbox"><label><input type="checkbox" ng-model="oneAtATime">Open only one at a time</label></div><uib-accordion close-others="oneAtATime"><uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">This content is straight in the template.</uib-accordion-group><uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</uib-accordion-group><uib-accordion-group heading="Dynamic Body Content"><p>The body of the uib-accordion group grows to fit the contents</p><button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button><div ng-repeat="item in items">{{item}}</div></uib-accordion-group><uib-accordion-group heading="Custom template" template-url="group-template.html">Hello</uib-accordion-group><uib-accordion-group heading="Delete account" panel-class="panel-danger"><p>Please, to delete your account, click the button below</p><button class="btn btn-danger">Delete</button></uib-accordion-group><uib-accordion-group is-open="status.open"><uib-accordion-heading>I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i></uib-accordion-heading>This is just some content to illustrate fancy headings.</uib-accordion-group></uib-accordion>
</div>
js:
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {$scope.oneAtATime = true;$scope.groups = [{title: 'Dynamic Group Header - 1',content: 'Dynamic Group Body - 1'},{title: 'Dynamic Group Header - 2',content: 'Dynamic Group Body - 2'}];$scope.items = ['Item 1', 'Item 2', 'Item 3'];$scope.addItem = function() {var newItemNo = $scope.items.length + 1;$scope.items.push('Item ' + newItemNo);};$scope.status = {isFirstOpen: true,isFirstDisabled: false};
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<style>
<span style="white-space:pre"> </span>.active{background:red}
</style></head>
<body><div ng-app="myApp" ng-controller="AccordionDemoCtrl" >
<span style="white-space:pre"> </span> <uib-accordion ><uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</uib-accordion-group><span style="white-space:pre"> </span> <uib-accordion-group heading="elset"><p>Please, to delete your account, click the button below</p></uib-accordion-group></uib-accordion>
</div><script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('AccordionDemoCtrl', function ($scope) {$scope.groups = [{title: 'Dynamic Group Header - 1',content: 'Dynamic Group Body - 1'},{title: 'Dynamic Group Header - 2',content: 'Dynamic Group Body - 2'}];});</script>
</body>
</html>
uib-accordion 设置
<uib-accordion close-others="false">
2:"template-url":指定模板地址
<uib-accordion template-url="setting/setting.html" >
uib-accordion-group设置
1:"heading":设置折叠可点击的头部
<uib-accordion-group heading="Dynamic Body Content">
<uib-accordion-group heading="elset" is-disabled="true" >
3:"is-open":true/false 默认"false",折叠是否展开
<uib-accordion-group heading="elset" is-open="true" >
4:"panel-class":给折叠设置样式类
<uib-accordion-group heading="elset" panel-class="active">
5:"template-url":指定模板地址
<uib-accordion-group heading="elset" template-url="tl.html">
警告--Alert (ui.bootstrap.alert)
<div ng-controller="AlertDemoCtrl"><script type="text/ng-template" id="alert.html"><div class="alert" style="background-color:#fa39c3;color:white" role="alert"><div ng-transclude></div></div></script><uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert><uib-alert template-url="alert.html">A happy alert!</uib-alert><button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>
js
angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope) {$scope.alerts = [{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }];$scope.addAlert = function() {$scope.alerts.push({msg: 'Another alert!'});};$scope.closeAlert = function(index) {$scope.alerts.splice(index, 1);};
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<style>.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="AlertDemoCtrl" ><script type="text/ng-template" id="alert.html"><div class="alert" style="background-color:#fa39c3;color:white" role="alert"><div ng-transclude></div></div></script><uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert><uib-alert template-url="alert.html">A happy alert!</uib-alert><button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div><script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('AlertDemoCtrl', function ($scope) {$scope.alerts = [{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }];$scope.addAlert = function() {$scope.alerts.push({msg: 'Another alert!'});}$scope.closeAlert = function(index) {$scope.alerts.splice(index, 1);};
});</script>
</body>
</html>
uib-alert设置
uib-alert close="closeAlert($index)">
$scope.closeAlert = function(index) {$scope.alerts.splice(index, 1);};
2:"dismiss-on-timeout":设置超时时间后警告自动关闭,单位毫秒.这个属性需要关闭属性的存在.
<uib-alert close="closeAlert($index)" dismiss-on-timeout='1000'>
3:"template-url":指定模板地址
<uib-alert template-url="alert.html">A happy顶顶顶顶 alert!</uib-alert>
4:"type":success/danger/info/warning.设置警告类型
<uib-alert type="danger" >
按钮--Buttons (ui.bootstrap.buttons)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<style>.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp"><div ng-controller="ButtonsCtrl"><h4>Single toggle</h4><pre>{{singleModel}}</pre><button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">Single Toggle</button><h4>Checkbox</h4><pre>Model: {{checkModel}}</pre><pre>Results: {{checkResults}}</pre><div class="btn-group"><label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label><label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label><label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label></div><h4>Radio & Uncheckable Radio</h4><pre>{{radioModel || 'null'}}</pre><div class="btn-group"><label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label><label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label><label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label></div><div class="btn-group"><label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" uncheckable>Left</label><label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" uncheckable>Middle</label><label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" uib-uncheckable="uncheckable">Right</label></div><div><button class="btn btn-default" ng-click="uncheckable = !uncheckable">Toggle uncheckable</button></div>
</div></div><script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('ButtonsCtrl', function ($scope) {$scope.singleModel = 1;$scope.radioModel = 'Middle';$scope.checkModel = {left: false,middle: true,right: false};$scope.checkResults = [];$scope.$watchCollection('checkModel', function () {$scope.checkResults = [];angular.forEach($scope.checkModel, function (value, key) {if (value) {$scope.checkResults.push(key);}});});
});</script></body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<style>.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp"> <div ng-controller="ButtonsCtrl"><pre>Results: {{checkResults}}</pre><div class="btn-group"><label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label><label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label><label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label></div>
</div>
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('ButtonsCtrl', function ($scope) {$scope.checkModel = {left: false,middle: true,right: false};$scope.$watchCollection('checkModel', function () {$scope.checkResults = [];angular.forEach($scope.checkModel, function (value, key) {if (value) {$scope.checkResults.push(key);}});});
});
</script>
</body>
</html>
ui-btn-checkbox 设置
<label class="btn btn-primary" ng-model="true" uib-btn-checkbox >Left</label>
<button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0"> Single Toggle</button>
单选按钮例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<style>.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp"><pre>{{radioModel || 'null'}}</pre><div class="btn-group"><label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label><label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label><label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label></div>
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);</script></body>
</html>
uib-btn-radio 设置
<label class="btn btn-primary" ng-model="radioModel" >Left</label>
<label class="btn btn-primary" ng-model="radioModel">Middle</label>
<label class="btn btn-primary" ng-model="radioModel">Right</label>
2:"uib-btn-radio":给按钮设定值
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
折叠--Collapse (ui.bootstrap.collapse)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<style>
<span style="white-space:pre"> </span>.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp" >
<div ng-controller="CollapseDemoCtrl">
<span style="white-space:pre"> </span><button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<span style="white-space:pre"> </span><hr>
<span style="white-space:pre"> </span><div uib-collapse="isCollapsed">
<span style="white-space:pre"> </span><div class="well well-lg">Some content</div>
<span style="white-space:pre"> </span></div>
</div>
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
<span style="white-space:pre"> </span>app.controller('CollapseDemoCtrl', function ($scope) {$scope.isCollapsed = false;
});
</script>
</body>
</html>
1:"uib-collapse":true/false 默认为false设置折叠是否展开
<div uib-collapse="false">
Pagination (ui.bootstrap.pagination)
Tabs (ui.bootstrap.tabs)
Modal (ui.bootstrap.modal)
一:在angular中应用modal
$uibModal
使用方法:
直接注入到控制器中
.controller('name', function($scope,$uibModal) {
<span style="white-space:pre"> </span>$scope.withSelected = function(tem, con) {// 打开modal
<span style="white-space:pre"> </span>var selectNum = 0, selectAction = "";
<span style="white-space:pre"> </span>$scope.isok = false;
<span style="white-space:pre"> </span>$scope.iscancal = false;
<span style="white-space:pre"> </span>$scope.is_no_user = false;
<span style="white-space:pre"> </span>$scope.is_has_user = false;
<span style="white-space:pre"> </span>$scope.selectNum = 0;
<span style="white-space:pre"> </span>$('.user_check:checked').each(function() {
<span style="white-space:pre"> </span>selectNum = selectNum + 1;
<span style="white-space:pre"> </span>});
<span style="white-space:pre"> </span>if (selectNum == 0) {
<span style="white-space:pre"> </span>$scope.isok = true;
<span style="white-space:pre"> </span>$scope.is_no_user = true;
<span style="white-space:pre"> </span>} else {
<span style="white-space:pre"> </span>$scope.selectNum = selectNum;
<span style="white-space:pre"> </span>$scope.isok = true;
<span style="white-space:pre"> </span>$scope.iscancal = true;
<span style="white-space:pre"> </span>$scope.is_has_user = true;
<span style="white-space:pre"> </span>$scope.selectAction = selectAction;<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>$scope.enable=function(){
<span style="white-space:pre"> </span>alert(222)//方法
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>$scope.items = {//属性
<span style="white-space:pre"> </span>isok : $scope.isok,
<span style="white-space:pre"> </span>is_no_user : $scope.is_no_user,
<span style="white-space:pre"> </span>iscancal : $scope.iscancal,
<span style="white-space:pre"> </span>is_has_user : $scope.is_has_user,
<span style="white-space:pre"> </span>selectNum : $scope.selectNum,
<span style="white-space:pre"> </span>selectAction : $scope.fselectedtValue,
<span style="white-space:pre"> </span>fun:$scope.enable
<span style="white-space:pre"> </span>};
<span style="white-space:pre"> </span>var _this = this;
<span style="white-space:pre"> </span>var modalInstance = $uibModal.open({
<span style="white-space:pre"> </span>templateUrl : 'setting/modal/' + tem + '.html',
<span style="white-space:pre"> </span>controller : con,
<span style="white-space:pre"> </span>resolve : {//传递信息给model控制器
<span style="white-space:pre"> </span>items : function() {
<span style="white-space:pre"> </span>return $scope.items;
<span style="white-space:pre"> </span>},parent: function(){<span style="white-space:pre"> </span> return _this}
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>});<span style="white-space:pre"> </span>};
被调用者
.controller('ModalWithSelectCtrl', function($scope, $uibModalInstance, items,parent) {$scope.isok = items.isok;$scope.is_no_user = items.is_no_user;$scope.iscancal = items.iscancal;$scope.is_has_user = items.is_has_user;$scope.selectNum = items.selectNum;$scope.selectAction = items.selectAction;$scope.ok = function() {$uibModalInstance.close();parent.enable()//可以调用调用者的方法
};$scope.cancel = function() {$uibModalInstance.dismiss();};})
二:" $uibModal.open()",方法返回的是一个modal实例,下面是一些可用参数
1:animation:设置为false,关闭动画效果.默认"true".
2:appendTo:给modal设置一个容器.默认:"body".
3:backdrop:设置false关闭控件背景,默认为"true".
可能的值:
"true":有背景可以通过点击背景来关闭控件.
"false":没有背景.
"static":有背景,但点击背景不能关闭控件.
4:"backdropClass":给背景添加一个样式类.
5:"controller":为modal内容添加控制器.
6:"keyboard":设置modal是否可以通过按键"ESC"关闭,默认:"true".
7:"openedClass":modal打开时,为html body 添加样式类.
8:"size":设置modal的大小.可能的值:
"lg"
"sm"
9:"template":设置modal内容.
10:"templateUrl":通过引入html来设置modal的内容.
11:"windowClass":为modal添加样式类.
12:"windowTopClass":为当前modal添加样式类.
13:"resolve":调用控制器与modal控制器中传递值.
三:下面是uibModalInstance一些可用的对象.
1:"$uibModalInstance.dismiss();":取消modal
2:" $uibModalInstance.close();":关闭modal
ui-bootstrap-tpls 中文 现在还不全的啊~,组件太多了,有空就更新相关推荐
- 紫色管理系统UI bootstrap后台模板
简介: 紫色管理系统UI bootstrap后台模板 网盘下载地址: http://kekewangLuo.net/10Ck3J4nOm60 图片:
- angular Tabs (ui.bootstrap.tabs)
1:引入基础文件搭建环境 <pre name="code" class="html"><link rel="stylesheet&q ...
- linux看电影的软件,让Linux终端展示中文,还能让你在终端下看电影哟!
让Linux终端显示中文,还能让你在终端下看电影哟!! 1.编辑文件 $ sudo gedit /etc/initramfs-tools/modules 末尾加入 fbcon vesafb vga16 ...
- 精睿 ESS EAV 【中文商业特别版+纯净版-官方升级】【2.11更新3.0.685.0】
精睿 ESS & EAV [中文商业特别版+纯净版-官方升级][2.11更新3.0.685.0] ESET这一名称最早来源于埃及神话中的女神Isis.Isis又称作Aset或Eset,是地神G ...
- 计算机工程与科学期刊小木虫,《[小木虫emuch.net]北大中文核心期刊目录(2016版)--2016年4月12日更新》.pdf...
<[小木虫emuch.net]北大中文核心期刊目录(2016版)--2016年4月12日更新>.pdf 北大中文核心期刊目录(2011 年版) 第一编 哲学.社会学.政治.法律类 1.中国 ...
- 玩 Lin UI 搞小程序之:用步骤条组件做个时间简史
效果图: 先说引入: 考虑到小程序的大小限制,我是按需引的,操作如下: 直接通过git下载 Lin UI 源代码,并将 dist 目录(Lin-UI 组件库)拷贝到自己的项目中. git clone ...
- Bootstrap Table 中文API 详情
* *$('#table').bootstrapTable({}); *看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽 *最大可能结合尽可能多资料 ...
- bootstrap 日历中文_bootstrap日期选择器本地化-中文
最近用bootstrap做项目,所以就顺便搜了下用bootstrap写的日期选择器. 搜到的第一和第二条结果虽然是官网,但上面挂的还是基于bootstrap2的日期选择器(此时为北京时间2017-12 ...
- VS code 设置中文后还显示英文问题解决办法,亲测有效!
问题:在locale.json设置中文后,VS code菜单还显示英文 解决办法: 点开已安装的插件,搜索安装Chinese插件,如果之前已经安装这个插件就卸载重装 关闭再重新打开VS code编辑器 ...
最新文章
- 降低网络拥塞,追求美好体验——对话拍乐云首席科学家章琦
- mmap 内存映射详解
- 什么是Gut–Skin Axis
- javascript php 性能,JavaScript知识点总结之如何提高性能_javascript技巧
- 你说,辽宁输在哪了?
- Android Performance之工具篇(1)-systrace
- 民科微服务小程序怎么注册_民科微服务小程序app个人端认证下载-民科微服务小程序登录官方入口下载v2.4最新版_289手游网...
- 丢番图生平编程java_丢番图与麦乐鸡购买问题
- RTX3050、3050Ti相当于什么水平?
- java 微博sdk_Java基于新浪微博SDK实现发微博的功能
- 用MVP+OKHttp实现上传图片
- 「DaoCloud道客」全新 IT 交付:服务化 + 标准化 = 一致的自助式服务体验
- ipad iphone开发_如何更快地为iPhone或iPad充电
- 张长水主任当选2018年IEEE Fellow!中国大陆17位当选者清华占了5位 !(附完整名单)...
- 【pen200-lab】10.11.1.121
- Quartus||在Ubuntu内安装Quartus Prime Lite版20.1
- 如果你不想上班了,就问问自己这4个问题
- 当人脸识别技术遇上了口罩……
- RuntimeError: Unable to find a valid cuDNN algorithm to run convolution
- XVF3600-熙光技术
热门文章
- 小学生计算题软件产品设计
- 通用计算机含义,当今的计算机其通用的名称应该是通用数字计算机,请简单描述包含的三层含义? (8.0分)...
- u-boot中nand相关命令使用---- ubi, ubifsls, ubifsmount, ubifsumount
- Cadence Allegro 17.4学习记录开始06-PCB Editor 17.4快捷键的说明和中英文的切换和操作界面放大缩小设置
- C#使用拉依达准则(3σ准则)剔除异常数据(.Net剔除一组数据中的奇异值)
- 腾讯网页登陆的加密机制
- 共享打印机找不到网络路径的解决方法
- 华硕rt-ac85p更换新驱动(一)
- 解决黑苹果核显开机屏幕暗等3-5分钟才完全亮的问题
- zabbix 监控下载安装