2012-01-31 23 views
7

là bất kỳ plugin bản địa hóa i18n nào cho Jquery Mobile? Tôi đã tìm kiếm rất nhiều thời gian, nhưng các bản dịch i18n bổ sung cho Jquery không hoạt động chính xác trên JQM. Ví dụ trong một href ... cảm ơn rất nhiều.Plugin bản địa hóa i18n cho Jquery Mobile?

Không ai biết?

Trả lời

3

Tôi đã gặp sự cố tương tự và tôi đã giải quyết sự cố chỉ đơn giản bằng cách sử dụng chức năng Jquery Extend.

Giả sử bạn xác định nguồn lực ngôn ngữ của bạn như sau:

1) Tạo một file tài nguyên với các địa phương hóa mặc định, có lẽ định nghĩa bằng tiếng Anh. Hãy gọi nó là resources.default.js

var MyApp = MyApp || {}; 

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

2) Xác định tài nguyên được bản địa hóa của bạn trong các tệp độc lập, giả sử tiếng Tây Ban Nha. Gọi nó là resources.es.js

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

3) Trên logic máy chủ, quyết định bạn chỉ cần bao gồm bản dịch mặc định trong tiếng Anh, hoặc nếu bạn cần thêm ngôn ngữ khác.

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

4) Tạo trang web của bạn, và thêm các kịch bản để xử lý bao gồm bạn các nguồn lực, mỗi bước 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> 

này nên làm việc cho bạn. EDIT: Xem hoạt động tại đây: http://jsfiddle.net/agarcian/rrDv3/1/

+0

Dường như giải pháp tốt, nhưng tôi không thể truy cập vào localizedResources, chỉ trong dịch mặc định (tiếng Anh) hoạt động. tôi sử dụng công tắc dịch trong tài liệu đã sẵn sàng: $ (document) .ready (function() { \t $ .extend (MyApp.resources, localizedResources); \t}); Và định nghĩa trong đầu sau khi tất cả các kịch bản JS: redrom

+0

Hãy xem điều này: http://jsfiddle.net/agarcian/rrDv3/1/ Nó hoạt động. – agarcian

+0

đến xấu nó không hoạt động off-line – Astronaut

2

Tôi đang sử dụng tập lệnh sau cho dự án của mình. Nó cho phép bạn thay đổi ngôn ngữ "lúc chạy", mà không cần tải lại trang. Kịch bản là "autorun", chỉ cần thêm nó vào cuối trang html. Nó có thể có một số lỗi;)

// 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 
    }; 
} 

Để sử dụng nó, chỉ cần "đánh dấu" một yếu tố html

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

hoặc gọi

Lang.get('unknown_user') 

để có được những chuỗi cục bộ

Để khởi tạo, hãy gọi cho "hàm tạo"

new Lang("ITA", true); 

Để sử dụng nó specifyng một ngôn ngữ,

<script type="text/javascript" src="js/Lang.js?language=ita"></script> 
0

Tôi đang cố gắng với i18next, mà làm việc ok cho hầu hết các vật dụng sau khi phát hành lateste (cho phép để thiết lập một mục tiêu mà các văn bản nên đi).

Tuy nhiên, tôi vẫn không biết cách dịch các thứ được tạo động như bảng bật lên.

Ngoài ra, nó hoạt động rất tốt.

Dưới đây là làm thế nào để thiết lập nó:

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); 
      } 
     } 
     } 

Vì vậy, tôi đang sử dụng một lớp .t nhãn yếu tố để dịch (class tra cứu nhanh hơn dữ liệu thuộc tính).

Tôi đang gọi ở trên trên pagebeforeshow cũng có vẻ như xử lý mọi thứ độc đáo.

Sidenote: Chỉ cần chú ý rằng update_language sẽ thất bại nếu pushstate bị tắt. Cần một regex tốt hơn cho việc này.

0

Bạn có thể thử HTMLed.js của khung công tác. Dễ dàng hơn nhiều. Kiểm tra khung.

đây là link

Các vấn đề liên quan