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

50
tests/visual/spinner.html
View File

@ -14,18 +14,19 @@ $(function(){
var opts = { var opts = {
's1': {}, 's1': {},
's2': {stepping: 0.25}, 's2': {stepping: 0.25},
's3': {currency: '$'} 's3': {currency: '$'},
's4': {}
}; };
for (var n in opts) for (var n in opts)
$("#"+n).spinner(opts[n]); $("#"+n).spinner(opts[n]);
$("button").click(function(e){ $("button").click(function(e){
var ns = $(this).attr('id').match(/(s\d)\-(\w+)$/); var ns = $(this).attr('id').match(/(s\d)\-(\w+)$/);
if (ns != null) if (ns != null)
$('#'+ns[1]).spinner( (ns[2] == 'create') ? opts[ns[1]] : ns[2]); $('#'+ns[1]).spinner( (ns[2] == 'create') ? opts[ns[1]] : ns[2]);
}); });
}); });
</script> </script>
@ -55,6 +56,7 @@ label {
.ui-spinner-disabled { .ui-spinner-disabled {
background: #F4F4F4; background: #F4F4F4;
color: #CCC;
} }
.ui-spinner-box { .ui-spinner-box {
@ -67,6 +69,12 @@ label {
padding: 0; padding: 0;
} }
ul.ui-spinner-box {
height: 1.2em;
margin-top: 0;
margin-bottom: 0;
}
.ui-spinner-up, .ui-spinner-up,
.ui-spinner-down { .ui-spinner-down {
width: 10%; width: 10%;
@ -139,5 +147,39 @@ label {
<hr /> <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> </body>
</html> </html>

29
ui/ui.spinner.js
View File

@ -14,6 +14,8 @@
$.widget('ui.spinner', { $.widget('ui.spinner', {
_init: function() { _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) // check for decimals in steppinng and set _decimals as internal (needs cleaning up)
this._decimals = 0; this._decimals = 0;
@ -22,6 +24,13 @@ $.widget('ui.spinner', {
this._decimals = s.slice(s.indexOf('.')+1, s.length).length; 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 //Initialize needed constants
var self = this; var self = this;
this.element this.element
@ -111,6 +120,11 @@ $.widget('ui.spinner', {
}) })
.end(); .end();
// data list: fix height of data list spinner
if (this.element.is('ul')) {
this.element.parent().css('height', this.element.outerHeight());
}
this.element this.element
.bind('keydown.spinner', function(e) { .bind('keydown.spinner', function(e) {
if(!self.counter) self.counter = 1; if(!self.counter) self.counter = 1;
@ -144,10 +158,10 @@ $.widget('ui.spinner', {
if(isNaN(this._getValue())) this._setValue(this.options.start); 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._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(); this._constrain();
if(this.counter) this.counter++; if(this.counter) this.counter++;
this._propagate('spin', e); this._propagate('spin', e);
}, },
_down: function(e) { _down: function(e) {
this._spin('down', e); this._spin('down', e);
@ -191,16 +205,24 @@ $.widget('ui.spinner', {
e.preventDefault(); e.preventDefault();
}, },
_getValue: function() { _getValue: function() {
return parseFloat(this.element[0].value.replace(/[^0-9\-\.]/g, '')); return parseFloat(this.element.val().replace(/[^0-9\-\.]/g, ''));
}, },
_setValue: function(newVal) { _setValue: function(newVal) {
if(isNaN(newVal)) newVal = this.options.start; if(isNaN(newVal)) newVal = this.options.start;
this.element[0].value = ( this.element.val(
this.options.currency ? this.options.currency ?
$.ui.spinner.format.currency(newVal, this.options.currency) : $.ui.spinner.format.currency(newVal, this.options.currency) :
$.ui.spinner.format.number(newVal, this._decimals) $.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: {}, plugins: {},
@ -223,6 +245,7 @@ $.widget('ui.spinner', {
this.element this.element
.removeClass('ui-spinner-box') .removeClass('ui-spinner-box')
.removeAttr('disabled') .removeAttr('disabled')
.removeAttr('autocomplete')
.removeData('spinner') .removeData('spinner')
.unbind('.spinner') .unbind('.spinner')
.siblings() .siblings()