jQuery

Traduire un widget jQuery UI

Flattr this!

Aujourd'hui, petite astuce pour traduire un ou plusieurs composants de jQuery UI. Je vois souvent la question revenir sur Developpez.com, site que je fréquente beaucoup. Voilà donc l'astuce dans le cas du DatePicker, mais elle s'applique identiquement à tous les widgets pouvant nécessiter une relocalisation:

Etape #1 : récupérer le bon fichier de langue

Exceptionnellement, l'équipe n'a pas stocké les fichiers de langue sur un de leurs serveurs mais sur un serveur Google.

A vous de choisir quelle langue vous souhaitez dans la liste :

http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/

Etape #2 : inclure le fichier au bon endroit

Le plus important est de ne pas se planter, attention, ça devient compliqué.

Faites donc ça :

<script src="votre_jquery-ui.js" type="text/javascript"></script>
<script src="votre_fichier_de_langue.js"></script>

Certains vont me maudire pour le manque de respect du W3C mais c'est pour l'idée pas pour la qualité là.

Etape #3 : passer à autre chose

Votre widget est traduit, pas besoin d'une étape 3 en fait. Ce qui est cool, c'est que ça marche pareil pour tous les widgets qui nécessiteraient une traduction.

Bonne journée 😉

Flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans jQuery, avec comme mot(s)-clef(s) , , , , . Vous pouvez la mettre en favoris avec ce permalien.
  • http://www.magix-cms.com gtraxx

    Je vois souvent la question revenir sur Developpez.com, site que je fréquente beaucoup.
    Effectivement je suis le dernier en date :)
    Mais je me demande dans le cas d’un « title » et d’un bouton dans le widget dialog qui est souvent défini suivant la pop up comment procéder pour traduire celui-ci, je pense bien entendu à :

    $("#madialogbox").dialog({
    bgiframe: true,
    resizable: false,
    dialogClass: 'blockui',
    minHeight: 200,
    modal: true,
    title: 'Supprimé cette expertise ?',
    buttons: {
    'Delete item': function() {
    $(this).dialog('close');
    },
    Cancel: function() {
    $(this).dialog('close');
    }
    }
    });

  • http://www.mathieurobin.com/ Mathieu

    C’est un débat récurrent aussi. Il suffit d’inclure ce genre de libellés aussi dans le fichier de langue. Ce que je préconise parce que plus logique en plus d’aller en cache navigateur.

  • http://www.magix-cms.com gtraxx

    Ok mais la synthaxe est elle la même ?
    Genre :

    $.dialog.regional[‘fr’] = {
    title: ‘mon title’,
    ‘};
    $.dialog.setDefaults($.dialog.regional[‘fr’]);
    Si c’est correct c’est bien pour une traduction global mais dans le cas ou le title est différent dans chaque dialogue c’est bien plus compliqué à moins de se taper les traductions via une autre méthode …

  • http://www.mathieurobin.com/ Mathieu

    Dans ce cas, pour moi, tu fais appel à un script PHP qui te génère ton javascript de langues à la volée (moche pour le cache) et tu utilises un getText pour les trads. A mon avis et c’est comme ça que je fais.

  • http://www.magix-cms.com gtraxx

    je pense bien partir sur une traduction via php :)
    Par contre pour une traduction global de jquery ui dialog on peut alors faire :
    $.dialog.regional[‘fr’] = {
    title: ‘mon title’,
    ‘};
    $.dialog.setDefaults($.dialog.regional[‘fr’]);
    Car les boutons (comme « envoyer ») revient plusieurs fois, je peux donc le traduire via la méthode ci dessus ?

  • http://www.mathieurobin.com/ Mathieu

    Pourquoi pas. Tu ne fais que rajouter des éléments au tableau des traductions. En soit, rien de révoltant ni d’erroné.

Articles liés