i18nJQuery/index.html at master · leonavas/i18nJQuery · GitHub

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
<HTML>
<HEAD>
	<TITLE>Titulo</TITLE>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" language="JavaScript" src="js/jquery.i18n.properties-min-1.0.9.js"></script>
	<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';

			jQuery('#mapExamples')
				.empty()
				.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex1+'\')</code>  -->  '+jQuery.i18n.prop(ex1)+'</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>');

			$("[i18n]").filter(function() {
  		    	var value = $(this).attr('i18n'); //= this.id.match(/(i18n_).*/);
				jQuery($(this)).empty().append(jQuery.i18n.prop(value));
			});
		}

      </script>
   </HEAD>

   <BODY>
      <h2>jQuery.i18n.properties Example</h2>

      <div class="left">
        <h3 i18n="sub_header"></h3>
        <h4 i18n="header"></h4>

        <h4>Messages_pt.properties</h4>
        <a href="#" class="toggle" i18n="toggle_contents"></a>
        <code class="files"></code><br/>


        <h3 i18n="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" selected >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><button i18n="botao"></button></div>
      </div>
   </BODY>
</HTML>