弹出层之1:JQuery.Boxy (一) 使用介绍


Posted in Javascript onOctober 06, 2011

弹出层之1:JQuery.Boxy (一) 使用介绍
1、下载并修改插件
可以在官网上下载到最新版(http://plugins.jquery.com/files/boxy-0.1.4.zip),到我写这些文字的时候最新版为0.1.4版,下载解压后有1个主要的js文件:jquery.boxy.js;1个css文件;还有4个图片用于构成弹出层的4个圆角。将文件引入系统中,修改boxy.css,将下面的图片路径修改为项目中实际的位置,如果设置不对会引起图片失效,那时就难看了。

/* 将此处的图片修改为相对于css文件的图片文件的路径 */ 
.boxy-wrapper .top-left { background: url('../images/boxy-nw.png'); } 
.boxy-wrapper .top-right { background: url('../images/boxy-ne.png'); } 
.boxy-wrapper .bottom-right { background: url('../images/boxy-se.png'); } 
.boxy-wrapper .bottom-left { background: url('../images/boxy-sw.png'); } 
/* 注意:下面的路径必须使用绝对路径或url的形式 */ 
/*绝对路径以‘/'开始表示域名,使用时要注意虚拟目录,没有可以省略,/域名/图片在站点中的路径*/ 
/*url则是指http://www.xxx.com/xxx.png的形式出现*/ 
.boxy-wrapper .top-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-nw.png'); } 
.boxy-wrapper .top-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-ne.png'); } 
.boxy-wrapper .bottom-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-se.png'); } 
.boxy-wrapper .bottom-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-sw.png'); }

2、将插件引用到页面中
<script src="http://www.cnblogs.com/Contents/JS/jquery-1.5.js" type="text/javascript"></script> 
<link href="boxy.css" rel="stylesheet" type="text/css" /> 
<script src="jquery.boxy.js" type="text/javascript"></script>

3、给匹配的元素绑定boxy行为
<script type="text/javascript"> 
$(function() { 
$(".boxy").boxy(); 
}); 
</script> 
<a href="#m1" class="boxy" title="这是超链接的标题">3.1、点我就会弹出一个对话框</a> 
<div id="m1" style="display: none"> 我是超链接弹出来的</div>

弹出层之1:JQuery.Boxy (一) 使用介绍

a标签中的 title如果不设置,弹出的框将没有标题且不能拖动;href后面的锚记m1为对应的要弹出的元素id;显示的元素默认如果设置为none时弹出将设置显示。
3.2、弹出显示指定的页面内容

<script type="text/javascript"> 
$(function() { 
$(".boxy").boxy(); 
}); 
</script> <a href="../default.aspx" class="boxy" title="提示">3.2、加载一个文档,显示为提示信息</a>

弹出层之1:JQuery.Boxy (一) 使用介绍

href超链接到要弹出显示内容的文件。

3.3、提交时以确认框形式弹出

<script type="text/javascript"> 
$(function() { 
$(".boxy").boxy(); 
}); 
</script> 
<form class="boxy" action="Default.html" method="post"> 
<input id="Submit1" type="submit" value="3.3、提交时显示弹出层"/> 
</form>

弹出层之1:JQuery.Boxy (一) 使用介绍
说明:
1、boxy对话框自动计算出您的内容区域内本身的大小和位置,没有必要明确规定了包装集的尺寸;
2、上面的简单使用方法中其实是在间接指定boxy中message属性的内容,该属性为弹出框的显示信息,默认为:“请确认:”
3、每个匹配锚title属性将被用来作为其相应的对话框的标题
4、message的内容的display属性都将设置为block(显示为块)

下载本文示例

Javascript 相关文章推荐
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
Vue声明式渲染详解
May 17 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
js闭包的9个使用场景
Dec 29 Javascript
event.X和event.clientX的区别分析
Oct 06 #Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 #Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 #Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 #Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 #Javascript
通过JavaScript控制字体大小的代码
Oct 04 #Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 #Javascript
You might like
收集的php编写大型网站问题集
2007/03/06 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
Python 防止死锁的方法
2020/07/29 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
python Scrapy框架原理解析
2021/01/04 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
岗位安全生产责任书
2014/07/28 职场文书
离婚案件答辩状
2015/05/22 职场文书
孟佩杰观后感
2015/06/17 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
生活小常识广播稿
2015/08/19 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang