弹出层之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函数
Aug 01 Javascript
javascript 常用代码技巧大收集
Feb 25 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 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操作JSON格式数据的实现代码
2011/12/24 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
JS如何把字符串转换成json
2020/02/21 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
Python实现的简单dns查询功能示例
2017/05/24 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
python实现感知机模型的示例
2020/09/30 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
什么是会话Bean
2015/05/14 面试题
家居设计专业个人自荐信范文
2013/11/26 职场文书
酒店个人培训自我鉴定
2013/12/11 职场文书
教学改革实施方案
2014/03/31 职场文书
会计学自荐信
2014/06/03 职场文书
企业文化理念标语
2014/06/10 职场文书
个人先进材料范文
2014/12/30 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript