电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 在 jQuery Mobile 中实现多语言支持（2）具体步骤 [打印本页]

作者: look_w 时间: 2018-10-19 20:47 标题: 在 jQuery Mobile 中实现多语言支持（2）具体步骤

具体步骤接下来我们用 jQueryMobile 制作一个登陆界面，对前文提到的四个步骤进行具体解释。每个步骤还会包含示例的效果截屏图。

创建映射表前文提到映射表可以是 XML 格式或者 JSON 格式，以方便 jQuery 读取。在我们的例子中，我们将推荐使用 JSON 格式，这样不仅方便读取，而且方便在 JavaScript 程序中作为对象直接使用。
在我们的例子中，我们将同时支持中文和英文语言。所以我们会创建两份映射表，分别对应中文和英文。事实上你也可以把所有语言放入一个映射表，但是出于管理的方便性和防止映射表过于庞大，我们推荐使用不同的映射表文件对应不同的语言。
在登录界面，我们需要显示以下的中英文文字内容：

登陆界面的标题，比如：登录 / Login
登录界面的介绍，比如：请输入您的用户名和密码/ Please provide your username and password
用户名标签，比如：用户名 / User Name
密码标签，比如：密码 / Password
登录按钮的标签，比如：登录 / Login

这样的话我们的映射表将相应显示以下的内容：
清单 1.中文映射表 text_cn.json

1
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.json

1
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

到目前为止，所有的静态 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

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)