by zhangxinxu from http://www. 一、前面的些说明关于之前版本的zxxbox jQuery弹出框插件,您可以狠狠地点击这里。当初写弹出框插件纯粹是学习的目的,另外就是临时应付个人站点上的一些弹框应用。所以写得比较简单,业余,并没有期望谁会去使用它。但是,后来,一些同行的留言以及相关的交流发现,还是有人使用此轻便,简洁的弹框效果的。 但是,一方面由于自己之前的水平比较稚嫩,同时,对插件的逻辑没有很好的梳理。所以,之前版本的弹出框插件,虽然也能用,但是,功能确实有效,不能给内置的弹框按钮添加回调方法,不支持Ajax加载,而且,还有些小的隐晦的bug等,在调用上也是有点不利索的。所以,这几天,我就把之前的zxxbox弹出框插件重新写了下。虽然弹框的UI界面还是更之前的一样,但是,内部的逻辑,调用,以及参数等都有所不同,可以说是从底层核心都改变了。所以,只是简单的以插件更新的方式放在之前的文章下,则会有有力使不出的感觉。故,另起一篇文章,对新版的zxxbox弹出框插件参数,使用等细致地讲解下,希望对有需要的同行有所帮助。 2.0版本的一些不足,如不支持Ajax,回调能力弱,无动画,扩展性等都得到了不同程度的修复。当然,功能的增加也使得之前插件的优点,像是调用简单,文件轻巧等优点则被弱化了,现在文件(含更新注释和内容注释)版本为11.4K,比之前大了3~4K。此插件相比之前最大的优点就是方法调用更加专业了,这个会在后面具体体现出来。还有一个不可忽略的优点,与之前版本一样,没有图片,兼容性也不错,只需调用一个JavaScript文件就可以了。 二、下载以及demo下载 demo实例页面 三、最基本使用方法介绍1. 调用jQuery库以及zxxbox插件文件,如下代码: <script type="text/javascript" src="http://ajax./ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript" src="http://www./study/js/jquery.zxxbox.3.0.js"></script> 2.调用zxxbox()方法,最简单的用法如下: $("#test").zxxbox(); 有别于之前的版本,3.0+的zxxbox插件还可以使用如下方法调用: $.zxxbox($("#test")); 与上面代表产生的效果一模一样,其表示的含义是:id为”test”的元素被装载到盒子中并在页面的中央显示出来了。 四、插件API参数使用与说明jQuery弹出框插件 zxxbox 参数使用说明
一些补充的说明:
五、插件内置弹窗方法使用说明此版本zxxbox内置四种弹框方法,为loading加载中提示框,ask和remind对话框(询问和提醒)对话框,还有就是Ajax加载弹框。这里,首先讲讲前面版本已有的ask和remind对话框。 首先是提示(remind)对话框,类似于浏览器内置的alert()方法,调用方法如下: $.zxxbox.remind(message, callback, options); $.zxxbox.remind()方法有三个参数,其中,只有第一个参数message是必须的,为提示的内容,可以是单纯的文字,也可以是一段HTML字符串;第二个参数是点击确定按钮触发的回调函数,在回调函数中,$(this)对象就是指的“确定”这个按钮的jQuery对象,this对象就是指“确定”这个按钮的DOM对象,所以,您可以使用$(this).attr(“disabled”, “disabled”);禁用当前按钮的,点击此按钮后,默认会隐藏弹框,所以你无需再写让弹框隐藏的代码;至于第三个参数options,就是zxxbox的一系列参数了,控制弹框的相关显示的。 然后是询问(ask)对话框,类似于浏览器内置的confirm()方法,使用如下: $.zxxbox.ask(message, sureCall, cancelCall, options); 虽然ask方法与remind类似,但是细节上还有不少需要注意的。同样,message参数必须,为字符串。sureCall为点击“确定”按钮后触发的方法,与remind()的“确定”按钮不同,此处的sureCall方法默认无任何脚本,如果不写方法,点击后是没有任何反应的,也就是说sureCall方法是必需的;但是cancelCall不同,其点击后,默认就会关闭弹框;options就没有什么好说的了。 需要注意的:ask()或是remind()方法一旦调用了options参数,如果callback, sureCall, cancelCall参数都用不到,必须使用null占位。此占位使用可以在demo页面第一部分见到,大致如下: $("#test3").click(function(){
$.zxxbox.ask("确认改变页面的背景色为天蓝色", function(){
$("body").css("background-color", "azure");
$.zxxbox.hide();
}, null, {
title: "友情提示"
});
});
再下面就是loading提示对话框:其UI基本上固定,只有一个options参数,其默认隐藏标题栏。调用方法如下: $.zxxbox.loading(); 上述代码的效果如下: 最后就是Ajax加载弹框,其使用就像是泡美眉,看上去有难度,一试就会发现很简单。 $.zxxbox.ajax(uri, params, options); 此Ajax弹窗(其实zxxbox所有的Ajax操作)都使用的是get方法,uri参数表示地址,必须非不可的参数;params为传递的参数。如果设置了options参数,同时params又是个空,请使用{}空对象占位,否则会出问题的。弹框的尺寸会根据获得的内容自动计算的。 还有一类Ajax的使用是通过a标签,利用其href属性。例如: 六、zxxbox其他一些API应用编程接口说明上面的四个API方法只要是与显示弹窗相关,zxxbox中还有许多其他的弹框方法。 其中,我估计应该的最广泛,也是最重要的就是关闭弹框的方法,如下: 其他些API方法如下: 加上上面单独说明的 七、补充:样式分离(2011-05-26)弹框的CSS样式是集成在JS插件脚本中,这样子可以让调用非常方便,这也可以说是这个插件的优点的,只需调用一个JS文件,没有其他CSS链接或是图片请求,可谓小巧方便。但是,没有什么东西是可以适用于任何场所的,今天又有人提议可以把脚本中的CSS提出来,方便扩展。我之前也有类似打算,正好今天有空,就花了点时间把脚本和样式分离了下。 与上面不同,你需要再额外调用一个CSS文件,JS脚本文件名称也变了,参见如下代码: <link rel="stylesheet" href="http://www./study/css/zxxbox.css" type="text/css" /> JS文件 <script type="text/javascript" data-src="http://img3.douban.com/js/packed_jquery.min4.js"></script> <script type="text/javascript" src="http://www./study/js/jquery.zxxbox-nocss.js"></script> //zxx:由于google一直不稳定,所以jQuery库的链接就改成取豆瓣地址了。 插件的使用还是跟上面一模一样,为示意分离后的效果,我做了个超简单的示例demo,您可以狠狠地点击这里:zxxbox样式分离之demo 八、欢迎交流、纠错,提交bug之前zxxbox插件的不断改进就是得益于广大同行的建议与提醒。所以,这里,也是非常希望您可以提出您自己想法,可以通过评论,或是去专门的交流讨论页面进行交流。 虽然自己尽可能的设想到每一张可能的情况,毕竟就一个人,而且只是个很普通的人,所以,一定还存在不少我为预见的bug,欢迎提出来,不甚感谢。时间仓促,如果文中有什么表述不准确的地方或是错误,欢迎指正。 原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.] (本篇完) 如果您觉得本文的内容对您的学习有所帮助,您可以支付宝(左)或微信(右): 相关文章
|
|