плагин локализации i18n для Jquery Mobile? - PullRequest
7 голосов
/ 31 января 2012

есть ли плагин локализации i18n для Jquery Mobile?Я искал много времени, но плагины переводов i18n для Jquery не работают правильно на JQM.Например, в хрэф .. большое спасибо.

Никто не знает?

Ответы [ 5 ]

3 голосов
/ 14 февраля 2012

У меня была та же проблема, и я решил ее, просто используя функцию Jquery Extend.

Допустим, вы определяете свои языковые ресурсы следующим образом:

1) Создайте файл ресурсов с локализацией по умолчанию, предположительно определенной на английском языке. Давайте назовем это resources.default.js

var MyApp = MyApp || {};

MyApp.resources = {
    One: "One",
    Two: "Two",
    Three:"Three"    
}

2) Определите ваши локализованные ресурсы в независимых файлах, скажем, на испанском. Назовите это resources.es.js

var localizedResources = {
    One: "Uno",
    Two: "Dos",
    Three:"Tres"    
}

3) На вашей логике сервера, решите, что вам нужно включить только переводы по умолчанию в случае английского языка, или если вам нужен какой-либо другой язык, включите.

<script src="resources.es.js"> </script> 

4) Создайте свою веб-страницу и добавьте сценарии для управления включением ресурсов на шаге 3.

<html>
<head>
</head>
<body>

​<h1>Welcome to my App</h1>
<p>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​Welcome to this test app</p>

<button>Click me</button>​



<script src="resources.default.js"> </script> 


// The server decided we needed Spanish translations.
<script src="resources.es.js"> </script> 


<script type="text/javascript">
    //Extend the translations into the resources object.

    $.extend(MyApp.resources, localizedResources);

    $(window).ready(function(){
        $('button').click(function(){
            alert(MyApp.resources.One);    
        });    
    });

</script>  
</body>

Это должно сработать для вас. РЕДАКТИРОВАТЬ: Смотрите это в действии здесь: http://jsfiddle.net/agarcian/rrDv3/1/

2 голосов
/ 14 февраля 2012

Я использую следующий скрипт для своих проектов.Позволяет менять язык «во время выполнения», не перезагружая страницу.Сценарий «автозапуск», просто добавьте его в конце HTML-страницы.У него могут быть некоторые ошибки;)

    // AutoStar!
// Grab the parameters from my url, and initialize myself! FUGOOOOO
(function __lang_init_wrapper()
{
    var scriptSrc = $('script[src*=Lang]').attr('src');
    var myParams = parseParams(scriptSrc);

    new Lang(myParams.language.toUpperCase(), true);

})();

/**
 * Thanks to: http://wowmotty.blogspot.com/2010/04/get-parameters-from-your-script-tag.html
 * @param n
 * @param s
 */
function gup(n,s){
n = n.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
var p = (new RegExp("[\\?&]"+n+"=([^&#]*)")).exec(s);
return (p===null) ? "" : p[1];
}

/**
 *
 * @param language The language to use
 * @param replaceText If true, replace all the occurency marked with placemark {lang=<key>}
 */
function Lang(language, replaceText)
{

    var Languages =
    {
        ENG:
        {
            ok: 'ok'
            ,yes: 'yes'
            ,no: 'no'
            ,unknown_user: 'Unknown user'
            ,too_soon: "It's not time, yet..!"
        }

        ,ITA:
        {
            yes: 'si'
            ,unknown_user: 'Utente sconosciuto'
            ,too_soon: "Pazienta ancora un po'..!"
        }
    }

    // GENERAL SETTINGS

    var LANG_CURRENT = language;

    var LANG_DEFAULT = 'ENG';

    /**
     * All the html elements with this attributes are translated on the fly
     */
    var LANG_ATTRIBUTE_NAME = "uilang"


    /**
     * key è la chiave da usare nell'oggetto LANG
     * @param key
     */
    this.get = function(key)
    {
        return Languages[LANG_CURRENT][key] || Languages[LANG_DEFAULT][key];
    }

    /**
     * Cerco tutti gli elementi che hanno una certa classe
     */
    this.searchAndReplace = function()
    {
        var me = this;
        var divs = $('*[' + LANG_ATTRIBUTE_NAME + ']');

        $.each(divs,function(indx,item)
        {
            item = $(item);
            item.text(me.get(item.attr(LANG_ATTRIBUTE_NAME)));
        });

    }

    this.setLanguage = function(language, replaceText)
    {
        LANG_CURRENT = language;
        if(replaceText){
            this.searchAndReplace();
        }
    }

    if(replaceText){
        this.searchAndReplace();
    }

    // Returns a localized instance of language
    Lang = {
        get: this.get
        ,searchAndReplace: this.searchAndReplace
        ,setLanguage: this.setLanguage
    };
}

Чтобы использовать его, просто "пометьте" html-элемент

<h1 uilang="unknown_user"></h1>

или позвоните

Lang.get('unknown_user')

, чтобы получитьлокализованная строка

Для инициализации вызовите «конструктор»

new Lang("ITA", true);

Чтобы использовать его для указания языка,

<script type="text/javascript" src="js/Lang.js?language=ita"></script>
0 голосов
/ 23 мая 2013

Вы можете попробовать фреймворк HTMLed.js. Это намного проще. Оформить заказ рамки.

вот ссылка

0 голосов
/ 18 февраля 2013

Я пытаюсь использовать i18next , который работает нормально для большинства виджетов после последнего выпуска (что позволяет установить цель, по которой должен идти текст).

Однако я все еще не знаю, как перевести динамически сгенерированные вещи, такие как всплывающая таблица.

Кроме того, он работает очень хорошо.

Вот как это сделать:

 lang : function (page) {
        var update_language,
          translate = function (page) {
          page.find('.t').i18n();
          },
          set_lang = function (language) {
            var set_icon;
            switch (language) {
              case "de-DE":
                set_icon = "DE";
              break;
              case "fr-FR":
                set_icon = "FR";
              break;
              default:
                set_icon = "EN";
              break;
            }
            $(".setIcon").parent(".ui-btn").find(".ui-icon")
              .removeClass().addClass('ui-icon ui-shadow ui-icon-lang '+set_icon);
          }
        if (fauna.i18set === undefined) {
          i18n.init({
            lng: 'en-EN',
            load: 'current',
            detectLngQS: 'lang',
            fallbackLng: false,
            resGetPath: '../lang/__lng__/__ns__.json',
            ns: 'gen',
              debug: true,
            // , useLocalStorage: true
            // , localStorageExpirationTime: 86400000 // in ms, default 1 week
          }, function () {
            translate(page);
            set_lang(i18n.lng());
          });
          fauna.i18set = true;
        } else {
          update_language = $.mobile.path.parseUrl( window.location.href )
            .hash.replace( /.*lang=/, "" );
          if (update_language !== "") {
            i18n.setLng(update_language, function() {
              translate(page);
              set_lang(i18n.lng());
            });
          } else {
            translate(page);
          }
        }
      }

Поэтому я использую класс .t для маркировки элементов для перевода (класс поиска работает быстрее, чем атрибуты данных).

Я звоню по вышеупомянутому на pagebeforeshow, который также, кажется, справляется со всем хорошо.

Sidenote: только что заметил, что update_language не будет работать, если pushstate отключен. Для этого нужно лучшее регулярное выражение.

0 голосов
/ 10 июля 2012

Вы также можете попробовать плагин PhoneGap, если вы пишете приложение Hybrid Mobile. Вот ссылка: https://github.com/ljbotero/phonegap-plugins/tree/master/Android/Localization

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...