1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<title>jQuery.i18n.properties: Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.i18n.properties.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection">
<script type="text/javascript">
// load I18N bundles
jQuery(document).ready(function() {
loadBundles('pt_PT');
// configure language combo box
jQuery('#lang').change(function() {
var selection = jQuery('#lang option:selected').val();
loadBundles(selection != 'browser' ? selection : null);
jQuery('#langBrowser').empty();
if(selection == 'browser') {
jQuery('#langBrowser').text('('+jQuery.i18n.browserLang()+')');
}
});
// load files just for display purposes...
jQuery('h4').each(function() {
var file = 'bundle/' + jQuery(this).text();
var code = jQuery(this).next().next('code');
jQuery.get(file, function(data) {
data = data.replace(/\n/mg, '<br/>');
code.html(data);
});
});
// ... and configure links to show/hide them
jQuery('a.toggle').bind('click', function() {
jQuery(this).next('code').slideToggle();
return false;
});
});
function loadBundles(lang) {
jQuery.i18n.properties({
name:'Messages',
path:'bundle/',
mode:'both',
language:lang,
callback: function() {
updateExamples();
}
});
}
function updateExamples() {
// Accessing values through the map
var ex1 = 'msg_hello';
var ex2 = 'msg_complex'; var ex2P = 'John';
var ex3 = 'msg_url'; var ex3P = 'solution_1';
var ex4 = 'inexistent_key';
var ex5 = 'msg_multi_placeholder'; var ex5P1 = 'beautiful'; var ex5P2 = 'fishing';
var ex6 = 'msg_multi_placeholder_corrected'; var ex6P1 = 'beautiful'; var ex6P2 = 'fishing';
jQuery('#mapExamples')
.empty()
.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex1+'\')</code> --> '+jQuery.i18n.prop(ex1)+'</li>')
.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex2+'\',\''+ex2P+'\')</code> --> '+jQuery.i18n.prop(ex2, ex2P)+'</li>')
.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex3+'\',\''+ex3P+'\')</code> --> '+jQuery.i18n.prop(ex3, ex3P)+'</li>')
.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex4+'\')</code> --> '+jQuery.i18n.prop(ex4)+'</li>')
.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex5+'\',\''+ex5P1+'\',\''+ex5P2+'\')</code> --> '+jQuery.i18n.prop(ex5, ex5P1, ex5P2)+'</li>')
.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex6+'\',\''+ex6P1+'\',\''+ex6P2+'\')</code> --> '+jQuery.i18n.prop(ex6, ex6P1, ex6P2)+'</li>');
// Accessing values through a JS variable
var ex21 = 'msg_hello';
var ex22 = 'msg_world';
var ex23 = 'msg_complex'; var ex23P = 'John';
var ex24 = 'inexistent_key';
jQuery('#varExamples')
.empty()
.append('<li><code class="i18n">'+ex21+'</code> --> '+eval(ex21)+'</li>')
.append('<li><code class="i18n">'+ex22+'</code> --> '+eval(ex22)+'</li>')
.append('<li><code class="i18n">'+ex23+'(\''+ex23P+'\')</code> --> '+eval(ex23+'(\''+ex23P+'\')')+'</li>')
.append('<li><code class="i18n">'+ex24+'</code> --> <small><i>(browser would report a missing JS symbol)</i></small></li>');
}
</script>
</HEAD>
<BODY>
<h2>jQuery.i18n.properties :: Demo</h2>
<div class="left">
<h3>I18N Bundles</h3>
<h4>Messages.properties</h4>
<a href="#" class="toggle">[toggle contents]</a>
<code class="files"></code><br/>
<h4>Messages_pt.properties</h4>
<a href="#" class="toggle">[toggle contents]</a>
<code class="files"></code><br/>
<h4>Messages_pt_PT.properties</h4>
<a href="#" class="toggle">[toggle contents]</a>
<code class="files"></code><p/><p/><p/>
<h3>Examples</h3>
<div id="langBox">
Language:
<select id="lang">
<option value="browser">Indicated by the browser</option>
<option value="en">en</option>
<option value="pt">pt</option>
<option value="pt_PT" selected>pt_PT</option>
</select>
<span id="langBrowser"></span>
</div>
<h4>Accessing values through the map</h4>
<ul id="mapExamples"></ul>
<h4>Accessing values through a JS variable</h4>
<ul id="varExamples"></ul>
</div>
</BODY>
</HTML>
|
