提交 | 用户 | 时间
|
58d006
|
1 |
/** |
A |
2 |
<b>Spinner</b>. A wrapper for FuelUX spinner element. |
|
3 |
It's just a wrapper so you still need to include FuelUX spinner script first. |
|
4 |
*/ |
|
5 |
(function($ , undefined) { |
|
6 |
//a wrapper for fuelux spinner |
|
7 |
function Ace_Spinner(element , _options) { |
|
8 |
var attrib_values = ace.helper.getAttrSettings(element, $.fn.ace_spinner.defaults); |
|
9 |
var options = $.extend({}, $.fn.ace_spinner.defaults, _options, attrib_values); |
|
10 |
|
|
11 |
var max = options.max |
|
12 |
max = (''+max).length |
|
13 |
var width = parseInt(Math.max((max * 20 + 40) , 90)) |
|
14 |
|
|
15 |
var $element = $(element); |
|
16 |
|
|
17 |
var btn_class = 'btn-sm';//default |
|
18 |
var sizing = 2; |
|
19 |
if($element.hasClass('input-sm')) { |
|
20 |
btn_class = 'btn-xs'; |
|
21 |
sizing = 1; |
|
22 |
} |
|
23 |
else if($element.hasClass('input-lg')) { |
|
24 |
btn_class = 'btn-lg'; |
|
25 |
sizing = 3; |
|
26 |
} |
|
27 |
|
|
28 |
if(sizing == 2) width += 25; |
|
29 |
else if(sizing == 3) width += 50; |
|
30 |
|
|
31 |
$element.addClass('spinbox-input form-control text-center').wrap('<div class="ace-spinner middle">') |
|
32 |
|
|
33 |
var $parent_div = $element.closest('.ace-spinner').spinbox(options).wrapInner("<div class='input-group'></div>") |
|
34 |
var $spinner = $parent_div.data('fu.spinbox'); |
|
35 |
|
|
36 |
if(options.on_sides) |
|
37 |
{ |
|
38 |
$element |
|
39 |
.before('<div class="spinbox-buttons input-group-btn">\ |
|
40 |
<button type="button" class="btn spinbox-down '+btn_class+' '+options.btn_down_class+'">\ |
|
41 |
<i class="icon-only '+ ace.vars['icon'] + options.icon_down+'"></i>\ |
|
42 |
</button>\ |
|
43 |
</div>') |
|
44 |
.after('<div class="spinbox-buttons input-group-btn">\ |
|
45 |
<button type="button" class="btn spinbox-up '+btn_class+' '+options.btn_up_class+'">\ |
|
46 |
<i class="icon-only '+ ace.vars['icon'] + options.icon_up+'"></i>\ |
|
47 |
</button>\ |
|
48 |
</div>'); |
|
49 |
|
|
50 |
$parent_div.addClass('touch-spinner') |
|
51 |
$parent_div.css('width' , width+'px') |
|
52 |
} |
|
53 |
else { |
|
54 |
$element |
|
55 |
.after('<div class="spinbox-buttons input-group-btn">\ |
|
56 |
<button type="button" class="btn spinbox-up '+btn_class+' '+options.btn_up_class+'">\ |
|
57 |
<i class="icon-only '+ ace.vars['icon'] + options.icon_up+'"></i>\ |
|
58 |
</button>\ |
|
59 |
<button type="button" class="btn spinbox-down '+btn_class+' '+options.btn_down_class+'">\ |
|
60 |
<i class="icon-only '+ ace.vars['icon'] + options.icon_down+'"></i>\ |
|
61 |
</button>\ |
|
62 |
</div>') |
|
63 |
|
|
64 |
if(ace.vars['touch'] || options.touch_spinner) { |
|
65 |
$parent_div.addClass('touch-spinner') |
|
66 |
$parent_div.css('width' , width+'px') |
|
67 |
} |
|
68 |
else { |
|
69 |
$element.next().addClass('btn-group-vertical'); |
|
70 |
$parent_div.css('width' , width+'px') |
|
71 |
} |
|
72 |
} |
|
73 |
|
|
74 |
$parent_div.on('changed', function(){ |
|
75 |
$element.trigger('change')//trigger the input's change event |
|
76 |
}); |
|
77 |
|
|
78 |
this._call = function(name, arg) { |
|
79 |
$spinner[name](arg); |
|
80 |
} |
|
81 |
} |
|
82 |
|
|
83 |
|
|
84 |
$.fn.ace_spinner = function(option, value) { |
|
85 |
var retval; |
|
86 |
|
|
87 |
var $set = this.each(function() { |
|
88 |
var $this = $(this); |
|
89 |
var data = $this.data('ace_spinner'); |
|
90 |
var options = typeof option === 'object' && option; |
|
91 |
|
|
92 |
if (!data) { |
|
93 |
options = $.extend({}, $.fn.ace_spinner.defaults, option); |
|
94 |
$this.data('ace_spinner', (data = new Ace_Spinner(this, options))); |
|
95 |
} |
|
96 |
if (typeof option === 'string') retval = data._call(option, value); |
|
97 |
}); |
|
98 |
|
|
99 |
return (retval === undefined) ? $set : retval; |
|
100 |
} |
|
101 |
|
|
102 |
$.fn.ace_spinner.defaults = { |
|
103 |
'icon_up' : 'fa fa-chevron-up', |
|
104 |
'icon_down': 'fa fa-chevron-down', |
|
105 |
|
|
106 |
'on_sides': false, |
|
107 |
'btn_up_class': '', |
|
108 |
'btn_down_class' : '', |
|
109 |
|
|
110 |
'max' : 999, |
|
111 |
'touch_spinner': false |
|
112 |
} |
|
113 |
|
|
114 |
|
|
115 |
})(window.jQuery); |