`

让jquery plugin boxy支持国际化

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

经过这个修改使用Boxy.confirm当用户点击了“确定”或者"OK"后都会回调外部方法。当使用Boxy.alert时用户点击了“确定”或者"OK"返回给回调函数的值都是'true'修改后的js代码见附件
分享到:
评论
2 楼 SeanHe 2009-07-26  
我测试的时候都是正常的,所有的JS文件都是用UTF-8的格式保存。
1 楼 anmo 2009-07-26  
谢谢。经测试,直接使用字符出现了乱码,我将中文字符转义后,使用正常,如下修改:

'true':'\u786e\u5b9a','false':'\u53d6\u6d88'

相关推荐

    jquery-plugin-boxy.zip

    "jquery-plugin-boxy.zip"这个压缩包包含了一个jQuery插件,名为Boxy,它是专门用于实现弹框效果的。在网页设计中,弹框是一种常见的交互元素,用来展示警告信息、用户确认对话或提供额外的功能区域。 Boxy插件的...

    jquery-plugin-boxy

    总结,`jQuery-plugin-boxy` 是一个强大且灵活的弹出层解决方案,其多样化的功能、易于定制的特性以及良好的兼容性,使其成为开发者在构建网页时不可或缺的工具之一。通过熟练掌握和运用 Boxy,可以提升网站的交互性...

    jQuery_boxy弹出层对话框插件中文演示及讲解

    在作者提供的中文讲解页面(http://www.zhangxinxu.com/study/200911/jQuery-plugin-boxy.html)中,你可以找到关于boxy插件的详细介绍和示例。页面左侧有固定定位的导航栏(IE6为绝对定位),方便用户快速跳转到...

    jquery 从入门到精通 demo示例下载

    3. `jquery-plugin-boxy.zip`: 这个文件很可能包含了一个jQuery插件——Boxy。Boxy是一个对话框插件,它提供了弹窗功能,可以用于提示、确认或展示详细信息。学习这个插件的使用,可以提升你对jQuery扩展和插件开发...

    jquery弹出层选择器

    2. **初始化插件** - 在页面加载完成后,使用jQuery的选择器找到目标元素,然后调用`.boxy()`方法创建弹出层。 ```javascript $('#element').boxy(options); ``` 3. **设置选项** - `options`参数是一个对象,...

    50款非常棒的 jQuery 插件分享

    16. Boxy JQuery Plugin:创建模态对话框和弹出窗口,提高用户交互。 17. Sticky Notes:模拟便签,创建可移动、可编辑的便签元素。 18. Simple Effects Plugins:提供多种简单但实用的动画效果。 19. Dialog JQuery...

    30个最佳jQuery Lightbox效果插件分享

    10. **Visual jQuery LightBox**:通过可视化编辑器创建和管理Lightbox实例,简化了配置过程。 11. **prettyPhoto**:具有社交媒体分享功能,支持多种媒体格式,包括HTML5视频。 12. **PIROBOX**:提供3D旋转效果...

    弹出层和菜单样式

    本文将深入探讨几种常见的JS弹出层对话框和菜单样式,并结合提供的压缩包文件,如`MenuTree.rar`、`demo.zip`、`jquery-plugin-boxy`和`Dialog`,来解析实现这些功能的技术细节。 首先,让我们了解JS弹出层对话框。...

    模仿智联职位选择,地区选择Js插件

    压缩包中的“jquery-plugin-ExtendedBoxy”可能是一个扩展版的Boxy插件,它是一个轻量级的对话框插件,可以用于创建弹出式窗口,非常适合用于实现职位和地区的筛选组件。 具体步骤如下: 1. **数据结构**:首先...

Global site tag (gtag.js) - Google Analytics