jQuery Mobile globalization plug-in

We can use jQuery globalization functions with the jQuery Mobile globalization plug-in.

There are no official jQuery globalization bundles. Here, the jquery.i18n.properties-1.0.9.js jQuery globalization plug-in is used to demonstrate jQuery globalization functions. The jquery.i18n.properties-1.0.9.js jQuery globalization plug-in can be downloaded from http://code.google.com/tech/jquery-i18n-properties/.

The example application does not show the jQuery globalization string format feature because there is no official globalization string formatting plug-in for jQuery frameworks.

Figure 1. jQuery globalization application

Listing 1: Load Cordova, jQuery mobile, and jQuery globalization plug-in

This listing shows the scripts for loading Cordova, jQuery mobile, and the jquery.i18n.properties-1.0.9.js jQuery globalization plug-in.

<script
  type="text/javascript"
  src="js/CordovaGlobalization.js">
</script>
<script
  type="text/javascript"
  src="js/messages.js">
</script>
<script
  type="text/javascript"
  src="js/jquery.mobile-1.1.1.min.js">
</script>
<script
  type="text/javascript"
  src="js/jquery.i18n.properties-min-1.0.9.js">
</script>

The resource bundle structures in jQuery and Dojo are different. Dojo resource files have the same file name but are in separate folders corresponding to the locale name. jQuery resource files are in one folder but the file names include the locale information. Figure 2 shows the structure of the jQuery resource files.

Figure 2. jQuery resource bundle structure

Listing 2: Load and use resource by jQuery globalization plug-in

This listing shows the jQuery scripts to initialize the globalization plug-in.

function doGlobalization(){
  $.i18n.properties({
    name: 'messages', path: 'bundles/nls/', mode: 'both', // language: 'zh', callback: function(){
      // Main page       $('#globalization_heading').empty().
        append($.i18n.prop('msg_globalization'));
      $('#msg_months').empty().append($.i18n.prop('msg_months'));
      $('#msg_days').empty().append($.i18n.prop('msg_days'));
      $('#msg_formats').empty().append($.i18n.prop('msg_formats'));
      $('#msg_icon').empty().append($.i18n.prop('msg_icon'));
      // Sub page heading
      $('#icon_heading').empty().append($.i18n.prop('msg_icon'));
      $('#months_heading').empty().append($.i18n.prop('msg_months'));
      $('#days_heading').empty().append($.i18n.prop('msg_days'));
      $('#formats_heading').empty().append($.i18n.prop('msg_formats'));
      $('#words_heading').empty().append($.i18n.prop('msg_words'));
      //Back buttons
      var items = $('a[data-rel="back"]');
      $.each(items, function(i){
        $(items[i]).empty().append($.i18n.prop('msg_previous'));
      });
      //Show locale by jQuery i18n plug-in       $('#globalization_footer').empty().
        append($.i18n.prop('msg_footer') + $.i18n.browserLang());
    }
  });
};

Parent topic: Globalization in JavaScript frameworks