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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
jQuery Ajax全解析
Feb 13 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 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小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
php的一个简单加密解密代码
2014/01/14 PHP
php中this关键字用法分析
2016/12/07 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
javascript模块化简单解析
2016/04/07 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
python format 格式化输出方法
2018/07/16 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
python获取Linux发行版名称
2019/08/30 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
python判断正负数方式
2020/06/03 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
倡议书格式
2014/08/30 职场文书
个人投资合作协议书
2014/10/12 职场文书
医学生自荐信范文
2015/03/05 职场文书
班级班风口号大全
2015/12/25 职场文书
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL