首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jMessageBox基于jQuery的窗口插件

作者：min-章_998 | 来源：互联网 | 2022-01-26 16:25
在WinForm程序开发中，经常用MessageBox弹出某些提示，功能虽简单但却非常的实用！而在Web页面中，浏览器也提供了Alert或Confirm等脚本语句用于弹出提示窗口
如下图：
代码如下:

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

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

效果图：
代码如下:

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

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

效果图：
代码如下:

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://xiazai.jb51.net/200912/yuanma/jmessagebox.rar
推荐阅读
author-avatar
min-章_998
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有