Skip to content

Commit

Permalink
Initial commit.
Browse files Browse the repository at this point in the history
  • Loading branch information
InfinitiesLoop committed May 11, 2010
0 parents commit 3fc4b83
Show file tree
Hide file tree
Showing 435 changed files with 31,537 additions and 0 deletions.
80 changes: 80 additions & 0 deletions demo.css
@@ -0,0 +1,80 @@
body {
font-family: Arial
}
a {
color: #6D929B;
}
input {
width: 100px;
margin: 5px;
}
.results {
border-collapse: collapse;
}
.results td {
border: 1px solid #C1DAD7;
padding: 2px 2px 2px 2px;
color: #6D929B;
font-size: x-small;
white-space: nowrap;
text-align: center;
}
.results th {
border: 1px solid #C1DAD7;
letter-spacing: 2px;
text-align: center;
padding: 6px 6px 6px 12px;
white-space: nowrap;
}
table {
width: 100%;
}
fieldset.info {
width: 45%;
float: left;
}
.info td {
font-size: x-small;
}

.tab {
margin-top: 5px;
margin-right: 5px;
padding: 2px;
cursor: pointer;
background-color: #EEEEEE;
}

.active {
border: 1px solid black;
float: left;
}

.inactive {
float: left;
}

.tab.active {
font-weight: bold;
border: 1px solid black;
float: left;
}

div.inactive {
display: none;
}

div.active {
clear: both;
min-width: 100%;
}

.pane {
margin-top: 10px;
clear: both;
}

#intro {
font-size: x-small;
margin-bottom: 10px;
}
255 changes: 255 additions & 0 deletions demo.html
@@ -0,0 +1,255 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Globalization Demo</title>
<link type="text/css" rel="Stylesheet" href="demo.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.tmpl.js"></script>
<script type="text/javascript" src="jquery.glob.js"></script>
<script type="text/javascript" src="globinfo/jquery.glob.all.min.js"></script>
<script type="text/javascript" src="demo.js"></script>
<script id="formattmpl" type="text/html">
<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/html">
<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 type="text/html" id="infonumbertmpl">
<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 type="text/html" id="infodatetmpl">
<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[0]}}
<li>{{=}}</li>
{{/each}}
</ol>
</td>
</tr>
<tr>
<td>Days (abbreviated)</td>
<td colspan="3">
<ol>
{{each days[1]}}
<li>{{=}}</li>
{{/each}}
</ol>
</td> </tr>
<tr>
<td>Months</td>
<td colspan="3">
<ol>
{{each months[0]}}
<li>{{=}}</li>
{{/each}}
</ol>
</td>
</tr>
<tr>
<td>Months (abbreviated)</td>
<td colspan="3">
<ol>
{{each months[1]}}
<li>{{=}}</li>
{{/each}}
</ol>
</td>
</tr>
{{if typeof monthsGenitive !== 'undefined'}}
<tr>
<td>Months (Genitive)</td>
<td>${monthsGenitive[0]}</td>
<td>Months (Abbr. Gen.)</td>
<td>${monthsGenitive[1]}</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 Globalization plugin being proposed by Microsoft. You can follow the discussion and provide feedback on the jQuery developer forum, here:
<br/><a href="">jQuery Discussion</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/nje/jquery-glob/">jQuery Globalization 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>".
</p>
<fieldset id="infonumber" class="info">
</fieldset>
<fieldset id="infodate" class="info">
</fieldset>
</div>

</div>

<div class="pane">
<p>
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>
</p>
</div>



</body>
</html>

0 comments on commit 3fc4b83

Please sign in to comment.