弹出层之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 相关文章推荐
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
js实现提交前对列表数据的增删改查
Jan 16 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 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
js中复制行和删除行的操作实例
2013/06/25 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
javascript 闭包详解
2015/02/15 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python修改Excel数据的实例代码
2013/11/01 Python
python之import机制详解
2014/07/03 Python
使用Python对MySQL数据操作
2017/04/06 Python
Python数据结构之图的应用示例
2018/05/11 Python
Django 连接sql server数据库的方法
2018/06/30 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
python3.4爬虫demo
2019/01/22 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
网络编辑岗位职责
2014/03/18 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
篮球社团活动总结
2014/06/27 职场文书
工作失职检讨书
2015/01/26 职场文书
紫日观后感
2015/06/05 职场文书
叶问观后感
2015/06/15 职场文书
教师反邪教心得体会
2016/01/15 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
MySQL普通表如何转换成分区表
2022/05/30 MySQL