Geek asks and answers

Processing a multilingual language with jQuery only

I am using jQuery in my web application and I am wondering what is the best way to handle multilingualism in this context.
I thought to create a file like:

label["login"]["fr"]="Connection"
label["login"]["en"]="Login"

Once the file is uploaded, I will do (for each label) a:

$('#login').text(label["login"][selected_language]);

In HTML, I would use:

<a href="login.html"><span id="login"></span></a>

Is this the right thing to do?

+3
source share
4 answers

I think it would be better if you used the class and the invented attribute instead of id to control several languages, because if you have the same text twice in the same page identifier, it would break it, because he is unique.

You can try this approach:

$(function() {
  $(".is_ml").each(function() {
    $(this).html(label[$(this).attr("ml_label")]["en"])
  })

});

, , class= "is_ml" ml_label = "label", , , "login". ?

+6

, <span>:-) <a> "id".

, , , . , , (, ..).

, , , JavaScript, .

+2

salut luc.

, - - : P jQuery, HTML . :

: http://jsfiddle.net/mHAHz/1/ ( fr de, )

var translation, translate;

translation = { //store your translations in a object.
    "fr": {
        "div > a:eq(0)": "un lien", // this way you are flexible (don't need to use abd id for all you contents you want to translate)
        "div h1"       : "un title",
        "p"            : "du contenu"
    },
    "de": {
        "div > a:eq(0)": "ein Link",
        "div h1"       : "ein Titel",
        "p"            : "eigen Inhalt"
    }
}

translate = function( lng,translationObj ){ //check if lng is provided and if it acually exists in the object.
    if( lng && translationObj[lng] ) {
        return $.each(translationObj[lng], function(k,v){
             $(k).text(v); 
        });
    }else{
        return $.error("make the language (lng) exists in your object");
    }
}

translate("fr", translation);

, , , , ... ( : http://alainbenoit.com/)

+1

( β„–6), , , ml_label language , , .

JavaScript:

var label = {};
label['fr'] = {};
label['en'] = {};

label["fr"]["login"]="Connection";
label["en"]["login"]="Login";
label["fr"]["firstname"]="PrΓ©nom";
label["en"]["firstname"]="First Name";
label["fr"]["lastname"]="Nom de Famille";
label["en"]["lastname"]="Last Name";

$(function() {
  $(".is_ml").each(function() {
    $(this).html(label["en"][$(this).attr("ml_label")])
  })
});

HTML:

<label class="is_ml" ml_label="login">Login</label>
<label class="is_ml" ml_label="firstname">First Name</label>
<label class="is_ml" ml_label="lastname">Last Name</label>
0

More articles:


All Articles