266 lines
7.9 KiB
HTML
266 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Globalization Demo</title>
|
|
<link type="text/css" rel="Stylesheet" href="browser.css">
|
|
<script src="../../lib/globalize.js"></script>
|
|
<script src="../../lib/cultures/globalize.cultures.js"></script>
|
|
<script src="jquery-1.4.4.js"></script>
|
|
<script src="jquery.tmpl.js"></script>
|
|
<script src="browser.js"></script>
|
|
<script id="formattmpl" type="text/x-jquery-tmpl">
|
|
<tr>
|
|
<th>Number</th>
|
|
{{each formats}}
|
|
<th>{{=}}</th>
|
|
{{/each}}
|
|
</tr>
|
|
{{each(i) numbers}}
|
|
<tr class="result">
|
|
<td>
|
|
${numbers[i]}
|
|
</td>
|
|
{{each(j) formats}}
|
|
<td>
|
|
{{demoFormat(i) j}}
|
|
</td>
|
|
{{/each}}
|
|
</tr>
|
|
{{/each}}
|
|
</script>
|
|
<script id="dateformattmpl" type="text/x-jquery-tmpl">
|
|
<tr>
|
|
<th>Date</th>
|
|
{{each dateFormats}}
|
|
<th>{{=}}</th>
|
|
{{/each}}
|
|
</tr>
|
|
{{each(i) dates}}
|
|
<tr class="result">
|
|
<td>
|
|
{{=}}
|
|
</td>
|
|
{{each(j) dateFormats}}
|
|
<td>
|
|
{{demoDateFormat(i) j}}
|
|
</td>
|
|
{{/each}}
|
|
</tr>
|
|
{{/each}}
|
|
</script>
|
|
<script id="infonumbertmpl" type="text/x-jquery-tmpl">
|
|
<legend>Number Formatting</legend>
|
|
<table class="info">
|
|
<tr>
|
|
<td>Pattern</td>
|
|
<td>${pattern}</td>
|
|
<td>Decimals</td>
|
|
<td>${decimals} (${$data['.']})</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Grouping</td>
|
|
<td>${$data[',']}</td>
|
|
<td>Group Size</td>
|
|
<td>${groupSizes}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Positive</td>
|
|
<td>${$data['+']}</td>
|
|
<td>Negative</td>
|
|
<td>${$data['-']}</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4" align="center">Percent (symbol = ${percent.symbol})</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Pattern</td>
|
|
<td>${percent.pattern}</td>
|
|
<td>Decimals</td>
|
|
<td>${percent.decimals} (${percent['.']})</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Grouping</td>
|
|
<td>${percent[',']}</td>
|
|
<td>Group Size</td>
|
|
<td>${percent.groupSizes}</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4" align="center">Currency (symbol = ${currency.symbol})</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Pattern</td>
|
|
<td>${currency.pattern}</td>
|
|
<td>Decimals</td>
|
|
<td>${currency.decimals} (${currency['.']})</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Grouping</td>
|
|
<td>${currency[',']}</td>
|
|
<td>Group Size</td>
|
|
<td>${currency.groupSizes}</td>
|
|
</tr>
|
|
</table>
|
|
</script>
|
|
<script id="infodatetmpl" type="text/x-jquery-tmpl">
|
|
<legend>Date Formatting</legend>
|
|
<table class="info">
|
|
<tr>
|
|
<td>Name</td>
|
|
<td colspan="3">${name}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>AM</td>
|
|
<td>${AM}</td>
|
|
<td>PM</td>
|
|
<td>${PM}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Eras</td>
|
|
<td colspan="3">
|
|
<ol>
|
|
{{each eras}}
|
|
<li>${name} (year offset ${offset})</li>
|
|
{{/each}}
|
|
</ol>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Days</td>
|
|
<td colspan="3">
|
|
<ol>
|
|
{{each days.names}}
|
|
<li>{{=}}</li>
|
|
{{/each}}
|
|
</ol>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Days (abbreviated)</td>
|
|
<td colspan="3">
|
|
<ol>
|
|
{{each days.namesAbbr}}
|
|
<li>{{=}}</li>
|
|
{{/each}}
|
|
</ol>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Days (shortest)</td>
|
|
<td colspan="3">
|
|
<ol>
|
|
{{each days.namesShort}}
|
|
<li>{{=}}</li>
|
|
{{/each}}
|
|
</ol>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Months</td>
|
|
<td colspan="3">
|
|
<ol>
|
|
{{each months.names}}
|
|
<li>{{=}}</li>
|
|
{{/each}}
|
|
</ol>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Months (abbreviated)</td>
|
|
<td colspan="3">
|
|
<ol>
|
|
{{each months.namesAbbr}}
|
|
<li>{{=}}</li>
|
|
{{/each}}
|
|
</ol>
|
|
</td>
|
|
</tr>
|
|
{{if typeof monthsGenitive !== 'undefined'}}
|
|
<tr>
|
|
<td>Months (Genitive)</td>
|
|
<td>${monthsGenitive.names}</td>
|
|
<td>Months (Abbr. Gen.)</td>
|
|
<td>${monthsGenitive.namesAbbr}</td>
|
|
</tr>
|
|
{{/if}}
|
|
<tr>
|
|
<td align="center" colspan="4">Patterns</td>
|
|
</tr>
|
|
{{each(n,v) patterns}}
|
|
<tr>
|
|
<td>${n}</td>
|
|
<td colspan="3">{{=}}</td>
|
|
</tr>
|
|
{{/each}}
|
|
</table>
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="intro">
|
|
This is a demo of the Globalize library. You can follow the discussion and provide feedback on the planning page, here:
|
|
<br/><a href="http://wiki.jqueryui.com/Globalization">Globalization wiki page</a>
|
|
<br/>
|
|
And you can view the source from here or keep up to date with it on github, here:
|
|
<br/><a href="https://github.com/jquery/globalize/">Globalize on GitHub</a>
|
|
</div>
|
|
|
|
<div>
|
|
Culture:
|
|
<select id="cultures"></select>
|
|
</div>
|
|
<div>
|
|
Calendar:
|
|
<select id="calendars"></select>
|
|
</div>
|
|
|
|
<div class="pane">
|
|
<span class="tab active" id="dates">Dates</span>
|
|
<span class="tab inactive" id="numbers">Numbers</span>
|
|
<span class="tab inactive" id="info">Info</span>
|
|
|
|
<div id="datescontent" class="active">
|
|
<table id="dateformat" class="results">
|
|
</table>
|
|
<b>Parsing:</b> Type a date in one of the culture formats:
|
|
<input id="parseDate" type="text" /><span id="parseDateResult"></span>
|
|
</div>
|
|
|
|
<div id="numberscontent" class="inactive">
|
|
<table id="format" class="results">
|
|
</table>
|
|
<b>Parsing:</b> Type a number using the culture group and decimal separators:
|
|
<input id="parseNumber" type="text" /><span id="parseNumberResult"></span>
|
|
</div>
|
|
|
|
<div id="infocontent" class="inactive">
|
|
<p>
|
|
Name (in English) "<span id="englishName"></span>"<br />
|
|
Name (in Native Language) "<span id="nativeName"></span>".<br />
|
|
Is RTL culture? <span id="isRTL"></span>.
|
|
</p>
|
|
<fieldset id="infonumber" class="info">
|
|
</fieldset>
|
|
<fieldset id="infodate" class="info">
|
|
</fieldset>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="pane">
|
|
|
|
Interesting cultures to preview:
|
|
<ul>
|
|
<li>ja-JP: Has an optional calendar that has 4 different eras.</li>
|
|
<li>th-TH: Standard calendar has a year offset.</li>
|
|
<li>te-IN: Numbers have unequal groupings.</li>
|
|
<li>ar-SA: Standard calendar is UmAlQura, a non-gregorian based calendar that requires custom conversion logic.
|
|
It also supports the Hijri calendar, and a standard gregorian calendar translated into one of <i>4 languages</i>.
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|