基于jQuery的窗口插件：jMessageBox

逃离我推掉我的手 2022-08-02 09:47 148阅读 0赞

# [基于jQuery的窗口插件：jMessageBox][jQuery_jMessageBox] #

在WinForm程序开发中，经常用MessageBox弹出某些提示，功能虽简单但却非常的实用！而在Web页面中，浏览器也提供了Alert或Confirm等脚本语句用于弹出提示窗口，如下图：

![jmessagebox-snap1.png][]   ![jmessagebox-snap2.png][]

但是这些弹出来的窗口的样式非常的单调无法设置，并且窗口标题还根据不同的浏览器显示不同的标题内容，非常的丑陋！对于高审美观的现代人来说，就大打折扣了！

jQuery现在这么流行、这么火，但网上却好像还是没有提供类似于MessageBox的插件（或者只是我没有找到而已），类似的模式窗口插件倒是有一大堆，但这都不是我想要的。没现成的，就只好花点时间将我以前写的基于我的个人JS框架的MessageBox移值过来，也就是本文的JMessageBox。

它的使用非常的简单 CSS + JS搭配使用。CSS是用于定制窗口的样式（具体示例可参考文后的源码包中的CSS样式文件），JS则是负责调用，如下面示例：

**示例1： 简单调用**

jQuery.jMessageBox.show( ' Hello word! ' );

代码很简单吧？是不是找到了MessageBox中的感觉？但这个方法你无法控制标题的内容（其实可以通过改变配置参数来改变标题）和“是”那个按钮的动作，点击它就只是关闭窗口。

效果图：

![jmessagebox-snap3.png][]

**示例2： 普通调用**

jQuery.jMessageBox.show('系统消息', '您好!');

代码也很简单，不是吗？虽然可以改变标题的内容了，但这个方法你还是无法控制“是”那个按钮的动作，点击它就只是关闭窗口。

效果图：

![jmessagebox-snap4.png][]

**示例3： 复杂调用**

![复制代码][copycode.gif]

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('你在点我吗？');  
   \}  
  \}  
 \});

![复制代码][copycode.gif]

在本示例中，我们定义了：窗口的宽度；标题；内容；yes按钮的文字与动作；no按钮的文字与动作；cancel按钮的文字与动作；底部的文字说明与动作。

效果图：

![jmessagebox-snap5.png][]

=============================================================================================

**JMessageBox的参数定义**

1、全局配置参数：jQuery.jMessageBox.setttings

注：全局配置参数只在第一次调用show方法之前或调用简单的show方法时采用！

width :  设置窗口的默认宽度，默认值是350。

title :  设置窗口的默认标题，默认值为空。

bottomText :  设置窗口底部文字说明，默认值为空。

yesButtonText :  yes按钮的文字，默认值为空。

noButtonText :  no按钮的文字，默认值为空。

cancelButtonText :  cancel按钮的文字，默认值为空。

focusOnShow:  是否在显示窗口时将输入焦点置于第一个按钮上，默认值为true。

2、窗口配置参数。

窗口配置参数可在每次调用show方法(如上面的示例3）时传入，用于配置显示的窗口样式。

width :  设置窗口的宽度，如果不设置将取全局配置参数中的width值。

height ：设置窗口的高度，如果不设置将设置为自动（推荐）

top ： 设置窗口显示时的上边距距离。

left ： 设置窗口显示时的左边距距离。

注意：top与left值必须同时设置或不设置。如果不设置（推荐），则默认固定居中显示！

focus ： 是否在显示窗口时将输入焦点置于第一个按钮上，如果不设置将取全局配置参数中的focusOnShow参数。

title ： 设置窗口的标题，如果不设置将取全局配置参数中的title值。而如果值设置为null或空字符串，将隐藏标题栏！

message ： 设置窗口需要显示的内容。 如果不设置，或设置为null或空字符串，则隐藏内容区。

yesButton ： 设置窗口中的yes按钮的文字(text)和点击后处理的事件(click)。如果不设置，窗口不显示yes按钮。

noButton ： 设置窗口中的no按钮的文字(text)和点击后处理的事件(click)。如果不设置，窗口不显示no按钮。

cancelButton ： 设置窗口中的cancel按钮的文字(text)和点击后处理的事件(click)。如果不设置，窗口不显示cancel按钮。

bottom ： 设置窗口底部文字栏的描述文字(text)和点击后处理的事件(click)。如果不设置，窗口不显示底部文字栏。

**版本日记**：

1.0.1 版本： 2009年12月15日发布。

全局配置参数增加focusOnShow，窗口配置参数增加focus参数，用于配置窗口是否需要获取输入焦点。

1.0.0 版本： 2009年12月09日发布

源码与示例下载（示例中带两种风格的窗口样式）：

[/Files/kingthy/jmessagebox.zip][Files_kingthy_jmessagebox.zip] (最新的1.0.1版)

[jQuery_jMessageBox]: http://www.cnblogs.com/kingthy/archive/2009/12/09/jmessagebox.html
[jmessagebox-snap1.png]: http://images.cnblogs.com/cnblogs_com/kingthy/jmessagebox/jmessagebox-snap1.png
[jmessagebox-snap2.png]: /images/20220731/817e83f4539b4849aa7890fe823caf54.png
[jmessagebox-snap3.png]: /images/20220731/0acf473bab884a6ca74c6399c8d96a15.png
[jmessagebox-snap4.png]: /images/20220731/e7ae9bfafe7849849c163ce99b2c3a07.png
[copycode.gif]: /images/20220731/8419f1ef5eff4905a81a8f91af920fe7.png
[jmessagebox-snap5.png]: /images/20220731/5faac3d44157480283264dd26d78aa37.png
[Files_kingthy_jmessagebox.zip]: http://files.cnblogs.com/kingthy/jmessagebox.zip