jMessageBox 基于jQuery的窗口插件


Posted in Javascript onDecember 09, 2009

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

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

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

示例1: 简单调用

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

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

效果图:
jMessageBox 基于jQuery的窗口插件
示例2: 普通调用

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

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

效果图:
jMessageBox 基于jQuery的窗口插件
示例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 基于jQuery的窗口插件
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.3water.com/200912/yuanma/jmessagebox.rar

Javascript 相关文章推荐
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
jquery 可排列的表实现代码
Nov 13 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
jQuery 开天辟地入门篇一
Dec 09 #Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 #Javascript
jquery 事件执行检测代码
Dec 09 #Javascript
为指定元素增加样式的js代码
Dec 09 #Javascript
javascript setTimeout和setInterval 的区别
Dec 08 #Javascript
javascript OFFICE控件测试代码
Dec 08 #Javascript
JavaScript Cookie 直接浏览网站分网址
Dec 08 #Javascript
You might like
让PHP支持断点续传的源码
2010/05/16 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
详解jQuery中的事件
2016/12/14 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
Python Sleep休眠函数使用简单实例
2015/02/02 Python
python计算两个地址之间的距离方法
2018/06/09 Python
学习和使用python的13个理由
2019/07/30 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
会计电算化专业毕业生自荐信
2013/12/20 职场文书
成品仓管员工作职责
2013/12/29 职场文书
美国留学经济担保书
2014/05/20 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
辞职信标准格式
2015/02/27 职场文书
毕业典礼致辞
2015/07/29 职场文书
《西门豹》教学反思
2016/02/23 职场文书
导游词之包公祠
2019/11/25 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS