diff options
| -rw-r--r-- | tests/visual/spinner.html | 50 | ||||
| -rw-r--r-- | ui/ui.spinner.js | 29 |
2 files changed, 72 insertions, 7 deletions
diff --git a/tests/visual/spinner.html b/tests/visual/spinner.html index b3002ec0f..f119d3d95 100644 --- a/tests/visual/spinner.html +++ b/tests/visual/spinner.html @@ -14,18 +14,19 @@ $(function(){ var opts = {
's1': {},
's2': {stepping: 0.25},
- 's3': {currency: '$'}
+ 's3': {currency: '$'},
+ 's4': {}
};
-
+
for (var n in opts)
$("#"+n).spinner(opts[n]);
-
+
$("button").click(function(e){
var ns = $(this).attr('id').match(/(s\d)\-(\w+)$/);
if (ns != null)
$('#'+ns[1]).spinner( (ns[2] == 'create') ? opts[ns[1]] : ns[2]);
});
-
+
});
</script>
@@ -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>
\ No newline at end of file diff --git a/ui/ui.spinner.js b/ui/ui.spinner.js index 18071b399..f55e0dcd9 100644 --- a/ui/ui.spinner.js +++ b/ui/ui.spinner.js @@ -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()
|