library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

spinner: Included support for generic objects - currently only supports <ul>. See visual test (#s4) for example usage. Needs more work...

Browse Source
This commit is contained in:
Ca-Phun Ung 2008-08-26 07:28:14 +00:00
parent ee4334ab22
commit ea0ce45c97
2 changed files with 72 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
tests/visual/spinner.html
View File

@ -14,7 +14,8 @@ $(function(){
var opts = {
's1': {},
's2': {stepping: 0.25},
's3': {currency: '$'}
's3': {currency: '$'},
's4': {}
};
for (var n in opts)
@ -55,6 +56,7 @@ label {
.ui-spinner-disabled {
background: #F4F4F4;
color: #CCC;
}
.ui-spinner-box {
@ -67,6 +69,12 @@ label {
padding: 0;
}
ul.ui-spinner-box {
height: 1.2em;
margin-top: 0;
margin-bottom: 0;
}
.ui-spinner-up,
.ui-spinner-down {
width: 10%;
@ -139,5 +147,39 @@ label {
<hr />
<p><label for="s4">Data List: </label>
<ul id="s4">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
<li>item 16</li>
<li>item 17</li>
<li>item 18</li>
<li>item 19</li>
<li>item 20</li>
</ul>
<p>
<button id="s4-disable">disable</button>
<button id="s4-enable">enable</button>
<button id="s4-destroy">destroy</button>
<button id="s4-create">create</button>
</p>
<hr />
</body>
</html>

29
ui/ui.spinner.js
View File

@ -14,6 +14,8 @@
$.widget('ui.spinner', {
_init: function() {
// terminate initialization if spinner already applied to current element
if($.data(this.element[0], 'spinner')) return;
// check for decimals in steppinng and set _decimals as internal (needs cleaning up)
this._decimals = 0;
@ -22,6 +24,13 @@ $.widget('ui.spinner', {
this._decimals = s.slice(s.indexOf('.')+1, s.length).length;
}
// data list: set contraints to object length and step size
if (this.element.is('ul')) {
this.options.stepping = 1;
this.options.min = 0;
this.options.max = $('li', this.element).length-1;
}
//Initialize needed constants
var self = this;
this.element
@ -111,6 +120,11 @@ $.widget('ui.spinner', {
})
.end();
// data list: fix height of data list spinner
if (this.element.is('ul')) {
this.element.parent().css('height', this.element.outerHeight());
}
this.element
.bind('keydown.spinner', function(e) {
if(!self.counter) self.counter = 1;
@ -144,10 +158,10 @@ $.widget('ui.spinner', {
if(isNaN(this._getValue())) this._setValue(this.options.start);
this._setValue(this._getValue() + (d == 'up' ? 1:-1) * (this.options.incremental && this.counter > 100 ? (this.counter > 200 ? 100 : 10) : 1) * this.options.stepping);
this._animate(d);
this._constrain();
if(this.counter) this.counter++;
this._propagate('spin', e);
},
_down: function(e) {
this._spin('down', e);
@ -191,16 +205,24 @@ $.widget('ui.spinner', {
e.preventDefault();
},
_getValue: function() {
return parseFloat(this.element[0].value.replace(/[^0-9\-\.]/g, ''));
return parseFloat(this.element.val().replace(/[^0-9\-\.]/g, ''));
},
_setValue: function(newVal) {
if(isNaN(newVal)) newVal = this.options.start;
this.element[0].value = (
this.element.val(
this.options.currency ?
$.ui.spinner.format.currency(newVal, this.options.currency) :
$.ui.spinner.format.number(newVal, this._decimals)
);
},
_animate: function(d) {
if (this.element.is('ul') && ((d == 'up' && this._getValue() <= this.options.max) || (d == 'down' && this._getValue() >= this.options.min)) ) {
this.element.animate({marginTop: '-' + this._getValue() * this.element.outerHeight() }, {
duration: 'fast',
queue: false
});
}
},
plugins: {},
@ -223,6 +245,7 @@ $.widget('ui.spinner', {
this.element
.removeClass('ui-spinner-box')
.removeAttr('disabled')
.removeAttr('autocomplete')
.removeData('spinner')
.unbind('.spinner')
.siblings()