è un qualsiasi plug-in di localizzazione i18n per Jquery Mobile? Ho cercato molto tempo, ma i plugin di traduzione di I18n per Jquery non funzionavano correttamente su JQM. Ad esempio in un href .. molte grazie.plug-in di localizzazione i18n per Jquery Mobile?
Nessuno lo sa?
Ho avuto lo stesso problema e ho risolto il problema semplicemente utilizzando la funzione Jquery Extend.
Di 'di definire le risorse linguistiche come segue:
1) Creare un file di risorse con la localizzazione di default, presumibilmente definita in inglese. Chiamiamolo resources.default.js
var MyApp = MyApp || {};
MyApp.resources = {
One: "One",
Two: "Two",
Three:"Three"
}
2) Definire le risorse localizzate in file indipendenti, diciamo spagnolo. Chiamatela resources.es.js
var localizedResources = {
One: "Uno",
Two: "Dos",
Three:"Tres"
}
3) Sul logica del server, può decidere che è necessario includere solo le traduzioni di default in caso di inglese, o se avete bisogno di qualunque altra lingua si fa un include.
<script src="resources.es.js"> </script>
4) Crea la tua pagina web, e aggiungere script per gestire il vostro inserimento delle risorse, per ogni passo 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>
Questo dovrebbe funzionare per voi. EDIT: vederlo in azione qui: http://jsfiddle.net/agarcian/rrDv3/1/
Sto utilizzando il seguente script per i miei progetti. Ti permette di cambiare la lingua "in fase di esecuzione", senza ricaricare la pagina. Lo script è "autorun", basta aggiungerlo alla fine della pagina html. Si potrebbe avere dei bug;)
// 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
};
}
Per usarla, solo "segno" di un elemento HTML
<h1 uilang="unknown_user"></h1>
o chiamare
Lang.get('unknown_user')
per ottenere la stringa localizzata
Per inizializzare, chiamare il "costruttore"
new Lang("ITA", true);
Per usarlo nato specificando una lingua,
<script type="text/javascript" src="js/Lang.js?language=ita"></script>
Si potrebbe anche provare un PhoneGap plug-in nel caso in cui si sta scrivendo un app mobile ibrida. Ecco il link: https://github.com/ljbotero/phonegap-plugins/tree/master/Android/Localization
che sto cercando con i18next, che funziona bene per la maggior parte i widget dopo il rilascio Lateste (che permette di impostare un obiettivo di cui il testo dovrebbe andare).
Tuttavia, non riesco ancora a tradurre le cose generate dinamicamente come la tabella popup.
A parte questo funziona molto bene.
Ecco come configurarlo:
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);
}
}
}
Così sto usando una classe .t per etichettare gli elementi per la traduzione (classe di ricerca è più veloce di data-attributi).
Sto chiamando sopra su pagebeforeshow che sembra anche gestire tutto bene.
Sidenote: Appena notato il update_language non riuscirà se pushstate è disabilitato. Hai bisogno di una regex migliore per questo.
Puoi provare il framework HTMLed.js. È molto più facile. Scopri il framework.
Ecco l'link
Sembra buona soluzione, ma non riesco ad accedere a localizedResources, solo nella traduzione di default (inglese) funziona. Ho usato interruttore traduzione nel documento pronto: $ (document) .ready (function() {$ \t .extend (MyApp.resources, localizedResources); \t}); e traduzione in testa dopo tutti gli script JS: – redrom
Si prega di dare un'occhiata a questo: http://jsfiddle.net/agarcian/rrDv3/1/ Funziona. – agarcian
in caso contrario non funziona off-line – Astronaut