Skip to content

Commit

Permalink
Replaced hexadecimal demo with decimal demo. Updated that and the cur…
Browse files Browse the repository at this point in the history 
…rency 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.
  • Loading branch information
@jzaefferer
jzaefferer committed Oct 22, 2010
1 parent af8ca4e commit bc3d283
Show file tree
Hide file tree
Showing 9 changed files with 1,628 additions and 243 deletions.
62 changes: 62 additions & 0 deletions demos/spinner/currency.html
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 58 additions & 0 deletions demos/spinner/decimal.html
View file
Original file line number Diff line number Diff line change
@@ -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>
74 changes: 0 additions & 74 deletions demos/spinner/donation.html
View file

This file was deleted.

37 changes: 0 additions & 37 deletions demos/spinner/hexadecimal.html
View file

This file was deleted.

4 changes: 2 additions & 2 deletions demos/spinner/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
<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="decimal.html">Decimal</a></li>
<li><a href="currency.html">Currency</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>
Expand Down
55 changes: 55 additions & 0 deletions external/glob.de-DE.js
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 74 additions & 0 deletions external/glob.ja-JP.js
View file
Original file line number Diff line number Diff line change
@@ -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);
Loading

0 comments on commit bc3d283

Please sign in to comment.