弹出层之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 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
图片上传插件jquery.uploadify详解
Nov 15 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
vue.js循环radio的实例
Nov 07 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 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
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
详解Python字典小结
2018/10/20 Python
python opencv读mp4视频的实例
2018/12/07 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
毕业生就业自荐信
2013/12/04 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
小学生运动会报道稿
2014/09/12 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
职代会闭幕词
2015/01/28 职场文书
个人求职自荐信范文
2015/03/06 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
Python与C++中梯度方向直方图的实现
2022/03/17 Python
Python开发五子棋小游戏
2022/05/02 Python