一个可以取代jqmodal的弹出框插件资源-CSDN文库

共22个文件

png：6个

js：5个

gif：4个

jqmodal

弹出框插件

wbox

5星 · 超过95%的资源需积分: 13 121 浏览量 2011-02-12 11:51:01 上传评论收藏 172KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

wbox.rar （22个子文件）

wbox

test.html 10KB

tongji.js 12KB

500x400.html 476B

index.php 9KB

mapapi.js 331KB

wbox

titleBG.png 150B

close.png 225B

titleBG1.png 457B

wbox-min.css 1KB

tongji.gif 43B

titleBG0.png 159B

wbox2.gif 49B

loading.gif 3KB

close0.png 623B

wbox.png 121B

wbox.css 1KB

wbox.gif 49B

jquery1.4.2.js 71KB

1.html 499B

wbox.js 8KB

004.jpg 54KB

wbox-min.js 4KB

<!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>jQuery弹出框插件wBox1.0实例 | jQuery plugin wBox Demo | By WYQ</title> <meta name='keywords' content='wBox,jQuery插件,wBox plugin,wBox弹出框,Ajax,iframe,轻量级,灯箱效果'> <meta name='description' content='wBox轻量级的弹出窗口jQuery插件，基于jQuery1.4.2开发，主要实现弹出框的效果，并且加入了很多有趣的功能，比如可img灯箱效果，callback函数，显示隐藏层，Ajax页面，iframe嵌入页面等功能'> <script type="text/javascript" src="jquery1.4.2.js"></script> <script type="text/javascript" src="mapapi.js"></script> <script type="text/javascript" src="wbox.js"></script> <link rel="stylesheet" type="text/css" href="wbox/wbox.css" /> <style type="text/css"> body{ width:920px; margin:0 auto; background-color:#ffffff; } #wBoxInfo{ width:918px; } #wBoxInfo h1{ text-align:center; } #wBoxUL,#wBoxChange{ width:400px; float:left; } #wBoxDemos{ width:918px; float:left; } #wBoxDemos li{ width:450px; float:left; } .code{ margin-left:30px; } h2{ font-size:15px; } .demo { width:360px; } </style> </head> <body> <div id="wBoxInfo"> <h1>wBox Demo</h1> <p style="text-align:center;"> <a href='http://www.js8.in/' title='断桥残雪部落格' target='_blank'>断桥残雪部落格</a> | <a href='http://www.js8.in/wbox-jquery' title='wBox留言' target='_blank'>wBox留言讨论</a> | <a href='http://love.js8.in/' title='断桥残雪爱墙' target='_blank'>断桥残雪爱墙</a> | <a href='http://www.js8.in/wordpress-weather' title='WordPress天气' target='_blank'>WordPress天气</a> | <a href='http://www.js8.in/352.html' title='Follow5插件' target='_blank'>Follow5插件</a> | <a href='http://www.js8.in/projects' title='其他项目' target='_blank'>其他项目</a> </p> <p><b><a href='http://code.google.com/p/jquery-wbox' title='点击下载wBox' target='_blank'>wBox 1.0正式发布！</a></b>——轻量级的弹出窗口jQuery插件，压缩后仅仅3.65Kb，基于jQuery1.4.2开发，主要实现弹出框的效果，并且加入了很多有趣的功能，比如callback函数，显示隐藏层，Ajax页面，iframe嵌入页面……</p> <div style="float:left;width:100%;"><div id="wBoxUL"><ul> <h2>wBox特点</h2> <li>背景透明度可以根据实际情况进行调节</li> <li>可以根据需要添加wBox标题</li> <li>支持callback函数</li> <li>支持html内容自定义</li> <li>支持在wBox显示#ID的内容</li> <li>支持Ajax页面内容</li> <li>支持iFrame</li> <li>支持wBox拖拽功能</li> <li>ESC键，或者在背景上双击即可关闭wBox</li> <li>class为wBox_close点击可以关闭wBox，无论是组装的html，还是隐藏的html，甚至于iframe的内容中的.wBox_close</li> <div style="clear:both;"/></ul></div><div id="wBoxChange"> <h2>新功能</h2> <ul id="wBoxChange"> <li>优化代码~</li> <li>美化界面~</li> <li>默认可拖动，drag为false关闭</li> <li>新增wBox关闭方法：wBox.close()</li> <li>新增wBox打开方法：wBox.showBox()</li> <li>新增wBox定时关闭设置：通过参数timeout设置定时关闭时间</li> <li>新增在不触发click事件的前提，显示wBox，$(s).wBox({show:true})</li> <li>去除灯箱功能（准备做一个单独的jQuery灯箱插件）</li> <li>去除设置窗口位置</li> <div style="clear:both;"/></ul></div></div></div> <h2>wBox演示部分：</h2> <div id='wBoxDemos'> <div><h2>设置名字的wBox</h2><div class="code">代码：<br/><span style="color:red;font-weight:bold;">var wBox</span>=$("#wbox1").wBox({<br/> title: "Test Title Name",<br/> html: "<div class='demo'>点击弹出设置名字的wBox</div>"<br/> });<br/><a href='' id="wbox1">点击弹出设置名字的wBox</a><br/> <button onclick="wBox.showBox()">显示wBox,wBox.showBox()</button><br/>关闭使用<span style="color:red">wBox.close()</span>，显示使用<span style="color:red">wBox.showBox()</span></div></div> <div><h2>背景为透明的wBox</h2><div class="code">代码：<br/> $("#wbox2").wBox({opacity:0,html:"<div class='demo'>点击弹出背景为透明的wBox</div>"});<br/><a href='' id="wbox2">点击弹出2背景为透明的wBox</a></div></div> <div><h2>弹出5秒钟自动关闭wBox</h2><div class="code">代码：<br/>$("#wbox3").wBox({target:"#info",timeout:5000});<br/><a href='' id="wbox3">弹出5秒钟自动关闭wBox</a></div></div> <div><h2>图片wBox</h2><div class="code">代码：<br/>$('.wboxImg').wBox({target:"004.jpg",requestType:"img"});<br/><a class="wboxImg" href="004.jpg">图片wBox</a></div></div> <div><h2>隐藏id为#info的层</h2><div class="code">代码：<br/>$('.wbox').wBox({target:"#info"});<br/><a class="wbox" href="#info">隐藏id为#info的层</a></div></div> <div><h2>不可拖拽的#wBoxUL层</h2><div class="code">代码：<br/>$('#drag').wBox({drag:false,title:'wBox功能简介部分的层',target:"#info"});<br/><a id="drag" href="#wBoxUL">不可拖拽的#wBoxUL层</a></div></div> <div><h2>iframe Google</h2><div class="code">代码：<br/>$("#isFrame").wBox({requestType:"iframe",iframeWH:{width:800,height:400},target:"http://google.com"}<br/><a id="isFrame" href="http://google.com">iframe google</a></div></div> <div><h2>本地iframe 自适用高度</h2><div class="code">代码：<br/>$("#isFrame2").wBox({<br/> requestType: "iframe",<br/> target:"500x400.html"<br/> });<br/><a id="isFrame2" href="500x400.html">本地iframe 自适用高度</a></div></div> <div><h2>Ajax加载内容</h2><div class="code">代码：<br/>$("#ajax").wBox({requestType: "ajax",target:"1.html"});<br/><a id="ajax" href="1.html">ajax 1.html</a></div></div> <div><h2>没有标题的弹出框</h2><div class="code">代码：<br/>$("#noTitle").wBox({noTitle:true,html:"<div class='demo'>这是一个没有标题的wBox<br/>ESC键关闭，或者双击背景关闭</div>"});<br/><a id="noTitle" href="1.html">没有标题的弹出框</a></div></div> <div><h2>利用callback添加地图的wBox</h2><div class="code">代码：<br/>var maplet=null;<br/> oo=false;<br/> var callback=function(){<br/> maplet = new Maplet('myMap');<br/> maplet.centerAndZoom(new MPoint('HEUIDVZVVHUEEU'),8);<br/> maplet.addControl(new MStandardControl({view: {pan:false,ruler: false}})); <br/> }<br/> $("#map").wBox({<br/>title:'<span style="font-size:14px">普加地图</span>--<span style="font-size:12px">可拖拽</span>',<br/>html:"<div id='myMap' style='width:500px;height:400px;'></div>",<br/>callBack:callback,drag:true});<br/><a href='' id="map" >加载地图-利用callback函数</a></div></div> </div> <div style="display:none" id="info" class="demo">这是来自隐藏div#info的消息<a class='wBox_close' href="javascript:void(0);">关闭</a></div> <div id='wBoxDown' style="width:160px;margin:10px auto;"><a style='font-size:18px;color:#5db0e6;font-weight:bold;' href='http://code.google.com/p/jquery-wbox/downloads/list' title='点击下载wBox' target='_blank'>点击此处下载wBox</a></div> <ul id="wBoxUse"> <li>首先下载wBox文件，然后将wBox中的</li> <li>引入wbox.js文件</li> <li>引入wbox.css文件</li> <li><span style="color:red">注意</span>：通过wbox的wBoxURL路径设置图片地址~例如：$("div").wBox({wBoxURL:"wbox/"})</li> </ul> <script type="text/javascript"> var wBox=$("#wbox1").wBox({ title: "Test Title Name", html: "<div class='demo'>点击弹出设置名字的wBox</div>" }); $("#wbox2").wBox({opacity:0,html:"<div class='

评论收藏

内容反馈