【发布时间】：2012-01-31 16:49:42
【问题描述】：
是否有适用于 Jquery Mobile 的 i18n 本地化插件？我搜索了很多时间，但是用于 Jquery 的 i18n 翻译插件在 JQM 上无法正常工作。例如在一个href..非常感谢。
没人知道吗？
【问题讨论】：
标签： internationalization jquery-mobile
【发布时间】：2012-01-31 16:49:42
【问题描述】：
我也遇到过同样的问题，我只是通过使用 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/
【讨论】：
-
看起来不错的解决方案，但我无法访问本地化资源，只能在默认翻译（英语）中使用。我在准备好的文档中使用了翻译开关： $(document).ready(function () { $.extend(MyApp.resources,localizedResources); });并在所有 JS 脚本之后定义：
-
resources.default.js 的脚本标签？我可以把它放在头上，还是必须放在身体里？
-
您可以将其放置在文档中允许的任何位置。这只是一个脚本标签，因此它遵循标签的 html 规则。
我正在为我的项目使用以下脚本。它允许您在“运行时”更改语言，而无需重新加载页面。该脚本是“自动运行”，只需将其添加到 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>
【讨论】：
如果您正在编写混合移动应用程序，您也可以尝试使用 PhoneGap 插件。这是链接： https://github.com/ljbotero/phonegap-plugins/tree/master/Android/Localization
【讨论】：
我正在尝试使用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 上拨打上述电话，这似乎也可以很好地处理所有事情。
旁注：刚刚注意到如果 pushstate 被禁用，update_language 将失败。为此需要一个更好的正则表达式。
【讨论】：
您可以尝试框架 HTMLed.js。 它要容易得多。检查框架。
这里是link
【讨论】：