弹出层之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 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 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设计模式 Builder(建造者模式)
2011/06/26 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
pyqt5实现登录界面的模板
2020/05/30 Python
基于树莓派的语音对话机器人
2019/06/17 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
extern是什么意思
2016/03/10 面试题
公司财务工作总结的自我评价
2013/11/23 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
环保建议书400字
2014/05/14 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
2014年采购部工作总结
2014/11/20 职场文书
志愿者事迹材料
2014/12/26 职场文书
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS