Question

I am working on a multilingual iOS/Android app and use a xml file to get my translations. The translation function looks for a i18n-xxx class and replaces the text for html elements with that class with the text from the xml file.

Example:

Html:

<a href="url.html" data-role="button" class="i18n-my-button">Button</a>

In the xml file:

<translation id="i18n-my-button">
   <en>Button</en>
   <sv>Knapp</sv>
</translation>

Javascript:

...
$(xml).find("translation").each(function() {
   ...
   var id = $(this).attr("id"); //i18n-my-button
   var translation = $(this).find("sv").text();  //Knapp
   ...
   $("." + id).find("span.ui-btn-text").text(translation);
});

With this approach I am able to translate almost any html element like buttons, radio buttons and check boxes. But I am failing to translate flip toggle switches.

This is how I would like it to be:

<select name="slider" id="flip-a" data-role="slider">
    <option value="off" class="i18n-off">Off</option>
    <option value="on" class="i18n-on">On</option>
</select>

I want to be able to translate “Off” and “On” to “Av” and “På” using the same function as with the other html elements. The problem is jQuery Mobile translates the simple select to a huge block of code, and I have not yet identified what element I should translate and how to do it.

Any suggestions?

Answer 1

You could hook into the create event fired when a slider is styled/created by JQM.

$( ".selector" ).slider({
   create: function(event, ui) { 
      //Do translation here
   }
});