jquery弹窗轻量级wbox_vue弹窗组件简单demo资源-CSDN文库

共20个文件

png：6个

js：4个

html：3个

需积分: 7 109 浏览量 2011-10-28 15:29:58 上传评论收藏 182KB ZIP 举报

**jQuery弹窗插件——WBox** 在网页开发中，弹窗是一种常见的交互设计元素，用于展示信息提示、用户确认、图片预览等多种用途。jQuery作为一款强大的JavaScript库，提供了丰富的插件支持，使得创建弹窗变得更加简单。本文将详细介绍一款名为"WBox"的jQuery弹窗插件，它以其开源、免费和轻量级的特点，深受开发者喜爱，尤其适用于快速构建网站中的各种提示和交互功能。 **一、WBox的特点** 1. **轻量级**：WBox设计时注重代码优化，体积小，加载速度快，不会对页面性能造成过大影响，尤其适合对性能要求较高的网站。 2. **开源免费**：WBox遵循开源协议，允许自由使用、修改和分发，这为开发者提供了极大的灵活性和可定制性。 3. **多功能**：WBox不仅可以用于文字提示，还可以轻松处理图片上传、预览等功能，满足多样化的需求。 4. **易于集成**：只需引入jQuery库和WBox插件文件，通过简单的API调用，即可快速实现弹窗功能，降低了开发门槛。 **二、WBox的使用方法** 1. **引入依赖**：确保页面已经引入了jQuery库，然后引入WBox的CSS和JS文件。例如： ```html <link rel="stylesheet" href="path/to/wbox.css"> <script src="path/to/jquery.js"></script> <script src="path/to/wbox.js"></script> ``` 2. **基本调用**：在需要弹出弹窗的地方，使用jQuery选择器选取元素，并调用`.wbox()`方法： ```javascript $("#myElement").wbox({ content: "这是弹窗的内容", type: "alert" // 可选：alert, confirm, prompt, iframe, image, ajax等 }); ``` 3. **自定义配置**：WBox提供了丰富的配置选项，如标题、按钮文本、宽高、位置、动画效果等，可以根据实际需求进行个性化设置。例如： ```javascript $("#myElement").wbox({ title: "提示", content: "这是一个带有标题的弹窗", buttons: { ok: { text: "确定", click: function() { /* 自定义操作 */ } } }, width: 400, height: 200 }); ``` **三、WBox的扩展应用** 1. **图片预览**：WBox支持图片预览功能，只需要传入图片URL即可： ```javascript $("#imagePreview").wbox({ type: "image", content: "path/to/image.jpg" }); ``` 2. **Ajax加载内容**：可以动态从服务器获取数据填充弹窗： ```javascript $("#ajaxCall").wbox({ type: "ajax", url: "path/to/your/api", complete: function(data) { // data是服务器返回的内容 } }); ``` 3. **自定义事件处理**：WBox提供了一系列的事件回调，如打开、关闭、按钮点击等，方便扩展功能： ```javascript $("#myElement").on("wbox.open", function() { console.log("弹窗已打开"); }).on("wbox.close", function() { console.log("弹窗已关闭"); }); ``` **四、总结** WBox作为一款优秀的jQuery弹窗插件，以其简洁的API和强大的功能，为开发者提供了快速构建弹窗功能的解决方案。无论是简单的提示还是复杂的交互，WBox都能胜任，是网页开发者的得力工具。在实际使用中，结合自己的项目需求，合理利用WBox的特性，可以大大提高开发效率，提升用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

wbox.zip （20个子文件）

wbox

css

wbox

wbox-min.css 1KB

wbox.css 1KB

wbox.css.bak 1KB

images

wbox

close0.png 623B

wbox.gif 49B

titleBG0.png 159B

close.png 225B

wbox2.gif 49B

titleBG.png 150B

titleBG1.png 457B

wbox.png 121B

loading.gif 3KB

004.jpg 54KB

index.html 10KB

wbox

wbox-min.js 4KB

mapapi.js 331KB

jquery1.4.2.js 71KB

wbox.js 8KB

500x400.html 476B

1.html 499B

<!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="./js/wbox/jquery1.4.2.js"></script> <script type="text/javascript" src="./js/wbox/mapapi.js"></script> <script type="text/javascript" src="./js/wbox/wbox.js"></script> <link rel="stylesheet" type="text/css" href="./css/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"

评论收藏

内容反馈