开发者社区> 吞吞吐吐的> 正文

基于jQuery的窗口插件:jMessageBox

简介:
+关注继续查看

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

 

   

 

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

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

 

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

 

示例1: 简单调用

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

 

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

效果图:

 

 

示例2: 普通调用

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

 

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

效果图:

 

 

示例3: 复杂调用

复制代码
 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('你在点我吗?');
   }
  }
 });
复制代码

 

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

效果图:

 

 

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

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 (最新的1.0.1版)


本文转自Kingthy博客园博客,原文链接:http://www.cnblogs.com/kingthy/archive/2009/12/09/jmessagebox.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JBox弹框插件应用实例代码
1、页面JBox引用   2、页面js代码 function Photo(Id) { var option = { id: 'Photo', top: '1...
888 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14744 0
ImageLightbox.js – 响应式的图片 Lightbox 插件
  ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景。如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩展插件,更改设置或者使用一些很有用的功能函数。
886 0
jQuery ColorBox插件使用小记
ColorBox算的上是jQuery一款很不错的弹窗插件了。最近的一个项目中也用到了它,尤其是它的iframe功能感觉比Ajax要简化许多。 使用方法大概有两种,一种是页面加载完成后为链接绑定事件。 ColorBox打开// 对应的JavaScript脚本为$(function() {$(‘#colorboxLink’).colorbox(‘/*这里可以写一些Colorbox的配置*/’);}); 还有一种方法就是在函数中调用,这也是我用的比较多的一种。
909 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18998 0
4852
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载