mirror of
https://github.com/jquery/jquery-ui.git
synced 2025-01-07 20:34:24 +00:00
Porting old spinner implementation to 1.8, dropping some baggage.
This commit is contained in:
jzaefferer
parent
19f9c3a559
commit
f7d8a1ba57
65
demos/spinner/default.html
Normal file
65
demos/spinner/default.html
Normal file
@ -0,0 +1,65 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Spinner - Default functionality</title>
|
||||
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.4.3.js"></script>
|
||||
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.2.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#spinner").spinner();
|
||||
|
||||
$("#disable").toggle(function() {
|
||||
$("#spinner").spinner("disable");
|
||||
}, function() {
|
||||
$("#spinner").spinner("enable");
|
||||
});
|
||||
$("#destroy").toggle(function() {
|
||||
$("#spinner").spinner("destroy");
|
||||
}, function() {
|
||||
$("#spinner").spinner();
|
||||
});
|
||||
$("#getvalue").click(function() {
|
||||
alert($("#spinner").spinner("value"));
|
||||
});
|
||||
$("#setvalue").click(function() {
|
||||
$("#spinner").spinner("value", 5);
|
||||
});
|
||||
|
||||
$("button").button();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p><label for="spinner">Select a value:</label>
|
||||
<input id="spinner" name="value" /></p>
|
||||
|
||||
<p>
|
||||
<button id="disable">Toggle disable/enable</button>
|
||||
<button id="destroy">Toggle widget</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button id="getvalue">Get value</button>
|
||||
<button id="setvalue">Set value to 5</button>
|
||||
</p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
Default spinner.
|
||||
</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
74
demos/spinner/donation.html
Normal file
74
demos/spinner/donation.html
Normal file
@ -0,0 +1,74 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Spinner - Default functionality</title>
|
||||
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.4.3.js"></script>
|
||||
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.2.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
|
||||
var opts = {
|
||||
's1': { currency: '$' },
|
||||
's2': { currency: '€' },
|
||||
's3': { currency: '¥' },
|
||||
's4': { currency: '$', groupSeparator: ' ', radixPoint: '.' },
|
||||
's5': { currency: 'Fr ', groupSeparator: "'", radixPoint: '.' },
|
||||
's6': { currency: 'RUB', groupSeparator: ".", radixPoint: ',' }
|
||||
};
|
||||
|
||||
var currency = $("#currency").change(function() {
|
||||
var val = $(this).val();
|
||||
$("#amount")
|
||||
.spinner("option", "currency", opts[val].currency)
|
||||
.spinner("option", "groupSeparator", opts[val].groupSeparator ? opts[val].groupSeparator : ',')
|
||||
.spinner("option", "radixPoint", opts[val].radixPoint ? opts[val].radixPoint : '.')
|
||||
.blur();
|
||||
});
|
||||
$("#amount").spinner({
|
||||
currency: opts[currency.val()].currency,
|
||||
min: 5,
|
||||
max: 2500,
|
||||
step: 25,
|
||||
start: 1000,
|
||||
width: '10em'
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>
|
||||
<label for="currency">Currency</label>
|
||||
<select id="currency" name="currency">
|
||||
<option value="s1">US $</option>
|
||||
<option value="s2">EUR €</option>
|
||||
<option value="s3">YEN ¥</option>
|
||||
<option value="s4">Australian $</option>
|
||||
<option value="s5">Swiss Franc Fr</option>
|
||||
<option value="s6">Russian Ruble RUB</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<label for="amount">Select the amount to donate:</label>
|
||||
<input id="amount" name="amount" value="5" />
|
||||
</p>
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
Example of a donation form, with currency selection and amout spinner.
|
||||
</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
37
demos/spinner/hexadecimal.html
Normal file
37
demos/spinner/hexadecimal.html
Normal file
@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Spinner - Hexadecimal</title>
|
||||
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.4.3.js"></script>
|
||||
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.2.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#hexadecimal").spinner({radix: 16, padLength: 6, precision: 2, step: '0.01'});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>
|
||||
<label for="hexadecimal">Hexadecimal spinner:</label>
|
||||
<input id="hexadecimal" name="hexadecimal" value="0" />
|
||||
</p>
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
Example of a hexadecimal spinner.
|
||||
</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
20
demos/spinner/index.html
Normal file
20
demos/spinner/index.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Spinner Demos</title>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="demos-nav">
|
||||
<h4>Examples</h4>
|
||||
<ul>
|
||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="donation.html">Donation</a></li>
|
||||
<li><a href="hexadecimal.html">Hexadecimal</a></li>
|
||||
<li><a href="latlong.html">Map</a></li>
|
||||
<li><a href="mousewheel-disabled.html">Mousewheel Disabled</a></li>
|
||||
<li><a href="rtl.html">RTL</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
60
demos/spinner/latlong.html
Normal file
60
demos/spinner/latlong.html
Normal file
@ -0,0 +1,60 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Spinner - Map</title>
|
||||
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
||||
<script type="text/javascript" src="../../jquery-1.4.3.js"></script>
|
||||
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.2.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
function latlong() {
|
||||
return new google.maps.LatLng($("#lat").val(),$("#lng").val());
|
||||
}
|
||||
function position() {
|
||||
map.setCenter(latlong());
|
||||
}
|
||||
$("#lat, #lng").spinner({
|
||||
precision: 6,
|
||||
change: position
|
||||
});
|
||||
|
||||
var map = new google.maps.Map($("#map")[0], {
|
||||
zoom: 8,
|
||||
center: latlong(),
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
#map { width:500px; height:500px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<label for="lat">Latitude</label>
|
||||
<input id="lat" name="lat" value="44.797916" />
|
||||
<br/>
|
||||
<label for="lng">Longitude</label>
|
||||
<input id="lng" name="lng" value="-93.278046" />
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
Google Maps integration, using spinners to change latidude and longitude.
|
||||
</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
36
demos/spinner/rtl.html
Normal file
36
demos/spinner/rtl.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Spinner - Default functionality</title>
|
||||
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.4.3.js"></script>
|
||||
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.2.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#s1").spinner({dir: 'rtl'});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p><label for="s1">Select a value:</label>
|
||||
<input id="s1" name="value" /></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
Default spinner.
|
||||
</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
60
external/jquery.mousewheel-3.0.2.js
vendored
Normal file
60
external/jquery.mousewheel-3.0.2.js
vendored
Normal file
@ -0,0 +1,60 @@
|
||||
/*! Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
|
||||
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
|
||||
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
|
||||
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
|
||||
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
|
||||
*
|
||||
* Version: 3.0.2
|
||||
*
|
||||
* Requires: 1.2.2+
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
var types = ['DOMMouseScroll', 'mousewheel'];
|
||||
|
||||
$.event.special.mousewheel = {
|
||||
setup: function() {
|
||||
if ( this.addEventListener )
|
||||
for ( var i=types.length; i; )
|
||||
this.addEventListener( types[--i], handler, false );
|
||||
else
|
||||
this.onmousewheel = handler;
|
||||
},
|
||||
|
||||
teardown: function() {
|
||||
if ( this.removeEventListener )
|
||||
for ( var i=types.length; i; )
|
||||
this.removeEventListener( types[--i], handler, false );
|
||||
else
|
||||
this.onmousewheel = null;
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.extend({
|
||||
mousewheel: function(fn) {
|
||||
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
|
||||
},
|
||||
|
||||
unmousewheel: function(fn) {
|
||||
return this.unbind("mousewheel", fn);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function handler(event) {
|
||||
var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
|
||||
|
||||
event = $.event.fix(event || window.event);
|
||||
event.type = "mousewheel";
|
||||
|
||||
if ( event.wheelDelta ) delta = event.wheelDelta/120;
|
||||
if ( event.detail ) delta = -event.detail/3;
|
||||
|
||||
// Add events and delta to the front of the arguments
|
||||
args.unshift(event, delta);
|
||||
|
||||
return $.event.handle.apply(this, args);
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
1
themes/base/jquery.ui.base.css
vendored
1
themes/base/jquery.ui.base.css
vendored
@ -18,4 +18,5 @@
|
||||
@import url("jquery.ui.resizable.css");
|
||||
@import url("jquery.ui.selectable.css");
|
||||
@import url("jquery.ui.slider.css");
|
||||
@import url("jquery.ui.spinner.css");
|
||||
@import url("jquery.ui.tabs.css");
|
||||
|
||||
24
themes/base/jquery.ui.spinner.css
vendored
Normal file
24
themes/base/jquery.ui.spinner.css
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
/* Spinner
|
||||
----------------------------------*/
|
||||
.ui-spinner { position:relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; height: 1.8em; }
|
||||
.ui-spinner-input { border: none; background: none; padding: 0; margin: .2em 0; vertical-align: middle; }
|
||||
.ui-spinner-button { width: 16px; height: 50%; font-size: .5em; padding: 0; margin: 0; z-index: 100; text-align: center; vertical-align: middle; position: absolute; cursor: default; display: block; overflow: hidden; }
|
||||
.ui-spinner a.ui-spinner-button { border-top: none; border-bottom: none; } /* more specificity required here to overide default borders */
|
||||
.ui-spinner .ui-icon { position: absolute; margin-top: -8px; top: 50%; left: 0; } /* vertical centre icon */
|
||||
.ui-spinner-up { top: 0; }
|
||||
.ui-spinner-down { bottom: 0; }
|
||||
|
||||
/* ltr (default) */
|
||||
.ui-spinner-ltr { direction: ltr; }
|
||||
.ui-spinner-ltr .ui-spinner-input { float: left; margin-left: .4em; margin-right: 22px; }
|
||||
.ui-spinner-ltr .ui-spinner-button { right: 0; }
|
||||
.ui-spinner-ltr a.ui-spinner-button { border-right: none; }
|
||||
|
||||
/* rtl */
|
||||
.ui-spinner-rtl { direction: rtl; }
|
||||
.ui-spinner-rtl .ui-spinner-input { float: right; margin-left: 22px; margin-right: .4em; }
|
||||
.ui-spinner-rtl .ui-spinner-button { left: 0; }
|
||||
.ui-spinner-rtl a.ui-spinner-button { border-left: none; }
|
||||
|
||||
/* TR overrides */
|
||||
div.ui-spinner { background: none; }
|
||||
505
ui/jquery.ui.spinner.js
vendored
Normal file
505
ui/jquery.ui.spinner.js
vendored
Normal file
@ -0,0 +1,505 @@
|
||||
/*
|
||||
* jQuery UI Spinner @VERSION
|
||||
*
|
||||
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
||||
* and GPL (GPL-LICENSE.txt) licenses.
|
||||
*
|
||||
* http://docs.jquery.com/UI/Spinner
|
||||
*
|
||||
* Depends:
|
||||
* jquery.ui.core.js
|
||||
* jquery.ui.widget.js
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
// shortcut constants
|
||||
var hover = 'ui-state-hover',
|
||||
active = 'ui-state-active',
|
||||
namespace = '.spinner',
|
||||
buttonRegex = /hide|auto|fast|slow|(\d+)/,
|
||||
uiSpinnerClasses = 'ui-spinner ui-state-default ui-widget ui-widget-content ui-corner-all ';
|
||||
|
||||
$.widget('ui.spinner', {
|
||||
options: {
|
||||
currency: false,
|
||||
dir: 'ltr',
|
||||
groupSeparator: '',
|
||||
incremental: true,
|
||||
max: null,
|
||||
min: null,
|
||||
mouseWheel: true,
|
||||
padding: 0,
|
||||
page: 5,
|
||||
precision: 0,
|
||||
radix: 10,
|
||||
radixPoint: '.',
|
||||
spinnerClass: null,
|
||||
step: null,
|
||||
value: 0,
|
||||
width: false
|
||||
},
|
||||
|
||||
_create: function() {
|
||||
this._initOptions();
|
||||
|
||||
this.value(this._parse(this.element.val() || this.options.value));
|
||||
|
||||
this._draw();
|
||||
|
||||
this._mousewheel();
|
||||
|
||||
this._aria();
|
||||
},
|
||||
_initOptions: function() {
|
||||
var self = this,
|
||||
options = self.options;
|
||||
|
||||
// check for precision in stepping and set _precision as internal
|
||||
var precision = parseInt(options.precision, 10);
|
||||
|
||||
if (self._step().toString().indexOf('.') != -1 && precision === 0) {
|
||||
var s = self._step().toString();
|
||||
precision = s.slice(s.indexOf('.')+1, s.length).length;
|
||||
}
|
||||
|
||||
// set currency options
|
||||
if (options.currency) {
|
||||
precision = 2;
|
||||
options.radix = 10;
|
||||
options.groupSeparator = options.groupSeparator || (options.radixPoint === ',' ? '' : ',');
|
||||
}
|
||||
options.precision = precision;
|
||||
},
|
||||
_draw: function() {
|
||||
var self = this,
|
||||
options = self.options;
|
||||
|
||||
var uiSpinner = self.element
|
||||
.addClass('ui-spinner-input')
|
||||
.attr('autocomplete', 'off')
|
||||
.wrap(self._uiSpinnerHtml())
|
||||
.parent()
|
||||
// add buttons
|
||||
.append(self._buttonHtml())
|
||||
// add behaviours
|
||||
.hover(function() {
|
||||
if (!options.disabled) {
|
||||
$(this).addClass(hover);
|
||||
}
|
||||
self.hovered = true;
|
||||
}, function() {
|
||||
$(this).removeClass(hover);
|
||||
self.hovered = false;
|
||||
});
|
||||
|
||||
// TODO: need a better way to exclude IE8 without resorting to $.browser.version
|
||||
// fix inline-block issues for IE. Since IE8 supports inline-block we need to exclude it.
|
||||
if (!$.support.opacity && uiSpinner.css('display') == 'inline-block' && $.browser.version < 8) {
|
||||
uiSpinner.css('display', 'inline');
|
||||
}
|
||||
|
||||
this.element
|
||||
.bind('keydown'+namespace, function(event) {
|
||||
return self._start(event) ? self._keydown(event) : false;
|
||||
})
|
||||
.bind('keyup'+namespace, function(event) {
|
||||
if (self.spinning) {
|
||||
self._stop(event);
|
||||
self._change(event);
|
||||
}
|
||||
})
|
||||
.bind('focus'+namespace, function() {
|
||||
uiSpinner.addClass(active);
|
||||
self.focused = true;
|
||||
})
|
||||
.bind('blur'+namespace, function(event) {
|
||||
self._value(self.element.val());
|
||||
if (!self.hovered) {
|
||||
uiSpinner.removeClass(active);
|
||||
}
|
||||
self.focused = false;
|
||||
});
|
||||
|
||||
// force width if passed through options
|
||||
if (options.width) {
|
||||
this.element.width(options.width);
|
||||
}
|
||||
|
||||
// disable spinner if element was already disabled
|
||||
if (options.disabled) {
|
||||
this.disable();
|
||||
}
|
||||
|
||||
// button bindings
|
||||
this.buttons = uiSpinner.find('.ui-spinner-button')
|
||||
.bind('mousedown', function(event) {
|
||||
if (self._start(event) === false) {
|
||||
return false;
|
||||
}
|
||||
self._repeat(null, $(this).hasClass('ui-spinner-up') ? 1 : -1, event);
|
||||
|
||||
if (!self.options.disabled) {
|
||||
$(this).addClass(active);
|
||||
uiSpinner.addClass(active);
|
||||
}
|
||||
})
|
||||
.bind('mouseup', function(event) {
|
||||
if (self.counter == 1) {
|
||||
self._spin(($(this).hasClass('ui-spinner-up') ? 1 : -1) * self._step(), event);
|
||||
}
|
||||
if (self.spinning) {
|
||||
self._stop(event);
|
||||
self._change(event);
|
||||
}
|
||||
$(this).removeClass(active);
|
||||
})
|
||||
.hover(function() {
|
||||
if (!self.options.disabled) {
|
||||
$(this).addClass(hover);
|
||||
}
|
||||
}, function(event) {
|
||||
$(this).removeClass(active + ' ' + hover);
|
||||
if (self.timer && self.spinning) {
|
||||
self._stop(event);
|
||||
self._change(event);
|
||||
}
|
||||
});
|
||||
|
||||
self.uiSpinner = uiSpinner;
|
||||
},
|
||||
_uiSpinnerHtml: function() {
|
||||
return '<div role="spinbutton" class="' + uiSpinnerClasses +
|
||||
(this.options.spinnerClass || '') +
|
||||
' ui-spinner-' + this.options.dir +
|
||||
'"></div>';
|
||||
},
|
||||
_buttonHtml: function() {
|
||||
return '<a class="ui-spinner-button ui-spinner-up ui-state-default ui-corner-t' + this.options.dir.substr(-1,1) +
|
||||
'"><span class="ui-icon ui-icon-triangle-1-n">▲</span></a>' +
|
||||
'<a class="ui-spinner-button ui-spinner-down ui-state-default ui-corner-b' + this.options.dir.substr(-1,1) +
|
||||
'"><span class="ui-icon ui-icon-triangle-1-s">▼</span></a>';
|
||||
},
|
||||
_start: function(event) {
|
||||
if (!this.spinning && this._trigger('start', event, { value: this.value()}) !== false) {
|
||||
if (!this.counter) {
|
||||
this.counter = 1;
|
||||
}
|
||||
this.spinning = true;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
_spin: function(step, event) {
|
||||
if (this.options.disabled) {
|
||||
return;
|
||||
}
|
||||
if (!this.counter) {
|
||||
this.counter = 1;
|
||||
}
|
||||
|
||||
var newVal = this._value() + step * (this.options.incremental && this.counter > 100
|
||||
? this.counter > 200
|
||||
? 100
|
||||
: 10
|
||||
: 1);
|
||||
|
||||
// cancelable
|
||||
if (this._trigger('spin', event, { value: newVal }) !== false) {
|
||||
this._value(newVal);
|
||||
this.counter++;
|
||||
}
|
||||
},
|
||||
_stop: function(event) {
|
||||
this.counter = 0;
|
||||
if (this.timer) {
|
||||
window.clearInterval(this.timer);
|
||||
}
|
||||
this.element[0].focus();
|
||||
this.spinning = false;
|
||||
this._trigger('stop', event);
|
||||
},
|
||||
_change: function(event) {
|
||||
this._trigger('change', event);
|
||||
},
|
||||
_repeat: function(i, steps, event) {
|
||||
var self = this;
|
||||
i = i || 100;
|
||||
|
||||
if (this.timer) {
|
||||
window.clearInterval(this.timer);
|
||||
}
|
||||
|
||||
this.timer = window.setInterval(function() {
|
||||
self._repeat(self.options.incremental && self.counter > 20 ? 20 : i, steps, event);
|
||||
}, i);
|
||||
|
||||
self._spin(steps*self._step(), event);
|
||||
},
|
||||
_keydown: function(event) {
|
||||
var o = this.options,
|
||||
KEYS = $.ui.keyCode;
|
||||
|
||||
switch (event.keyCode) {
|
||||
case KEYS.UP: this._repeat(null, event.shiftKey ? o.page : 1, event); break;
|
||||
case KEYS.DOWN: this._repeat(null, event.shiftKey ? -o.page : -1, event); break;
|
||||
case KEYS.PAGE_UP: this._repeat(null, o.page, event); break;
|
||||
case KEYS.PAGE_DOWN: this._repeat(null, -o.page, event); break;
|
||||
|
||||
case KEYS.HOME:
|
||||
case KEYS.END:
|
||||
if (event.shiftKey) {
|
||||
return true;
|
||||
}
|
||||
this._value(this['_' + (event.keyCode == KEYS.HOME ? 'min':'max')]());
|
||||
break;
|
||||
|
||||
case KEYS.TAB:
|
||||
case KEYS.BACKSPACE:
|
||||
case KEYS.LEFT:
|
||||
case KEYS.RIGHT:
|
||||
case KEYS.PERIOD:
|
||||
case KEYS.NUMPAD_DECIMAL:
|
||||
case KEYS.NUMPAD_SUBTRACT:
|
||||
return true;
|
||||
|
||||
case KEYS.ENTER:
|
||||
this.value(this.element.val());
|
||||
return true;
|
||||
|
||||
default:
|
||||
if ((event.keyCode >= 96 && event.keyCode <= 105) || // numeric keypad 0-9
|
||||
(new RegExp('[' + this._validChars() + ']', 'i').test(String.fromCharCode(event.keyCode)))) {
|
||||
return true;
|
||||
};
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
_mousewheel: function() {
|
||||
var self = this;
|
||||
if ($.fn.mousewheel && self.options.mouseWheel) {
|
||||
this.element.mousewheel(function(event, delta) {
|
||||
delta = ($.browser.opera ? -delta / Math.abs(delta) : delta);
|
||||
if (!self._start(event)) {
|
||||
return false;
|
||||
}
|
||||
self._spin((delta > 0 ? 1 : -1) * self._step(), event);
|
||||
if (self.timeout) {
|
||||
window.clearTimeout(self.timeout);
|
||||
}
|
||||
self.timeout = window.setTimeout(function() {
|
||||
if (self.spinning) {
|
||||
self._stop(event);
|
||||
self._change(event);
|
||||
}
|
||||
}, 400);
|
||||
event.preventDefault();
|
||||
});
|
||||
}
|
||||
},
|
||||
_value: function(newVal) {
|
||||
if (!arguments.length) {
|
||||
return this._parse(this.element.val());
|
||||
}
|
||||
this._setOption('value', newVal);
|
||||
},
|
||||
_getData: function(key) {
|
||||
switch (key) {
|
||||
case 'min':
|
||||
case 'max':
|
||||
case 'step':
|
||||
return this['_'+key]();
|
||||
break;
|
||||
}
|
||||
return this.options[key];
|
||||
},
|
||||
_setOption: function(key, value) {
|
||||
switch (key) {
|
||||
case 'value':
|
||||
value = this._parse(value);
|
||||
if (value < this._min()) {
|
||||
value = this._min();
|
||||
}
|
||||
if (value > this._max()) {
|
||||
value = this._max();
|
||||
}
|
||||
break;
|
||||
case 'spinnerClass':
|
||||
this.uiSpinner
|
||||
.removeClass(this.options.spinnerClass)
|
||||
.addClass(uiSpinnerClasses + value);
|
||||
break;
|
||||
}
|
||||
|
||||
$.Widget.prototype._setOption.call( this, key, value );
|
||||
|
||||
this._afterSetData(key, value);
|
||||
},
|
||||
_afterSetData: function(key, value) {
|
||||
switch(key) {
|
||||
case 'max':
|
||||
case 'min':
|
||||
case 'step':
|
||||
if (value != null) {
|
||||
// write attributes back to element if original exist
|
||||
if (this.element.attr(key)) {
|
||||
this.element.attr(key, value);
|
||||
}
|
||||
}
|
||||
this._aria();
|
||||
break;
|
||||
case 'width':
|
||||
this.element.width(value);
|
||||
break;
|
||||
case 'precision':
|
||||
case 'value':
|
||||
this._format(this._parse(this.options.value));
|
||||
break;
|
||||
}
|
||||
},
|
||||
_aria: function() {
|
||||
this.uiSpinner
|
||||
.attr('aria-valuemin', this._min())
|
||||
.attr('aria-valuemax', this._max())
|
||||
.attr('aria-valuenow', this.value());
|
||||
},
|
||||
_validChars: function() {
|
||||
var radix = parseInt(this.options.radix);
|
||||
return '\\-\\' + this.options.radixPoint + (this.options.groupSeparator
|
||||
? '\\' + this.options.groupSeparator
|
||||
:'') + (radix < 10
|
||||
? '0-' + radix
|
||||
: '0-9' + (radix > 10
|
||||
? 'a-' + String.fromCharCode('a'.charCodeAt(0) + radix - 11)
|
||||
:''));
|
||||
},
|
||||
_parse: function(val) {
|
||||
if (typeof val == 'string') {
|
||||
if (this.options.groupSeparator) {
|
||||
val = val.replace(new RegExp('\\'+this.options.groupSeparator,'g'), '');
|
||||
}
|
||||
val = val.replace(new RegExp('[^' + this._validChars() + ']', 'gi'), '').split(this.options.radixPoint);
|
||||
result = parseInt(val[0] == '-' ? 0 : val[0] || 0, this.options.radix);
|
||||
if (val.length > 1) {
|
||||
result += parseInt(val[1], this.options.radix) / Math.pow(this.options.radix, val[1].length) *
|
||||
// must test first character of val[0] for minus sign because -0 is parsed as 0 in result
|
||||
(val[0].substr(0,1) == '-' ? -1 : 1);
|
||||
}
|
||||
val = result;
|
||||
}
|
||||
return isNaN(val) ? null : val;
|
||||
},
|
||||
_format: function(num) {
|
||||
var regex = /(\d+)(\d{3})/,
|
||||
options = this.options,
|
||||
sym = options.currency || '',
|
||||
dec = options.precision,
|
||||
radix = options.radix,
|
||||
group = options.groupSeparator,
|
||||
pt = options.radixPoint,
|
||||
neg = num < 0 ? '-' : '';
|
||||
|
||||
for (
|
||||
num = (
|
||||
isNaN(num)
|
||||
? options.value
|
||||
: radix === 10
|
||||
? parseFloat(num, radix).toFixed(dec)
|
||||
: parseInt(num, radix)
|
||||
).toString(radix).replace('.', pt);
|
||||
regex.test(num) && group;
|
||||
num = num.replace(regex, '$1'+group+'$2')
|
||||
);
|
||||
|
||||
result = num.replace('-','');
|
||||
while (options.padding && (result.length < options.padding)) {
|
||||
result = '0' + result;
|
||||
}
|
||||
this.element.val(neg + sym + result);
|
||||
},
|
||||
_getOption: function(key, defaultValue) {
|
||||
return this._parse(this.options[key] !== null
|
||||
? this.options[key]
|
||||
: this.element.attr(key)
|
||||
? this.element.attr(key)
|
||||
: defaultValue);
|
||||
},
|
||||
_step: function(newVal) {
|
||||
if (!arguments.length) {
|
||||
return this._getOption('step', 1);
|
||||
}
|
||||
this._setOption('step', newVal);
|
||||
},
|
||||
_min: function(newVal) {
|
||||
if (!arguments.length) {
|
||||
return this._getOption('min', -Number.MAX_VALUE);
|
||||
}
|
||||
this._setOption('min', newVal);
|
||||
},
|
||||
_max: function(newVal) {
|
||||
if (!arguments.length) {
|
||||
return this._getOption('max', Number.MAX_VALUE);
|
||||
}
|
||||
this._setOption('max', newVal);
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
if ($.fn.mousewheel) {
|
||||
this.element.unmousewheel();
|
||||
}
|
||||
|
||||
this.element
|
||||
.removeClass('ui-spinner-input')
|
||||
.removeAttr('disabled')
|
||||
.removeAttr('autocomplete')
|
||||
.removeData('spinner')
|
||||
.unbind(namespace);
|
||||
|
||||
this.uiSpinner.replaceWith(this.element);
|
||||
},
|
||||
enable: function() {
|
||||
this.element
|
||||
.removeAttr('disabled')
|
||||
.siblings()
|
||||
.removeAttr('disabled')
|
||||
.parent()
|
||||
.removeClass('ui-spinner-disabled ui-state-disabled');
|
||||
this.options.disabled = false;
|
||||
},
|
||||
disable: function() {
|
||||
this.element
|
||||
.attr('disabled', true)
|
||||
.siblings()
|
||||
.attr('disabled', true)
|
||||
.parent()
|
||||
.addClass('ui-spinner-disabled ui-state-disabled');
|
||||
this.options.disabled = true;
|
||||
},
|
||||
value: function(newVal) {
|
||||
if (!arguments.length) {
|
||||
return this._value();
|
||||
}
|
||||
this._value(newVal);
|
||||
},
|
||||
stepUp: function(steps) {
|
||||
this._spin((steps || 1) * this._step(), null);
|
||||
return this;
|
||||
},
|
||||
stepDown: function(steps) {
|
||||
this._spin((steps || 1) * -this._step(), null);
|
||||
return this;
|
||||
},
|
||||
pageUp: function(pages) {
|
||||
return this.stepUp((pages || 1) * this.options.page);
|
||||
},
|
||||
pageDown: function(pages) {
|
||||
return this.stepDown((pages || 1) * this.options.page);
|
||||
},
|
||||
|
||||
widget: function() {
|
||||
return this.uiSpinner;
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue
Block a user