weebox(基于jquery的弹窗插件) 用法详解

分类:Javascript| 发布:佚名| 查看: | 发表时间:2014/7/23

weebox是一个基于jquery的弹窗插件,一开始只是拿了一个 jQuery Modal Dialog 来用,但那位任兄写的支持太有限了,于是就着手修改代码,但改到后面,发现基本上看不到原来的代码了,只有css样式中几张背景图留下来了,我就改了个名字。


它含有以下特性:

.支持多层弹窗

.支持单一弹窗,即同ID弹窗在打开第二次使用时,前一个将被自动关闭,参考boxid选项

.支持自定义样式,参考boxclass选项

.解决IE中SELECT的问题,使用了bgiframe功能

.支持拖动效果,通过draggable设置,参考draggable选项

.支持内容来源方式Ajax, Selector(jQuery的), Text(直接内容)

.支持多种弹窗类型,参考type选项

.支持自动关闭,参考timeout选项

.支持遮照效果(modal弹窗),参考modal选项

.支持不同的显示位置,中间或者以某个元素为参照物,参考position选项

.支持弹窗打开前(onopen)、点确认(onok)、点取消(oncancel)、关闭窗口(onclose)等的回调函数

.支持打开后,重新设置标题(setTitle)、内容(setContent)、按钮等方法

.支持只在弹窗内查找元素的方法:find(selector)

.支持打开和关闭时的动画效果,参考animate、showAnimate,hideAnimate选项

使用前需包含以下jquery.js、bgiframe.js、weebox.js、wee.css文件

基本用法举例如下: $.weeboxs.open('#testbox', {title: 'hello world', width:
400, height: 200});

$.weeboxs.open('The operation failed.',{
onopen:function(){alert('opened!');},
onclose:function(){alert('closed!');}, onok:function(){alert('ok');
$.weeboxs.close();} });

$.weeboxs.open('/modules/test/testsession.php', {contentType:'ajax'});

$.weeboxs.open('hello world');

$.weeboxs.open('The operation failed.',{type:'error'});

$.weeboxs.open('The operation failed.',{type:'wee'});

$.weeboxs.open('The operation failed.',{type:'success'});

$.weeboxs.open('The operation failed.',{type:'warning'});

$.weeboxs.open('Autoclosing in 5 seconds.', { timeout: 5 });

以下是默认选项:

boxid: null, //设定了此值只后,以后在打开同样boxid的弹窗时,前一个将被自
动关闭

boxclass: null, //给弹窗设置其它的样式,用此可以改变弹窗的样式

type: 'dialog', //弹窗类型,目前有dialog,error,warning,success,wee,prompt,
box六种

title: '', //弹窗标题

width: 0, //弹窗宽度,不设时,会自动依据内容改变大小

height: 0, //弹窗高度(注意是内容的高度,不是弹窗的高度)

timeout: 0, //自动关闭的秒数,设置此值后,窗口将自动关闭

draggable: true,//是否可以拖拽

modal: true, //是否显示遮照

overlay: 75, //遮照透明度

focus: null, //弹窗打开后,焦点移到什么元素上,默认移到取消按钮到

position: 'center',//弹窗打开后的默认为中间,设置为element时,需要设置
trager选项,

trigger: null, //显示位置的参照元素,为一个元素id

showTitle: true,//是否显示标题

showButton: true,//是否显示按钮,包括确定和取消

showCancel: true, //是否显示取消按钮

showOk: true, //是否显示确定按钮

okBtnName: '确定',//"确定"按钮名称

cancelBtnName: '取消',//"取消"按钮名称

contentType: 'text',//内容获取方式,目前有三种text,selector,ajax

contentChange: false,//为selector时

clickClose: false, //点击不在弹窗上时,是否关闭弹窗

zIndex: 999,//默认弹窗的层

animate: false,//效果显示

onclose: null, //弹窗关闭时触发的函数

onopen: null, //弹窗显示前触发的函数, 此时内容已经放入弹窗中,不过还没有显
示出来

onok: null //点击确定按钮触发的函数

插件下载地址:基于jquery的弹窗插件weebox

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/javascript/weebox.html