基于jQuery的窗口插件:jMessageBox
|
在WinForm措施开拓中，常常用MessageBox弹出某些提醒，成果虽简朴但却很是的适用！而在Web页面中，赏识器也提供了Alert或Confirm等剧本语句用于弹出提醒窗口，如下图：
可是这些弹出来的窗口的样式很是的单调无法配置，而且窗口问题还按照差异的赏识器表现差异的问题内容，很是的丑恶！对付高审雅观的当代人来说，就大打折扣了！ jQuery此刻这么风行、这么火，但网上却仿佛照旧没有提供相同于MessageBox的插件（可能只是我没有找到罢了），相同的模式窗口插件倒是有一大堆，但这都不是我想要的。没现成的，就只好花点时刻将我早年写的基于我的小我私人JS框架的MessageBox移值过来，也就是本文的JMessageBox。 它的行使很是的简朴 CSS + JS搭配行使。CSS是用于定制窗口的样式（详细示例可参考文后的源码包中的CSS样式文件），JS则是认真挪用，如下面示例： 示例1： 简朴挪用 jQuery.jMessageBox.show('Hello word!');代码很简朴吧？是不是找到了MessageBox中的感受？但这个要领你无法节制问题的内容（着实可以通过改变设置参数来改变问题）和“是”谁人按钮的举措，点击它就只是封锁窗口。 结果图：
示例2： 平凡挪用 jQuery.jMessageBox.show('体系动静', '您好!');代码也很简朴，不是吗？固然可以改变问题的内容了，但这个要领你照旧无法节制“是”谁人按钮的举措，点击它就只是封锁窗口。 结果图：
示例3： 伟大挪用 jQuery.jMessageBox.show({width : 350, title : '体系动静', message : '是否继承下一步操纵?', yesButton : { text : '是', click : function(){ jQuery.jMessageBox.hide(); } }, noButton : { text : '否', click : function(){ jQuery.jMessageBox.hide(); } }, cancelButton : { text : '打消', click : function(){ jQuery.jMessageBox.hide(); } }, bottom : { text : '声名: 假如你想继承操纵,请点击"是"!', click : function(){ alert('你在点我吗？'); } } }); 在本示例中，我们界说了：窗口的宽度；问题；内容；yes按钮的笔墨与举措；no按钮的笔墨与举措；cancel按钮的笔墨与举措；底部的笔墨声名与举措。 结果图：
JMessageBox的参数界说 1、全局设置参数：jQuery.jMessageBox.setttings 注：全局设置参数只在第一次挪用show要领之前或挪用简朴的show要领时回收！ width : 配置窗口的默认宽度，默认值是350。 title : 配置窗口的默认问题，默认值为空。 bottomText : 配置窗口底部笔墨声名，默认值为空。 yesButtonText : yes按钮的笔墨，默认值为空。 noButtonText : no按钮的笔墨，默认值为空。 cancelButtonText : cancel按钮的笔墨，默认值为空。 2、窗口设置参数。 窗口设置参数可在每次挪用show要领(如上面的示例3）时传入，用于设置表现的窗口样式。 width : 配置窗口的宽度，假如不配置将取全局设置参数中的width值。 height ：配置窗口的高度，假如不配置将配置为自动（保举） top ： 配置窗口表现时的上边距间隔。 left ： 配置窗口表现时的左边距间隔。 留意：top与left值必需同时配置或不配置。假如不配置（保举），则默认牢靠居中表现！ title ： 配置窗口的问题，假如不配置将取全局设置参数中的title值。而假如值配置为null或空字符串，将潜匿问题栏！ message ： 配置窗口必要表现的内容。 假如不配置，或配置为null或空字符串，则潜匿内容区。 yesButton ： 配置窗口中的yes按钮的笔墨(text)和点击后处理赏罚的变乱(click)。假如不配置，窗口不表现yes按钮。 noButton ： 配置窗口中的no按钮的笔墨(text)和点击后处理赏罚的变乱(click)。假如不配置，窗口不表现no按钮。 cancelButton ： 配置窗口中的cancel按钮的笔墨(text)和点击后处理赏罚的变乱(click)。假如不配置，窗口不表现cancel按钮。 bottom ： 配置窗口底部笔墨栏的描写笔墨(text)和点击后处理赏罚的变乱(click)。假如不配置，窗口不表现底部笔墨栏。 源码与示例下载（示例中带两种气魄威风凛凛的窗口样式）：jmessagebox.zip 作者博客：http://www.cnblogs.com/kingthy/ （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
