diff --git a/inputNumber.css b/inputNumber.css index 01cbede..5013675 100644 --- a/inputNumber.css +++ b/inputNumber.css @@ -5,8 +5,8 @@ margin-right: 10px; } -.ranged-input a.up, -.ranged-input a.down { +.ranged-input button.up, +.ranged-input button.down { right: 0; display: block; position: absolute; @@ -19,20 +19,20 @@ border: 1px solid #cccccc; } -.ranged-input a.up { +.ranged-input button.up { top: 0; } -.ranged-input a.up:hover { +.ranged-input button.up:hover { background-position: -20px 0; } -.ranged-input a.down { +.ranged-input button.down { background-position: 0 -9px; bottom: 0; } -.ranged-input a.down:hover { +.ranged-input button.down:hover { background-position: -20px -9px; } diff --git a/jquery.inputNumber.js b/jquery.inputNumber.js index 031d3bb..200d800 100644 --- a/jquery.inputNumber.js +++ b/jquery.inputNumber.js @@ -12,6 +12,30 @@ this.init(); }; + var initDisabledState = function($element, options) { + options = options || $element.data('inputNumber').options; + var value = parseInt($element.val()); + if (isNaN(value)) { + value = 0; + } + $element.parent().find('.' + options.upClass).attr('disabled', !isNaN(options.max) && value >= options.max); + $element.parent().find('.' + options.downClass).attr('disabled', !isNaN(options.min) && value <= options.min); + }; + + var filterValue = function($element) { + var value = $element.val(); + var options = $element.data('inputNumber').options; + if (!isNaN(options.min) && value < options.min) { + $element.val(options.min); + } + + if (!isNaN(options.max) && value > options.max) { + $element.val(options.max); + } + + initDisabledState($element); + }; + InputNumber.prototype = { el: null, // input element @@ -20,26 +44,37 @@ options: null, defaults: { - 'negative': true, - 'positive': true, 'wrapClass': 'ranged-input', 'upClass': 'up', 'upTitle': 'incrase', 'downClass': 'down', - 'downTitle': 'decrace' + 'downTitle': 'decrace', + 'min': NaN, + 'max': NaN }, init: function() { var opts = this.options; - + + var minValue = parseInt(this.el.min); + if (!isNaN(minValue)) { + this.options.min = minValue; + } + + var maxValue = parseInt(this.el.max); + if (!isNaN(maxValue)) { + this.options.max = maxValue; + } + this.$el.wrap($('
', {'class':opts.wrapClass})); this.$el.after( - $('', {'class':opts.upClass, 'title':opts.upTitle}), - $('', {'class':opts.downClass, 'title':opts.downTitle}) + $('