AngularJs的UI組件ui-Bootstrap分享(七)——Buttons和Dropdown
原文地址:http://www.cnblogs.com/pilixiami/p/5636218.html
在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>
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>
具體來說,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>
其中這兩個屬性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>
AngularJs的UI組件ui-Bootstrap分享(七)——Buttons和Dropdown