在 jQuery Mobile 中实现多语言支持（2）具体步骤
|
- UID
- 1066743
|
在 jQuery Mobile 中实现多语言支持（2）具体步骤
具体步骤接下来我们用 jQueryMobile 制作一个登陆界面，对前文提到的四个步骤进行具体解释。每个步骤还会包含示例的效果截屏图。
- 创建映射表前文提到映射表可以是 XML 格式或者 JSON 格式，以方便 jQuery 读取。在我们的例子中，我们将推荐使用 JSON 格式，这样不仅方便读取，而且方便在 JavaScript 程序中作为对象直接使用。
在我们的例子中，我们将同时支持中文和英文语言。所以我们会创建两份映射表，分别对应中文和英文。事实上你也可以把所有语言放入一个映射表，但是出于管理的方便性和防止映射表过于庞大，我们推荐使用不同的映射表文件对应不同的语言。
在登录界面，我们需要显示以下的中英文文字内容：
- 登陆界面的标题，比如：登录 / Login
- 登录界面的介绍，比如：请输入您的用户名和密码/ Please provide your username and password
- 用户名标签，比如：用户名 / User Name
- 密码标签，比如：密码 / Password
- 登录按钮的标签，比如：登录 / Login
这样的话我们的映射表将相应显示以下的内容：
清单 1.中文映射表 text_cn.json1
2
3
4
5
6
7
8
9
10
| {
"Login" : {
"Title" : "登录",
"Description" : "请输入您的用户名和密码",
"Lable_User_Name" : "用户名",
"Label_Password" : "密码",
"Label_Login_button" : "登录",
"Tip_User_Name" : "手机号或者电子邮箱地址"
}
}
|
清单 2.英文映射表 text_en.json1
2
3
4
5
6
7
8
9
10
| {
"Login" : {
"Title" : "Login",
"Description" : "Please provide your username and password",
"Lable_User_Name" : "User Name",
"Label_Password" : "Password",
"Label_Login_button" : "Login",
"Tip_User_Name" : "Mobile number or email address"
}
}
|
注意两份映射表的 key 必须保持一致。
- 插入新的标签首先我们将使用 jQuery Mobile 的创建一个简单的登录界面，主要由 2 个输入框部件和 1 个按钮部件组成，其中还包括了页眉和介绍内容。HTML 的内容如下：
页眉
1
2
3
| <div data-role="header">
<h1>Title</h1>
</div>
|
介绍内容
1
2
3
| <div>
<p>Description</p>
</div>
|
用户名和密码输入框
1
2
3
4
5
6
7
8
9
10
| <div>User Name Label</div>
<div data-role="fieldcontain" class="ui-hide-label">
<input type="text" name="name" id="txt_userID"
data-clear-btn="true" value=""/>
</div>
<div>Password Label</div>
<div data-role="fieldcontain" class="ui-hide-label">
<input type="password" name="password" id="txt_password"
data-clear-btn="true" value=""/>
</div>
|
登录按钮
1
2
3
4
| <a href="#" id="btn_login" data-role="button" data-icon="arrow-r"
data-iconpos="right" data-inset="true" data-inline="true">
Login Button
</a>
|
我们希望这个登录界面以弹出框的方式显示，所以在 JavaScript 中还要做以下工作：
1
2
3
| $(document).on("pageinit", "#pop_login", function(event) {
$("#pop_login").dialog();
});
|
最后显示的界面如下
图 1.登陆界面 1 现在我们需要给所有出现文字的地方插入一个标签，表示该 HTML 的内容需要被映射表中的真实内容所替换，我们将使用langID作为标签，你可以自行选择喜欢的标签名。
比如替换标题为：
1
2
3
| <div>
<p langID="Login.Description">Description</p>
</div>
|
我们所使用的标签内容为 Login.Title, 表示这个 HTML 的内容为映射表中 Login 这个对象下面的 Title 对象的内容。
给其他的 HTML 插入对应的标签，这个步骤就算完成了。
- 插入映射表的文字内容前面我们已经创建了映射表，并且用标签的方式把映射表和 HTML 对应了起来。接下来这个步骤就要从映射表中读取内容并且替换对应 HTML 中的内容。前文中已经提到，替换的工作必须在 pageinit 之前完成，否则会导致 jQuery 的某些部件无法正常显示。有兴趣的读者可以自己尝试一下，如果在 pageinit 中替换，登录的按钮会无法正常显示。这里限于篇幅，我们不再进行尝试，而是直接在 pagebeforecreate 中进行替换。
首先我们要读取映射表文件，假设我们要显示中文：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| $(document).on("pagebeforecreate", "#pop_login", function(event) {
$.ajax({
beforeSend : function() { $.mobile.loading("show"); },
type: "GET",
url : "language/text_cn.json",
dataType : "json",
contentType : "application/json; charset=utf-8",
async : false,
cache : false,
success : function(json) {
$.mobile.loading("hide");
language = json;
replaceHTML();
}
});
});
|
这里要注意几个点：
- async 必须设置成 false，因为我们希望在映射文件读取成功之后再进行下一步。如果 async 是 true，在映射文件读取完成之前 jQueryMobile 就开始创建各个部件，同样会导致无法正常显示。
- 读取成功之后我们把映射表里面的内容赋值给一个全局变量：language，因为在 pageinit 的里面我们也许还要修改一些动态的内容，但是不希望再次去读取一遍映射表。
- replaceHTM()这个函数会负责把 HTML 里面所有带有 langID 标签项的内容替换成映射表里的内容。具体做法如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
| function replaceHTML(){
$("*").each(function(index, domNode){
var currLanguage = language;
var langID = $(domNode).attr("langID");
if(langID){
var langIDSlipt = langID.split(".");
for(var i=0; i<langIDSlipt.length; i++){
currLanguage = currLanguage[langIDSlipt];
}
$(domNode).html(currLanguage);
}
});
}
|
到目前为止，所有的静态 HTML 内容都已经被替换，我们的界面会变成这样：
图 2.登陆界面 2 - 处理动态内容经过前面 3 个步骤，看起来似乎我们的界面已经完成了，只要修改一下读取的映射表文件，我们就能正确显示所需要的语言。但是事实上前面 3 步只能显示静态内容，对于动态的内容仍然无法显示。
接下来我们就要给这个界面加入动态内容。我们会给用户名这个输入框部件加入提示信息。
1
2
3
4
5
| <div data-role="fieldcontain" class="ui-hide-label">
<input type="text" name="name" id="txt_userID"
placeholder="Placeholder"
data-clear-btn="true" value=""/>
</div>
|
由于提示信息是属于输入框部件的一个标签，而不是内容，我们无法通过前面所用的方法来替换这个提示信息。这就需要我们在 JavaScript 的程序中进行手动替换。
1
| $("#txt_userID").attr("placeholder", language.Login.Tip_User_Name);
|
这样这个提示信息被替换成了正确的内容，我们的最终登录界面显示如下：
图 3.登陆界面 3
|
|
|
|
|
|
