让jquery plugin boxy支持国际化

最新推荐文章于 2019-07-04 20:04:36 发布

最新推荐文章于 2019-07-04 20:04:36 发布 · 135 阅读

文章标签：

#jQuery #Google #ViewUI

js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何为Boxy插件添加国际化支持，通过修改源代码实现了按钮文案的自定义，并支持不同语言环境。

今天比较了几个jquery dialog的plugin并且看了一些网上的评论，最终决定使用boxy[url]http://onehackoranother.com/projects/jquery/boxy/[/url]。但是在使用的过程中发现Boxy.confirm和Boxy.alert的按钮的文案是无法修改的。就这一点感觉这个插件稍微有一点欠缺，其实对于confirm和alert着两个WINDOW上按钮也应该没有什么特殊的需求，在中国无非是“确认”、“取消”，对于老外无非是"ok"、"cancel"，所以我就想着让这个插件支持国际化。
在JS中进行国际化的支持我参考了rapid-validation [url]http://code.google.com/p/rapid-validation/[/url]
新增了I18nUtils


I18nUtils = {
 	getLanguage : function() {
 		var lang = null;
		if (typeof navigator.userLanguage == 'undefined')
			lang = navigator.language.toLowerCase();
		else
			lang = navigator.userLanguage.toLowerCase();
 		return lang;
 	},
 	getMessageSource : function() {
 		var lang = I18nUtils.getLanguage();
 		var messageSource = Boxy.messageSource['zh-cn'];
		if(Boxy.messageSource[lang]) {
			messageSource = Boxy.messageSource[lang];
		}
		return messageSource;
 	},
 	getMessage:function(key){
 		var messageSource=I18nUtils.getMessageSource();
 		return messageSource[key];
 	}
}

增加国际化消息的定义


Boxy.messageSource={};
Boxy.messageSource['en-us']={
	confirmBtn:{'true':'OK','false':'Cancel'},
	alertBtn:{'true':'OK'}
}
Boxy.messageSource['zh-cn']={
	confirmBtn:{'true':'确定','false':'取消'},
	alertBtn:{'true':'确定'}
}

Boxy.messageSource['en']=Boxy.messageSource['en-us'];

修改Boxy.confirm和Boxy.alert的源代码


alert: function(message, callback, options) {
    	var i18nMsg=I18nUtils.getMessage('alertBtn');
        return Boxy.ask(message, i18nMsg, callback, options);
    },
confirm: function(message, after, options) {
        var i18nMsg=I18nUtils.getMessage('confirmBtn');
        return Boxy.ask(message,i18nMsg, function(response) {
            if (response == 'true') after();
        }, options);
    }

[b]经过这个修改使用Boxy.confirm当用户点击了“确定”或者"OK"后都会回调外部方法。当使用Boxy.alert时用户点击了“确定”或者"OK"返回给回调函数的值都是'true'[/b]修改后的js代码见附件