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中引入。                        

你可能感兴趣的:(wBox的使用笔记)