• implementation

last modified February 19, 2009 by ejucovy

Some HTML 

<html>
 <body>
  <div class="i18n" id="i18n_cats">I love cats!</div>  How are <div class="i18n" id="i18n_001">you</div>?
  <ul class="l10n">
    <li><a href="#i18n_cats" lang="en" rev="alternate">I love cats!</a></li>
    <li><a href="#i18n_cats" lang="fr" rev="alternate">J'aime des chats.</a></li>
    <li><a href="#i18n_001" lang="fr" rev="alternate">tu</a></li>
    <li><a href="i18n_001" lang="it" rev="alternate">tu</a></li>
  </ul>
 </body>
</html>

 

Some JavaScript (with JQuery) 

(function($) {
    $.fn.extend({
            ulocalize: function(lang) {
                var obj = $(this);
                obj.find(".i18n").each(function(i, snippet_to_translate) {
                        var i18n_key = $(snippet_to_translate).attr('id');
                        var sel = $("ul.l10n>li>a[lang=" + lang + "][href=" + i18n_key + "]");
                        if( sel.length ) {
                            $(snippet_to_translate).html(sel.html());
                        }
                    });
                return this;
            }
        });
})(jQuery);

$("ul.l10n").hide();
$("html").ulocalize();