繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jMessageBox 基于jQuery的窗口插件
- Javascript
- 自己开发Dojo的建议框架
- js每次Title显示不同的名言
- 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
- 无限级别的菜单（侧拉菜单）
- 点选TOP后并不是直接跳到页顶的，而是滚动上去
- js下拉菜单中自动信息轮换播放
- 英文首字母全大写的js实现脚本
- 实例区别onClick和onDBClick两事件方法
- 改变文本框字体颜色的js脚本
- js星空效果代码
- 判断li是否有样式的js代码
- 文本框点击时文字消失，失去焦点时文字出现
- 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开
- 右下角弹出窗口效果代码
- JS控制对象移动效果
- 验证用户是否修改过页面的数据的实现方法
- Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
- 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
- EXT富客户端后台管理系统 初步代码
- 不同浏览器javascript变量作用域的处理方法
Javascript 中的 jMessageBox 基于jQuery的窗口插件
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 393 ::
收藏到网摘: n/a
在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 : {
click : function(){
jQuery.jMessageBox.hide();
}
},
cancelButton : {
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)。如果不设置，窗口不显示底部文字栏。
源码与示例下载（示例中带两种风格的窗口样式）：
http://sh.ruanchen.com/00912/yuanma/jmessagebox.rar
评论 (0) All
