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 相关文章推荐
js获取下拉列表的值和元素个数示例
May 07 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 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/02/20 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
打开电脑上的QQ的python代码
2013/02/10 Python
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
python解决字符串倒序输出的问题
2018/06/25 Python
Python日期时间Time模块实例详解
2019/04/15 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
武汉某公司的C#笔试题面试题
2015/12/25 面试题
毕业生幼师求职自荐信
2013/10/01 职场文书
八一演出活动方案
2014/02/03 职场文书
节能标语大全
2014/06/21 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
社保转移委托书范本
2014/10/08 职场文书
成都人事代理协议书
2014/10/25 职场文书
学校师德师风整改措施
2014/10/27 职场文书
英文感谢信范文
2015/01/21 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python