wBox是一款轻量级的弹出窗口插件
wBox是一款轻量级的弹出窗口插件,压缩后仅仅3.65Kb,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如callback函数,显示隐藏层,Ajax页面,iframe嵌入页面……
1:可以根据需要添加wBox标题,用title定义,如title没定义,将显示wbox.js里title设置的值; 2:可以用html定义wBox内容,如果没有定义,将显示wbox.js里html设置的值,默认为空; 3:用timeout可以设置wBox显示的时间; 4:通过noTitle:true可以设置弹出的wBox标题不显示; 5:通过requestType可以设置返回的图片、ajax加载其它页面的内容或iFrame 并显示于wbox中; 6:所有class为wBox_close的点击可以关闭wbox; 7:默认可拖动,drag为false关闭 8:新增wBox关闭方法:wBox.close() 9:新增wBox打开方法:wBox.showBox()
实例:需要注意的是要先下载Wbox插件,下载地址为:http://code.google.com/p/jquery-wbox/downloads/list,下载完成后需将wbox.js、jquery库和wbox.css三个文件引入,详细用法见下例,可去掉注释逐个尝试效果······
index.html文件内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <link href="wbox/wbox.css" rel="stylesheet" /> <script language="javascript" src="jquery1.4.2.js"></script> <script language="javascript" src="wbox.js"></script> </head> <body> <script> $(document).ready(function(){ //可以根据需要添加wBox标题,用title定义,如title没定义,将显示wbox.js里title设置的值; //可以用html定义wBox内容,如果没有定义,将显示wbox.js里html设置的值,默认 /* var wBox=$("#show_box").wBox({title: "My name is Adam Li.",html: "我的中文名叫李汉团!"}); */ //用timeout可以设置wBox显示的时间 //var wBox = $("#show_box").wBox({html:"My name is Adam",timeout:"5000"}); //通过noTitle:true可以设置弹出的wBox标题不显示 //var wBox = $("#show_box").wBox({noTitle:true,html:"My name is Adam",timeout:"5000"}); //通过requestType可以设置返回的图片、ajax加载其它页面的内容或iFrame 并显示于wbox中; //var wBox = $("#show_box").wBox({noTitle:true,requestType:"img",target:"loading.gif"}); //var wBox = $("#show_box").wBox({noTitle:true,requestType:"ajax",target:"1.html"}); /* varwBox=$("#show_box").wBox({ noTitle:true,requestType:"iframe",iframeWH:{width:"800px",height:"200px"},target:"http://www.baidu.com" }); */ //var wBox = $("#show_box").wBox({noTitle:true,requestType:"iframe",iframeWH:{width:800,height:800},target:"1.html"}); //所有class为wBox_close的点击可以关闭wbox; var wBox = $("#show_box").wBox({noTitle:true,requestType:"iframe",target:"1.html"}); $("#but").click(function(){ wBox.showBox(); }) }) </script> <div id="show_box"></div> <input type="button" id="but" value="show box" /> </body> </html>
1.html文件内容:
<body> <div>My name is Adam Li,中文名李汉团!</div> </body>
如果开发环境是cakephp的话,使用wBox也很容易,只需把wbox.css放入到app/webroot/css中,把wbox.js和jquery库文件放入到app/webroot/js中,然后再在视图文件引入即可,当然也可以在layout中引入。