liumang361

导航

AngularJs的UI组件ui-Bootstrap分享(七)——Buttons和Dropdown

在ui-Bootstrap中,Buttons控件和Dropdown控件与form表单中的按钮和下拉框名字很像,但实际上这两个控件有新的含义。

先说Buttons,它是一组按钮,用来实现form表单中的单选框和复选框的功能,样式上可以自定义,功能也可以扩展,可以替代单选框和复选框。

 1 <!DOCTYPE html>
 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <link href="/Content/bootstrap.css" rel="stylesheet" />
 6     <title></title>
 7 
 8     <script src="/Scripts/angular.js"></script>
 9     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10     <script>
11         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ButtonsCtrl', function ($scope) {
12             $scope.singleModel = 1;
13 
14             $scope.radioModel = 'Middle';
15 
16             $scope.checkModel = {
17                 left: false,
18                 middle: true,
19                 right: false
20             };
21 
22             $scope.checkResults = [];
23 
24             $scope.$watchCollection('checkModel', function () {
25                 $scope.checkResults = [];
26                 angular.forEach($scope.checkModel, function (value, key) {
27                     if (value) {
28                         $scope.checkResults.push(key);
29                     }
30                 });
31             });
32         });
33     </script>
34 
35 </head>
36 <body>
37     <div ng-controller="ButtonsCtrl">
38         <h4>复选框</h4>
39         <pre>Results: {{checkResults}}</pre>
40         <div class="btn-group">
41             <label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>
42             <label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>
43             <label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>
44         </div>
45         <h4>单选框</h4>
46         <pre>{{radioModel || 'null'}}</pre>
47         <div class="btn-group">
48             <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
49             <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>
50             <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>
51         </div>
52     </div>
53 </body>
54 </html>
View Code

buttons控件使用uib-btn-checkbox和uib-btn-radio指令,这两个指令可以加在<input >上,也可以加在<button>上,甚至可以加在<lable>上。

对于复选框,可以设置btn-checkbox-false和btn-checkbox-true表示复选框未选中和选中时的值(默认是false和true)。

对于单选框,一组单选框需要绑定同一个ng-model,并且使用uib-btn-radio指定单选框选中时的值。

单选框还有两个可选的属性:

属性名

默认值

备注

uncheckable

 

增加这个属性表示单选框选中状态下再次点击时,单选框变为未选中(单选框变成复选框了)

uib-uncheckable

null

为true时效果等于增加uncheckable属性

再说Dropdown,从外观上看似乎是表单控件<select>

但是实际上这个控件的主要功能是做导航菜单,因此在模板中使用button和ul元素的组合来表现菜单项。

 1 <!DOCTYPE html>
 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <link href="/Content/bootstrap.css" rel="stylesheet" />
 6     <title></title>
 7 
 8     <script src="/Scripts/angular.js"></script>
 9     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10     <script>
11         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('DropdownCtrl', function ($scope) {
12 
13         });
14     </script>
15 
16 </head>
17 <body>
18     <div ng-controller="DropdownCtrl">
19         <div class="btn-group" uib-dropdown ng-init="dropdownItems=['第一项','第二项','第三项']">
20             <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle >
21                 请选择 <span class="caret"></span>
22             </button>
23             <ul class="dropdown-menu" uib-dropdown-menu  >
24                 <li ng-repeat="item in dropdownItems">
25                     <a href="#">{{item}}</a>
26                 </li>
27                 <li class="divider"></li>
28                 <li ><a href="#">其他</a></li>
29             </ul>
30         </div>
31     </div>
32 </body>
33 </html>
View Code

具体来说,dropdown包括三部分:

1. uib-dropdown 表示当前元素是一个菜单

2. uib-dropdown-toggle 一个展开/收起菜单的按钮。这是可选的部分。

3. uib-dropdown-menu 表示具体的菜单项

uib-dropdown的属性有:

 

属性名

默认值

备注

auto-close

always

可设置的值有三个:

1 always,点击菜单后自动关闭

2 disabled,不自动关闭,使用is-open手动控制。

3 outsideClick,点击Dropdown外部的元素时关闭。

dropdown-append-to

null

将菜单项(ul部分)放在其他DOM元素中,而不是包含在uib-dropdown所在的元素中

dropdown-append-to-body

false

将菜单项(ul部分)放在body末尾,而不是包含在uib-dropdown所在的元素中

is-open

false

菜单是否展开。uib-dropdown-toggle所在的元素点击时会更改这个值。

keyboard-nav

false

是否允许方向键选择菜单

on-toggle

 

菜单展开或收起时触发的方法

uib-dropdown-menu可以使用template-url来自定义菜单项,比如这样:

 1 <!DOCTYPE html>
 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <link href="/Content/bootstrap.css" rel="stylesheet" />
 6     <title></title>
 7 
 8     <script src="/Scripts/angular.js"></script>
 9     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10     <script>
11         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('DropdownCtrl', function ($scope) {
12 
13         });
14     </script>
15 
16 </head>
17 <body>
18     <div ng-controller="DropdownCtrl">
19         <div class="btn-group" uib-dropdown ng-init="dropdownItems=['第一项','第二项','第三项']" >
20             <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
21                 请选择 <span class="caret"></span>
22             </button>
23             <ul class="dropdown-menu" uib-dropdown-menu template-url="dropdown.html">
24             </ul>
25         </div>
26         <script type="text/ng-template" id="dropdown.html">
27             <ul class="dropdown-menu" uib-dropdown-menu>
28                 <li ng-repeat="item in dropdownItems">
29                     <a href="#">{{item}}</a>
30                 </li>
31                 <li class="divider"></li>
32                 <li><a href="#">其他</a></li>
33             </ul>
34         </script>
35     </div>
36 </body>
37 </html>
View Code

 其中这两个属性dropdown-append-to和dropdown-append-to-body可以将菜单项放在其他地方,这样设置其样式时会非常方便。这个用法和Datepicker Popup控件的datepicker-append-to-body属性是一样的。但是dropdown-append-to应该怎样设置才可以指定菜单项迁移到的元素,还没有找到正确的方法,这里存疑。

另外,Dropdown还可以更改全局配置uibDropdownConfig,uibDropdownConfig的属性有:

属性名

默认值

备注

appendToOpenClass

uib-dropdown-open

当菜单展开并且移至其他dom元素中时所添加的类名

openClass

open

当菜单展开时添加的类名

更改全局配置的代码:

 1     <script>
 2         angular.module('ui.bootstrap.demo', ['ui.bootstrap'])
 3             .config(['uibDropdownConfig', function (uibDropdownConfig) {
 4                 uibDropdownConfig.appendToOpenClass = 'class1';
 5                 uibDropdownConfig.openClass = 'class2';
 6             }])
 7             .controller('DropdownCtrl', function ($scope) {
 8 
 9         });
10     </script>
View Code

 


目录:

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


posted on 2016-07-05 12:47  pilixiami  阅读(13168)  评论(1编辑  收藏  举报