libs/js/globalize/examples/browser/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <meta charset="UTF-8">
   5     <title>Globalization Demo</title>
   6     <link type="text/css" rel="Stylesheet" href="browser.css">
   7     <script src="../../lib/globalize.js"></script>
   8     <script src="../../lib/cultures/globalize.cultures.js"></script>
   9     <script src="jquery-1.4.4.js"></script>
  10     <script src="jquery.tmpl.js"></script>
  11     <script src="browser.js"></script>
  12     <script id="formattmpl" type="text/x-jquery-tmpl">
  13         <tr>
  14             <th>Number</th>
  15             {{each formats}}
  16             <th>{{=}}</th>
  17             {{/each}}
  18         </tr>
  19         {{each(i) numbers}}
  20         <tr class="result">
  21             <td>
  22                 ${numbers[i]}
  23             </td>
  24             {{each(j) formats}}
  25             <td>
  26             {{demoFormat(i) j}}
  27             </td>
  28             {{/each}}
  29         </tr>
  30         {{/each}}
  31     </script>
  32     <script id="dateformattmpl" type="text/x-jquery-tmpl">
  33         <tr>
  34             <th>Date</th>
  35             {{each dateFormats}}
  36             <th>{{=}}</th>
  37             {{/each}}
  38         </tr>
  39         {{each(i) dates}}
  40         <tr class="result">
  41             <td>
  42                                 {{=}}
  43             </td>
  44             {{each(j) dateFormats}}
  45             <td>
  46             {{demoDateFormat(i) j}}
  47             </td>
  48             {{/each}}
  49         </tr>
  50         {{/each}}
  51     </script>
  52     <script id="infonumbertmpl" type="text/x-jquery-tmpl">
  53         <legend>Number Formatting</legend>
  54         <table class="info">
  55             <tr>
  56                 <td>Pattern</td>
  57                 <td>${pattern}</td>
  58                 <td>Decimals</td>
  59                 <td>${decimals} (${$data['.']})</td>
  60             </tr>
  61             <tr>
  62                 <td>Grouping</td>
  63                 <td>${$data[',']}</td>
  64                 <td>Group Size</td>
  65                 <td>${groupSizes}</td>
  66             </tr>
  67             <tr>
  68                 <td>Positive</td>
  69                 <td>${$data['+']}</td>
  70                 <td>Negative</td>
  71                 <td>${$data['-']}</td>
  72             </tr>
  73             <tr>
  74                 <td colspan="4" align="center">Percent (symbol = ${percent.symbol})</td>
  75             </tr>
  76             <tr>
  77                 <td>Pattern</td>
  78                 <td>${percent.pattern}</td>
  79                 <td>Decimals</td>
  80                 <td>${percent.decimals} (${percent['.']})</td>
  81             </tr>
  82             <tr>
  83                 <td>Grouping</td>
  84                 <td>${percent[',']}</td>
  85                 <td>Group Size</td>
  86                 <td>${percent.groupSizes}</td>
  87             </tr>
  88             <tr>
  89                 <td colspan="4" align="center">Currency (symbol = ${currency.symbol})</td>
  90             </tr>
  91             <tr>
  92                 <td>Pattern</td>
  93                 <td>${currency.pattern}</td>
  94                 <td>Decimals</td>
  95                 <td>${currency.decimals} (${currency['.']})</td>
  96             </tr>
  97             <tr>
  98                 <td>Grouping</td>
  99                 <td>${currency[',']}</td>
 100                 <td>Group Size</td>
 101                 <td>${currency.groupSizes}</td>
 102             </tr>
 103         </table>
 104     </script>
 105     <script id="infodatetmpl" type="text/x-jquery-tmpl">
 106         <legend>Date Formatting</legend>
 107         <table class="info">
 108             <tr>
 109                 <td>Name</td>
 110                 <td colspan="3">${name}</td>
 111             </tr>
 112             <tr>
 113                 <td>AM</td>
 114                 <td>${AM}</td>
 115                 <td>PM</td>
 116                 <td>${PM}</td>
 117             </tr>
 118             <tr>
 119                 <td>Eras</td>
 120                 <td colspan="3">
 121                     <ol>
 122                     {{each eras}}
 123                     <li>${name} (year offset ${offset})</li>
 124                     {{/each}}
 125                     </ol>
 126                 </td>
 127             </tr>
 128             <tr>
 129                 <td>Days</td>
 130                 <td colspan="3">
 131                     <ol>
 132                         {{each days.names}}
 133                         <li>{{=}}</li>
 134                         {{/each}}
 135                     </ol>
 136                 </td>
 137             </tr>
 138             <tr>
 139                 <td>Days (abbreviated)</td>
 140                 <td colspan="3">
 141                     <ol>
 142                         {{each days.namesAbbr}}
 143                         <li>{{=}}</li>
 144                         {{/each}}
 145                     </ol>
 146                 </td>
 147             </tr>
 148             <tr>
 149                 <td>Days (shortest)</td>
 150                 <td colspan="3">
 151                     <ol>
 152                         {{each days.namesShort}}
 153                         <li>{{=}}</li>
 154                         {{/each}}
 155                     </ol>
 156                 </td>
 157             </tr>
 158             <tr>
 159                 <td>Months</td>
 160                 <td colspan="3">
 161                     <ol>
 162                         {{each months.names}}
 163                         <li>{{=}}</li>
 164                         {{/each}}
 165                     </ol>
 166                 </td>
 167             </tr>
 168             <tr>
 169                 <td>Months (abbreviated)</td>
 170                 <td colspan="3">
 171                     <ol>
 172                         {{each months.namesAbbr}}
 173                         <li>{{=}}</li>
 174                         {{/each}}
 175                     </ol>
 176                 </td>
 177             </tr>
 178             {{if typeof monthsGenitive !== 'undefined'}}
 179             <tr>
 180                 <td>Months (Genitive)</td>
 181                 <td>${monthsGenitive.names}</td>
 182                 <td>Months (Abbr. Gen.)</td>
 183                 <td>${monthsGenitive.namesAbbr}</td>
 184             </tr>
 185             {{/if}}
 186             <tr>
 187                 <td align="center" colspan="4">Patterns</td>
 188             </tr>
 189             {{each(n,v) patterns}}
 190             <tr>
 191                 <td>${n}</td>
 192                 <td colspan="3">{{=}}</td>
 193             </tr>
 194             {{/each}}
 195         </table>
 196     </script>
 197 </head>
 198
 199 <body>
 200 <div id="intro">
 201 This is a demo of the Globalize library. You can follow the discussion and provide feedback on the planning page, here:
 202 <br/><a href="http://wiki.jqueryui.com/Globalization">Globalization wiki page</a>
 203 <br/>
 204 And you can view the source from here or keep up to date with it on github, here:
 205 <br/><a href="https://github.com/jquery/globalize/">Globalize on GitHub</a>
 206 </div>
 207
 208 <div>
 209     Culture:
 210     <select id="cultures"></select>
 211 </div>
 212 <div>
 213     Calendar:
 214     <select id="calendars"></select>
 215 </div>
 216
 217 <div class="pane">
 218     <span class="tab active" id="dates">Dates</span>
 219     <span class="tab inactive" id="numbers">Numbers</span>
 220     <span class="tab inactive" id="info">Info</span>
 221
 222     <div id="datescontent" class="active">
 223         <table id="dateformat" class="results">
 224         </table>
 225         <b>Parsing:</b> Type a date in one of the culture formats:
 226         <input id="parseDate" type="text" /><span id="parseDateResult"></span>
 227     </div>
 228
 229     <div id="numberscontent" class="inactive">
 230         <table id="format" class="results">
 231         </table>
 232         <b>Parsing:</b> Type a number using the culture group and decimal separators:
 233         <input id="parseNumber" type="text" /><span id="parseNumberResult"></span>
 234     </div>
 235
 236     <div id="infocontent" class="inactive">
 237         <p>
 238             Name (in English) "<span id="englishName"></span>"<br />
 239             Name (in Native Language) "<span id="nativeName"></span>".<br />
 240             Is RTL culture? <span id="isRTL"></span>.
 241         </p>
 242         <fieldset id="infonumber" class="info">
 243         </fieldset>
 244         <fieldset id="infodate" class="info">
 245         </fieldset>
 246     </div>
 247
 248 </div>
 249
 250 <div class="pane">
 251
 252 Interesting cultures to preview:
 253 <ul>
 254     <li>ja-JP: Has an optional calendar that has 4 different eras.</li>
 255     <li>th-TH: Standard calendar has a year offset.</li>
 256     <li>te-IN: Numbers have unequal groupings.</li>
 257     <li>ar-SA: Standard calendar is UmAlQura, a non-gregorian based calendar that requires custom conversion logic.
 258     It also supports the Hijri calendar, and a standard gregorian calendar translated into one of <i>4 languages</i>.
 259     </li>
 260 </ul>
 261
 262 </div>
 263
 264 </body>
 265 </html>