弹出层之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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
javascript第一课
Feb 27 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
vue axios整合使用全攻略
May 24 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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文件下载类
2006/12/06 PHP
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php简单实现快速排序的方法
2015/04/04 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
解决Mac node版本升级失败的问题
2018/05/16 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
python实现在控制台输入密码不显示的方法
2015/07/02 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
基层干部十八大感言
2014/01/19 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
校庆接待方案
2014/03/18 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
档案保密承诺书
2014/06/03 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP