Skip to content

Commit 9c65c04

Browse files
author
Flying
committed
init
0 parents commit 9c65c04

18 files changed

+29145
-0
lines changed

‎README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# AngularJS UI Bootstrap Enhancements
2+
3+
#### The demos show some AngularJS UI Bootstrap progressive enhancements. Just Enjoy it -:)
4+
5+
> CSS Demo:
6+
7+
- Customize buttons: https://szriafan.github.io/angularjs-ui-bootstrap-enhancement/modal.html
8+
- Align modal center vertically: https://szriafan.github.io/angularjs-ui-bootstrap-enhancement/modal.html
9+
- Support dropdown submenu: https://szriafan.github.io/angularjs-ui-bootstrap-enhancement/dropdown-submenu.html
10+
11+
> Directive demo:
12+
13+
- Customize select: https://szriafan.github.io/angularjs-ui-bootstrap-enhancement/select.html

‎buttons.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!doctype html>
2+
<html ng-app="ui.bootstrap.demo">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5+
<script src="libs/angular.js"></script>
6+
<script src="libs/ui-bootstrap-tpls-0.12.0.js"></script>
7+
<script src="js/buttons.js"></script>
8+
<style>
9+
@font-face {
10+
font-family: "iconfont";
11+
src: url('fonts/iconfont.eot?t=1516219352931'); /* IE9*/
12+
src: url('fonts/iconfont.eot?t=1516219352931#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
13+
url('fonts/iconfont.ttf?t=1516219352931') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('fonts/iconfont.svg?t=1516219352931#iconfont') format('svg'); /* iOS 4.1- */
14+
}
15+
16+
17+
.checkbox, .radio {
18+
display: inline-block;
19+
vertical-align: middle;
20+
font-family: unset !important;
21+
font-size: 13px;
22+
font-weight: normal;
23+
-webkit-font-smoothing: unset;
24+
-moz-osx-font-smoothing: unset;
25+
}
26+
27+
.checkbox:before, .radio:before, .checkbox.active:before, .radio.active:before {
28+
vertical-align: middle;
29+
margin-right: 4px;
30+
font-family: "iconfont";
31+
font-size: 16px;
32+
font-style: normal;
33+
-webkit-font-smoothing: antialiased;
34+
-moz-osx-font-smoothing: grayscale;
35+
}
36+
37+
.checkbox.active:before {
38+
content: "\e864";
39+
}
40+
41+
.checkbox:before {
42+
content: "\e863";
43+
}
44+
45+
.radio.active:before {
46+
content: "\e862";
47+
}
48+
49+
.radio:before {
50+
content: "\e861";
51+
}
52+
53+
</style>
54+
</head>
55+
<body>
56+
57+
<div ng-controller="ButtonsCtrl">
58+
<h4>Single toggle</h4>
59+
<pre>{{singleModel}}</pre>
60+
<label class="checkbox" ng-model="singleModel" btn-checkbox
61+
btn-checkbox-true="1" btn-checkbox-false="0">自定义</label>
62+
<h4>Checkbox</h4>
63+
<pre>{{checkModel}}</pre>
64+
<div>
65+
<label class="checkbox" ng-model="checkModel.left" btn-checkbox>左</label>
66+
<label class="checkbox" ng-model="checkModel.middle" btn-checkbox>中</label>
67+
<label class="checkbox" ng-model="checkModel.right" btn-checkbox>右</label>
68+
</div>
69+
<h4>Radio &amp; Uncheckable Radio</h4>
70+
<pre>{{radioModel || 'null'}}</pre>
71+
<div>
72+
<label class="radio" ng-model="radioModel" btn-radio="'Left'">左</label>
73+
<label class="radio" ng-model="radioModel" btn-radio="'Middle'">中</label>
74+
<label class="radio" ng-model="radioModel" btn-radio="'Right'">右</label>
75+
</div>
76+
<div>
77+
<label class="radio" ng-model="radioModel" btn-radio="'Left'" uncheckable>左</label>
78+
<label class="radio" ng-model="radioModel" btn-radio="'Middle'" uncheckable>中</label>
79+
<label class="radio" ng-model="radioModel" btn-radio="'Right'" uncheckable>右</label>
80+
</div>
81+
</div>
82+
</body>
83+
</html>

‎components/riaSelect.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="btn-group select" dropdown>
2+
<button class="btn btn-default btn-sm dropdown-toggle"
3+
dropdown-toggle ng-disabled="disabled">
4+
{{ selected[labelField] ? selected[labelField] : selected}}
5+
<span class="caret"></span>
6+
</button>
7+
8+
<ul class="dropdown-menu" role="menu">
9+
<li ng-repeat="item in options">
10+
<a ng-click="select(item)">
11+
{{item[labelField] ? item[labelField] : item}}
12+
</a>
13+
</li>
14+
</ul>
15+
</div>

‎components/riaSelect.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/**
2+
* 下拉框指令（统一外观）
3+
* options：数据源(简单数组或关联数组)
4+
* selected：当前选择项
5+
* labelField：label对应的数据源字段，默认为lable
6+
* valueField：value对应的数据源字段，默认为value
7+
* disabled：下拉框是否可用，默认为false
8+
*/
9+
10+
angular
11+
.module('directives', [])
12+
.directive('riaSelect', function() {
13+
return {
14+
restrict: 'EA',
15+
templateUrl: 'components/riaSelect.html',
16+
scope: {
17+
options: '=',
18+
selected: '=',
19+
labelField: '@',
20+
valueField: '@',
21+
disabled: '@'
22+
},
23+
replace: true,
24+
link: function(scope, element, attr) {
25+
if (attr.labelField == undefined) {
26+
attr.labelField = 'label';
27+
}
28+
if (attr.valueField == undefined) {
29+
attr.valueField = 'value';
30+
}
31+
32+
if (element.css('width') != undefined) {
33+
var w = element.css('width');
34+
if (w != undefined) {
35+
var btn = element.find('button');
36+
btn.css({'width': '100%', 'text-align': 'left'});
37+
btn.find('span').css({'position': 'absolute', 'right': '4px', 'top': '12px'});
38+
btn.next().css('min-width', '100%');
39+
}
40+
}
41+
42+
scope.select = function(item) {
43+
scope.selected = item;
44+
};
45+
}
46+
}
47+
});

0 commit comments

Comments
 (0)