Cordys HTML5 多语言代码解读

最新推荐文章于 2025-09-20 00:34:39 发布

原创最新推荐文章于 2025-09-20 00:34:39 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

Cordys 同时被 3 个专栏收录

70 篇文章

订阅专栏

HTML

10 篇文章

订阅专栏

HTML5

3 篇文章

订阅专栏

本文详细介绍了使用Cordys平台进行多语言设计的思路，并通过jQuery和Ajax技术实现场景中对象的本地化翻译，确保用户界面在不同语言环境下的一致性和用户体验。

Cordys 多语言设计思路

<label for="inputName" data-translatable="true">
	User Name
</label>

如果页面上需要翻译则添加自定义标签。 data-translatable='true' 则可以利用JQuery 找到所有的对象$("data-translatable='true'")

 var selector = "[data-translatable='true']";
 $(selector).each(function () {
	var $this = $(this);
	var label_name=$this.text().trim();//得到label name，然后利用label name去匹配，把对应的值找出来。
	$this.text(getMessage($this.text().trim()));
 }

 //利用Ajax读取本地文件
 $.ajax({
	type: "GET",
	url: "translation/html5sdk/sdkmessagebundle_zh-CN.xml",
	async: true,
	cache: true,
	success : function(response){
		res=response;
	}
});

//将本地文件转为Json数组
$.cordys.json.xml2js(res)
//找到某个对象
dictionary=$.cordys.json.find($.cordys.json.xml2js(res), "dictionary");
//
var self = this;
this.path = path;
this.dictionary = dictionary;
this.getMessage = function () {
	var id = arguments[0],
	label = null,
	ttext = "";
	if (self.dictionary) {
		label = $.cordys.json.find(self.dictionary, "@textidentifier", id);
	}
	ttext = label ? (label[language] ? (label[language].text || label[language]) : id) : id;
	if (arguments.length > 1) {
		var args = Array.prototype.slice.call(arguments).slice(1);
		ttext = ttext.replace(/\{(\d+)\}/g, function () {
				return typeof(args[arguments[1]]) !== "undefined" ? args[arguments[1]] : arguments[0];
			});
	}
	return ttext;
}