mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Replaced hexadecimal demo with decimal demo. Updated that and the currency demo (previously donation) to use globalization plugin with a select for three different cultures (probably more to come). Updated spinner widget to use Globalization when available, replacing all number formatting related options with a single numberformat option.
This commit is contained in:
jzaefferer
parent
af8ca4ed0e
commit
bc3d283d2c
62
demos/spinner/currency.html
Normal file
62
demos/spinner/currency.html
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
<!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="../../external/glob.js"></script>
|
||||||
|
<script type="text/javascript" src="../../external/glob.de-DE.js"></script>
|
||||||
|
<script type="text/javascript" src="../../external/glob.ja-JP.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() {
|
||||||
|
$("#currency").change(function() {
|
||||||
|
var current = $("#spinner").spinner("value");
|
||||||
|
console.log("before!!", current)
|
||||||
|
Globalization.preferCulture($(this).val());
|
||||||
|
$("#spinner").spinner("value", current);
|
||||||
|
})
|
||||||
|
|
||||||
|
$("#spinner").spinner({
|
||||||
|
min: 5,
|
||||||
|
max: 2500,
|
||||||
|
step: 25,
|
||||||
|
start: 1000,
|
||||||
|
numberformat: "C"
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="demo">
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label for="currency">Currency to donate</label>
|
||||||
|
<select id="currency" name="currency">
|
||||||
|
<option value="en-US">US $</option>
|
||||||
|
<option value="de-DE">EUR €</option>
|
||||||
|
<option value="ja-JP">YEN ¥</option>
|
||||||
|
</select>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="spinner">Amount to donate:</label>
|
||||||
|
<input id="spinner" name="spinner" value="5" />
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo-description">
|
||||||
|
<p>
|
||||||
|
Example of a donation form, with currency selection and amout spinner.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
58
demos/spinner/decimal.html
Normal file
58
demos/spinner/decimal.html
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>jQuery UI Spinner - decimal</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="../../external/glob.js"></script>
|
||||||
|
<script type="text/javascript" src="../../external/glob.de-DE.js"></script>
|
||||||
|
<script type="text/javascript" src="../../external/glob.ja-JP.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({
|
||||||
|
step: 0.01
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#culture").change(function() {
|
||||||
|
var current = $("#spinner").spinner("value");
|
||||||
|
Globalization.preferCulture($(this).val());
|
||||||
|
$("#spinner").spinner("value", current);
|
||||||
|
})
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="demo">
|
||||||
|
<p>
|
||||||
|
<label for="spinner">Decimal spinner:</label>
|
||||||
|
<input id="spinner" name="spinner" value="5.06" />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="culture">Select a culture to use for formatting:</label>
|
||||||
|
<select id="culture">
|
||||||
|
<option value="en-EN" selected="selected">English</option>
|
||||||
|
<option value="de-DE">German</option>
|
||||||
|
<option value="ja-JP">Japanese</option>
|
||||||
|
</select>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo-description">
|
||||||
|
<p>
|
||||||
|
Example of a decimal spinner. Step is set to 0.01.
|
||||||
|
<br/>The code handling the culture change reads the current spinner value,
|
||||||
|
then changes the culture, then sets the value again, resulting in an updated
|
||||||
|
formatting, based on the new culture.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,74 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -9,8 +9,8 @@
|
|||||||
<h4>Examples</h4>
|
<h4>Examples</h4>
|
||||||
<ul>
|
<ul>
|
||||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
||||||
<li><a href="donation.html">Donation</a></li>
|
<li><a href="decimal.html">Decimal</a></li>
|
||||||
<li><a href="hexadecimal.html">Hexadecimal</a></li>
|
<li><a href="currency.html">Currency</a></li>
|
||||||
<li><a href="latlong.html">Map</a></li>
|
<li><a href="latlong.html">Map</a></li>
|
||||||
<li><a href="mousewheel-disabled.html">Mousewheel Disabled</a></li>
|
<li><a href="mousewheel-disabled.html">Mousewheel Disabled</a></li>
|
||||||
<li><a href="rtl.html">RTL</a></li>
|
<li><a href="rtl.html">RTL</a></li>
|
||||||
|
|||||||
55
external/glob.de-DE.js
vendored
Normal file
55
external/glob.de-DE.js
vendored
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
(function($) {
|
||||||
|
var cultures = $.cultures,
|
||||||
|
en = cultures.en,
|
||||||
|
standard = en.calendars.standard,
|
||||||
|
culture = cultures["de-DE"] = $.extend(true, {}, en, {
|
||||||
|
name: "de-DE",
|
||||||
|
englishName: "German (Germany)",
|
||||||
|
nativeName: "Deutsch (Deutschland)",
|
||||||
|
language: "de",
|
||||||
|
numberFormat: {
|
||||||
|
',': ".",
|
||||||
|
'.': ",",
|
||||||
|
percent: {
|
||||||
|
pattern: ["-n%","n%"],
|
||||||
|
',': ".",
|
||||||
|
'.': ","
|
||||||
|
},
|
||||||
|
currency: {
|
||||||
|
pattern: ["-n $","n $"],
|
||||||
|
',': ".",
|
||||||
|
'.': ",",
|
||||||
|
symbol: "€"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
calendars: {
|
||||||
|
standard: $.extend(true, {}, standard, {
|
||||||
|
'/': ".",
|
||||||
|
firstDay: 1,
|
||||||
|
days: {
|
||||||
|
names: ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"],
|
||||||
|
namesAbbr: ["So","Mo","Di","Mi","Do","Fr","Sa"],
|
||||||
|
namesShort: ["So","Mo","Di","Mi","Do","Fr","Sa"]
|
||||||
|
},
|
||||||
|
months: {
|
||||||
|
names: ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember",""],
|
||||||
|
namesAbbr: ["Jan","Feb","Mrz","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez",""]
|
||||||
|
},
|
||||||
|
AM: null,
|
||||||
|
PM: null,
|
||||||
|
eras: [{"name":"n. Chr.","start":null,"offset":0}],
|
||||||
|
patterns: {
|
||||||
|
d: "dd.MM.yyyy",
|
||||||
|
D: "dddd, d. MMMM yyyy",
|
||||||
|
t: "HH:mm",
|
||||||
|
T: "HH:mm:ss",
|
||||||
|
f: "dddd, d. MMMM yyyy HH:mm",
|
||||||
|
F: "dddd, d. MMMM yyyy HH:mm:ss",
|
||||||
|
M: "dd MMMM",
|
||||||
|
Y: "MMMM yyyy"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, cultures["de-DE"]);
|
||||||
|
culture.calendar = culture.calendars.standard;
|
||||||
|
})(Globalization);
|
||||||
74
external/glob.ja-JP.js
vendored
Normal file
74
external/glob.ja-JP.js
vendored
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
(function($) {
|
||||||
|
var cultures = $.cultures,
|
||||||
|
en = cultures.en,
|
||||||
|
standard = en.calendars.standard,
|
||||||
|
culture = cultures["ja-JP"] = $.extend(true, {}, en, {
|
||||||
|
name: "ja-JP",
|
||||||
|
englishName: "Japanese (Japan)",
|
||||||
|
nativeName: "日本語 (日本)",
|
||||||
|
language: "ja",
|
||||||
|
numberFormat: {
|
||||||
|
percent: {
|
||||||
|
pattern: ["-n%","n%"]
|
||||||
|
},
|
||||||
|
currency: {
|
||||||
|
pattern: ["-$n","$n"],
|
||||||
|
decimals: 0,
|
||||||
|
symbol: "¥"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
calendars: {
|
||||||
|
standard: $.extend(true, {}, standard, {
|
||||||
|
days: {
|
||||||
|
names: ["日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"],
|
||||||
|
namesAbbr: ["日","月","火","水","木","金","土"],
|
||||||
|
namesShort: ["日","月","火","水","木","金","土"]
|
||||||
|
},
|
||||||
|
months: {
|
||||||
|
names: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",""],
|
||||||
|
namesAbbr: ["1","2","3","4","5","6","7","8","9","10","11","12",""]
|
||||||
|
},
|
||||||
|
AM: ["午前","午前","午前"],
|
||||||
|
PM: ["午後","午後","午後"],
|
||||||
|
eras: [{"name":"西暦","start":null,"offset":0}],
|
||||||
|
patterns: {
|
||||||
|
d: "yyyy/MM/dd",
|
||||||
|
D: "yyyy'年'M'月'd'日'",
|
||||||
|
t: "H:mm",
|
||||||
|
T: "H:mm:ss",
|
||||||
|
f: "yyyy'年'M'月'd'日' H:mm",
|
||||||
|
F: "yyyy'年'M'月'd'日' H:mm:ss",
|
||||||
|
M: "M'月'd'日'",
|
||||||
|
Y: "yyyy'年'M'月'"
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
Japanese: $.extend(true, {}, standard, {
|
||||||
|
name: "Japanese",
|
||||||
|
days: {
|
||||||
|
names: ["日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"],
|
||||||
|
namesAbbr: ["日","月","火","水","木","金","土"],
|
||||||
|
namesShort: ["日","月","火","水","木","金","土"]
|
||||||
|
},
|
||||||
|
months: {
|
||||||
|
names: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",""],
|
||||||
|
namesAbbr: ["1","2","3","4","5","6","7","8","9","10","11","12",""]
|
||||||
|
},
|
||||||
|
AM: ["午前","午前","午前"],
|
||||||
|
PM: ["午後","午後","午後"],
|
||||||
|
eras: [{"name":"平成","start":null,"offset":1867},{"name":"昭和","start":-1812153600000,"offset":1911},{"name":"大正","start":-1357603200000,"offset":1925},{"name":"明治","start":60022080000,"offset":1988}],
|
||||||
|
twoDigitYearMax: 99,
|
||||||
|
patterns: {
|
||||||
|
d: "gg y/M/d",
|
||||||
|
D: "gg y'年'M'月'd'日'",
|
||||||
|
t: "H:mm",
|
||||||
|
T: "H:mm:ss",
|
||||||
|
f: "gg y'年'M'月'd'日' H:mm",
|
||||||
|
F: "gg y'年'M'月'd'日' H:mm:ss",
|
||||||
|
M: "M'月'd'日'",
|
||||||
|
Y: "gg y'年'M'月'"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, cultures["ja-JP"]);
|
||||||
|
culture.calendar = culture.calendars.standard;
|
||||||
|
})(Globalization);
|
||||||
1333
external/glob.js
vendored
Normal file
1333
external/glob.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
174
ui/jquery.ui.spinner.js
vendored
174
ui/jquery.ui.spinner.js
vendored
@ -17,60 +17,29 @@
|
|||||||
var hover = 'ui-state-hover',
|
var hover = 'ui-state-hover',
|
||||||
active = 'ui-state-active',
|
active = 'ui-state-active',
|
||||||
namespace = '.spinner',
|
namespace = '.spinner',
|
||||||
buttonRegex = /hide|auto|fast|slow|(\d+)/,
|
|
||||||
uiSpinnerClasses = 'ui-spinner ui-state-default ui-widget ui-widget-content ui-corner-all ';
|
uiSpinnerClasses = 'ui-spinner ui-state-default ui-widget ui-widget-content ui-corner-all ';
|
||||||
|
|
||||||
$.widget('ui.spinner', {
|
$.widget('ui.spinner', {
|
||||||
options: {
|
options: {
|
||||||
currency: false,
|
|
||||||
dir: 'ltr',
|
dir: 'ltr',
|
||||||
groupSeparator: '',
|
|
||||||
incremental: true,
|
incremental: true,
|
||||||
max: null,
|
max: null,
|
||||||
min: null,
|
min: null,
|
||||||
mouseWheel: true,
|
mouseWheel: true,
|
||||||
|
numberformat: "n",
|
||||||
padding: 0,
|
padding: 0,
|
||||||
page: 5,
|
page: 5,
|
||||||
precision: 0,
|
|
||||||
radix: 10,
|
|
||||||
radixPoint: '.',
|
|
||||||
spinnerClass: null,
|
spinnerClass: null,
|
||||||
step: null,
|
step: null,
|
||||||
value: 0,
|
value: 0
|
||||||
width: false
|
|
||||||
},
|
},
|
||||||
|
|
||||||
_create: function() {
|
_create: function() {
|
||||||
this._initOptions();
|
|
||||||
|
|
||||||
this.value(this._parse(this.element.val() || this.options.value));
|
this.value(this._parse(this.element.val() || this.options.value));
|
||||||
|
|
||||||
this._draw();
|
this._draw();
|
||||||
|
|
||||||
this._mousewheel();
|
this._mousewheel();
|
||||||
|
|
||||||
this._aria();
|
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() {
|
_draw: function() {
|
||||||
var self = this,
|
var self = this,
|
||||||
options = self.options;
|
options = self.options;
|
||||||
@ -101,7 +70,10 @@ $.widget('ui.spinner', {
|
|||||||
|
|
||||||
this.element
|
this.element
|
||||||
.bind('keydown'+namespace, function(event) {
|
.bind('keydown'+namespace, function(event) {
|
||||||
return self._start(event) ? self._keydown(event) : false;
|
if (self._start(event)) {
|
||||||
|
return self._keydown(event);
|
||||||
|
}
|
||||||
|
return true;
|
||||||
})
|
})
|
||||||
.bind('keyup'+namespace, function(event) {
|
.bind('keyup'+namespace, function(event) {
|
||||||
if (self.spinning) {
|
if (self.spinning) {
|
||||||
@ -114,18 +86,13 @@ $.widget('ui.spinner', {
|
|||||||
self.focused = true;
|
self.focused = true;
|
||||||
})
|
})
|
||||||
.bind('blur'+namespace, function(event) {
|
.bind('blur'+namespace, function(event) {
|
||||||
self._value(self.element.val());
|
self.value(self.element.val());
|
||||||
if (!self.hovered) {
|
if (!self.hovered) {
|
||||||
uiSpinner.removeClass(active);
|
uiSpinner.removeClass(active);
|
||||||
}
|
}
|
||||||
self.focused = false;
|
self.focused = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
// force width if passed through options
|
|
||||||
if (options.width) {
|
|
||||||
this.element.width(options.width);
|
|
||||||
}
|
|
||||||
|
|
||||||
// disable spinner if element was already disabled
|
// disable spinner if element was already disabled
|
||||||
if (options.disabled) {
|
if (options.disabled) {
|
||||||
this.disable();
|
this.disable();
|
||||||
@ -133,6 +100,7 @@ $.widget('ui.spinner', {
|
|||||||
|
|
||||||
// button bindings
|
// button bindings
|
||||||
this.buttons = uiSpinner.find('.ui-spinner-button')
|
this.buttons = uiSpinner.find('.ui-spinner-button')
|
||||||
|
.attr("tabIndex", -1)
|
||||||
.bind('mousedown', function(event) {
|
.bind('mousedown', function(event) {
|
||||||
if (self._start(event) === false) {
|
if (self._start(event) === false) {
|
||||||
return false;
|
return false;
|
||||||
@ -198,7 +166,7 @@ $.widget('ui.spinner', {
|
|||||||
this.counter = 1;
|
this.counter = 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
var newVal = this._value() + step * (this.options.incremental && this.counter > 100
|
var newVal = this.value() + step * (this.options.incremental && this.counter > 100
|
||||||
? this.counter > 200
|
? this.counter > 200
|
||||||
? 100
|
? 100
|
||||||
: 10
|
: 10
|
||||||
@ -206,7 +174,7 @@ $.widget('ui.spinner', {
|
|||||||
|
|
||||||
// cancelable
|
// cancelable
|
||||||
if (this._trigger('spin', event, { value: newVal }) !== false) {
|
if (this._trigger('spin', event, { value: newVal }) !== false) {
|
||||||
this._value(newVal);
|
this.value(newVal);
|
||||||
this.counter++;
|
this.counter++;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -227,10 +195,10 @@ $.widget('ui.spinner', {
|
|||||||
i = i || 100;
|
i = i || 100;
|
||||||
|
|
||||||
if (this.timer) {
|
if (this.timer) {
|
||||||
window.clearInterval(this.timer);
|
window.clearTimeout(this.timer);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.timer = window.setInterval(function() {
|
this.timer = window.setTimeout(function() {
|
||||||
self._repeat(self.options.incremental && self.counter > 20 ? 20 : i, steps, event);
|
self._repeat(self.options.incremental && self.counter > 20 ? 20 : i, steps, event);
|
||||||
}, i);
|
}, i);
|
||||||
|
|
||||||
@ -241,40 +209,32 @@ $.widget('ui.spinner', {
|
|||||||
KEYS = $.ui.keyCode;
|
KEYS = $.ui.keyCode;
|
||||||
|
|
||||||
switch (event.keyCode) {
|
switch (event.keyCode) {
|
||||||
case KEYS.UP: this._repeat(null, event.shiftKey ? o.page : 1, event); break;
|
case KEYS.UP:
|
||||||
case KEYS.DOWN: this._repeat(null, event.shiftKey ? -o.page : -1, event); break;
|
this._repeat(null, event.shiftKey ? o.page : 1, event);
|
||||||
case KEYS.PAGE_UP: this._repeat(null, o.page, event); break;
|
return false;
|
||||||
case KEYS.PAGE_DOWN: this._repeat(null, -o.page, event); break;
|
case KEYS.DOWN:
|
||||||
|
this._repeat(null, event.shiftKey ? -o.page : -1, event);
|
||||||
|
return false;
|
||||||
|
case KEYS.PAGE_UP:
|
||||||
|
this._repeat(null, o.page, event);
|
||||||
|
return false;
|
||||||
|
case KEYS.PAGE_DOWN:
|
||||||
|
this._repeat(null, -o.page, event);
|
||||||
|
return false;
|
||||||
|
|
||||||
case KEYS.HOME:
|
case KEYS.HOME:
|
||||||
case KEYS.END:
|
case KEYS.END:
|
||||||
if (event.shiftKey) {
|
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;
|
return true;
|
||||||
|
}
|
||||||
|
this.value(this['_' + (event.keyCode == KEYS.HOME ? 'min' : 'max')]());
|
||||||
|
return false;
|
||||||
|
|
||||||
case KEYS.ENTER:
|
case KEYS.ENTER:
|
||||||
this.value(this.element.val());
|
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;
|
return true;
|
||||||
},
|
},
|
||||||
_mousewheel: function() {
|
_mousewheel: function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
@ -298,7 +258,7 @@ $.widget('ui.spinner', {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
_value: function(newVal) {
|
value: function(newVal) {
|
||||||
if (!arguments.length) {
|
if (!arguments.length) {
|
||||||
return this._parse(this.element.val());
|
return this._parse(this.element.val());
|
||||||
}
|
}
|
||||||
@ -349,10 +309,6 @@ $.widget('ui.spinner', {
|
|||||||
}
|
}
|
||||||
this._aria();
|
this._aria();
|
||||||
break;
|
break;
|
||||||
case 'width':
|
|
||||||
this.element.width(value);
|
|
||||||
break;
|
|
||||||
case 'precision':
|
|
||||||
case 'value':
|
case 'value':
|
||||||
this._format(this._parse(this.options.value));
|
this._format(this._parse(this.options.value));
|
||||||
break;
|
break;
|
||||||
@ -364,59 +320,23 @@ $.widget('ui.spinner', {
|
|||||||
.attr('aria-valuemax', this._max())
|
.attr('aria-valuemax', this._max())
|
||||||
.attr('aria-valuenow', this.value());
|
.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) {
|
_parse: function(val) {
|
||||||
|
var input = val;
|
||||||
if (typeof val == 'string') {
|
if (typeof val == 'string') {
|
||||||
if (this.options.groupSeparator) {
|
// special case for currency formatting until Globalization handles currencies
|
||||||
val = val.replace(new RegExp('\\'+this.options.groupSeparator,'g'), '');
|
if (this.options.numberformat == "C" && window.Globalization) {
|
||||||
|
// parseFloat should accept number format, including currency
|
||||||
|
var culture = Globalization.culture || Globalization.cultures['default'];
|
||||||
|
val = val.replace(culture.numberFormat.currency.symbol, "");
|
||||||
}
|
}
|
||||||
val = val.replace(new RegExp('[^' + this._validChars() + ']', 'gi'), '').split(this.options.radixPoint);
|
val = window.Globalization ? Globalization.parseFloat(val) : +val;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
console.log("input", input, "parsed", val)
|
||||||
return isNaN(val) ? null : val;
|
return isNaN(val) ? null : val;
|
||||||
},
|
},
|
||||||
_format: function(num) {
|
_format: function(num) {
|
||||||
var regex = /(\d+)(\d{3})/,
|
this.element.val( window.Globalization ? Globalization.format(num, this.options.numberformat) : num );
|
||||||
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) {
|
_getOption: function(key, defaultValue) {
|
||||||
return this._parse(this.options[key] !== null
|
return this._parse(this.options[key] !== null
|
||||||
@ -476,12 +396,6 @@ $.widget('ui.spinner', {
|
|||||||
.addClass('ui-spinner-disabled ui-state-disabled');
|
.addClass('ui-spinner-disabled ui-state-disabled');
|
||||||
this.options.disabled = true;
|
this.options.disabled = true;
|
||||||
},
|
},
|
||||||
value: function(newVal) {
|
|
||||||
if (!arguments.length) {
|
|
||||||
return this._value();
|
|
||||||
}
|
|
||||||
this._value(newVal);
|
|
||||||
},
|
|
||||||
stepUp: function(steps) {
|
stepUp: function(steps) {
|
||||||
this._spin((steps || 1) * this._step(), null);
|
this._spin((steps || 1) * this._step(), null);
|
||||||
return this;
|
return this;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user