jQuery boxy弹出层插件中文演示及讲解(转)
要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中。使用合适的选择器表达式替换这里的"selector",例如:"a[rel=boxy],form.with-confirmation"。这会给匹配的元素附加一些行为,如下:
- 一个href属性中如果锚点包含#,则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中。
- 如果href锚点内容为其他一些东西,则会试图使用Ajax载入其对应的内容。理想情况下,我们有相同的起源检查和委托对框架的跨域请求。这将会在下面展示。
- 表单上会显示一个提交模式的确认消息。
- 其他的元素将会被忽略
试试下面的演示:
1.锚点#对应ID的内容(div#foobar)
<div id="foobar" style="padding:15px; display:none; background-color:#cad5eb; font-size:2em; color:#000000; font-weight:bold;">这是一段ID为foobar的div标签内的文字</div>
2.远程内容(加载同文件夹下的test.html)
<div style="padding:15px; font:2em bold Verdana, Geneva, sans-serif">这是名为test的html页面中div内的文字内容</div>
3.以确认框方式提交
<form method="post" action="" id="form" class="boxy"><input type="submit" name="测试" value="确认框提交" /></form>
基本的插件用法
<script type="text/javascript"> $(function(){ $(".boxy").boxy(); }); </script>
请注意,boxy对话框自动计算出您的内容区域内本身的大小和位置,没有必要明确规定了包装集的尺寸。
此插件方法理解单一选项,其他任何选项被传递给了boxy的构造函数(参见下面的构造函数选项),或是用于Ajax操作,Boxy.load 。
- 选项——message
- 描述——显示在对话框上的文字信息
- 默认——请确认:
此外,每个匹配锚title属性将被用来作为其相应的对话框的标题。
用手动模式使用boxy是很容易的——只需要创建一个boxy的新实例,传递一些内部的内容和任何附加的散列对象。在默认情况下,对话框会立即显示出来,在视角的中心,可拖拽。所有的这些设置都可以通过给构造函数传递附加的对象来进行覆盖——更多详情请参见下面的构造函数选项
传递给构造函数的内容可以是任何有效的参数,jQuery的$()函数- DOM元素,是HTML片断或其他jQuery对象。无论提供的是什么,其display属性均被设置为block,并插入名为boxy-content的class在对话框中。
下面为一些代表性的示例:
- 创建一个新的对话框,new Boxy("<p>内容……</p>", {title: "对话框"});。
- 创建一个新对话框,无法拖拽。new Boxy("<p>内容……</p>", {title: "对话框", draggable: false});。
- 创建一个新的对话框,没有默认的关闭按钮。new Boxy("<p>内容……</p>", {title: "对话框", closeable:false});。
- 新建对话框,使用absolute绝对定位(跟随滚动条)new Boxy("<p>内容……</p>", {title: "对话框, fixed:false"});。
- 新建对话框,模态的new Boxy("<p>内容……</p>", {title: "对话框, modal:true"});。
- 新建对话框,自定义行为new Boxy("<p>内容……</p>", {behaviours: function(r) { $(r).hover(function() { $(this).css("background-color", "red"); }, function() { $(this).css("background-color", "white"); }); }});。
修改现有的对话(先打开一个对话框,然后再单击下面的链接事件)
- 让最新的对话框放大的动画 - someDialog.tween(400, 400);
- 让最新的对话框减小的动画 - someDialog.tween(100, 100);
- 获取最新的对话框的标题 - someDialog.getTitle();。
- 更改最新的对话框的标题 - someDialog.setTitle("新标题");
请注意,标题栏(也就是关闭按钮和拖动器)只有在标题指定的情况下会出现,在未来,这种行为可能会发生变化,使标题栏始终存在,除非特别禁用。
一旦您创建了一个实例,您可以将通过提供的API分配给一个变量,随后移动,改变大小,显示和隐藏 - 记录如下。
提问
使用Boxy.ask(),Boxy.alert()和Boxy.confirm()这些帮手可能提示用户从一些选项中进行选择以及完成可选的回调函数。点击下面含有演示的链接,参考API文档获取更多信息。
- 提问 - Boxy.ask() - 用户定义的选项,选择项传递给回调函数
- 弹出 - Boxy.alert() - 回调函数总是不被调用
- 确认 - Boxy.confirm() - 仅当用户选择了“确认”时回调函数会被调用
<script type='text/javascript'> $(function() {$("#ask").click(function() {Boxy.ask("你感觉怎么样?", ["好极了", "还好", "不太好"], function(val) {alert("你选择的是: " + val); }, {title: "这是一个问题……"});return false;});$("#alert").click(function() {Boxy.alert("文件未找到", null, {title: "提示信息"});return false;});$("#confirm").click(function() {Boxy.confirm("请确认:", function() { alert("已经确认!"); }, {title: "提示信息"});return false;}); }); </script>
API(应用编程接口)
Boxy.load(url, options)
- 类型 - HTTP方法,默认为GET
- 缓存 - 如果是true,缓存内容连续通话。相当于缓存选项传递到jQuery的Ajax方法。默认:false。
- 过滤 - jQuery的表达式,用于过滤远程内容。
Boxy.get(element)
<a href="#" onclick="Boxy.get(this).hide();">关闭对话框</a>
Boxy.ask(question, answers, callback, options)
Boxy.alert(message, callback, options)
注意:此方法并不是为了取代浏览器本地window.alert()函数提供,因为它没有能力阻止程序执行,在对话框是可见的时候。
Boxy.confirm(message, callback, options)
注意:此方法并不是为了取代浏览器提供的本地window.confirm()函数,因为它没有能力在对话框可见时阻止程序执行的。
Boxy.linkedTo(ele)
Boxy.isModalVisible()
new Boxy(element, options)
estimateSize()
getSize()
getContentSize()
getPosition()
getCenter()
getInner()
getContent()
setContent(newContent)
moveTo(x,y)
centerAt(x,y)
center(axis)
resize(w,h,after)
tween(w,h,after)
isVisible()
show()
hide(after)
toggle()
hideAndUnload(after)
unload()
toTop()
getTitle()
setTitle(t)
选项 |
描述 | 默认 |
title |
显示在自动生成标题栏上的标题 | null |
closeable |
是否一个关闭对话框的驱动器要添加到自动生成标题栏上。如果标题没有指定是没有影响的 | true |
closeText | 在可用情况下标题栏关闭链接的文字 | "[关闭]" |
draggable | 是否对话框可以通过标题栏进行拖拽。标题未指定没有影响。 | true |
clone | 内部区域的元素以及事件处理程序应不应该在被替换之前进行复制。 | false |
actuator | DOM元素(不包括jQuery对象),引发此对话框。两者之间的联系将被建立,此联系允许对话框的参照稍后在通过执行Boxy.linkedTo(element)获取的元素中进行检索。当对话框被卸载,此联系也会被自动切断。 | null |
center | 对话框是否屏幕中心显示 | true |
fixed | 是否使用固定定位(fixed)而不是绝对定位(absolute),固定定位的对话框不受浏览器滚动条影响。IE6不支持固定定位,其永远表现为绝对定位。 | true |
show | 对话框是否需要立即显示,如果是false,则需要你手动调用dialog.show()以显示对话框。 | true |
model | 对话框是否设置为模态。模态时,浏览器背景“黑黑的”,阻止页面的其他元素接受事件。 | false |
x | 对话框的x(left)坐标 | 50 |
y | 对话框的y(top)坐标 | 50 |
unloadOnHide | 如果是true,则在此对话框隐藏后会被卸载(如从DOM中删除) | false |
clickToFront | 如果是true,则单击对话框的任意位置(只是相对于标题栏),会导致其跑到顶部。 | false |
behaviours | 函数用来申请对话框内容的自定义行为。每次调用setContent(),且在Boxy对象中的上下文中执行,将接受一个包含内容区域的jQuery对象作为参数。 | function(){} |
afterDrop | 当对话框放下的时候在Boxy对象的上下文执行回调函数。 | function(){} |
afterShow | 当对话框显示的时候在Boxy对象的上下文执行回调函数。能够用来使表单的文本框获取焦点。 | function(){} |
afterHide | 当对话框隐藏的时候在Boxy对象的上下文执行回调函数。 | function(){} |
beforeUnload | 在对话框卸载前在Boxy对象的上下文执行回调函数。 | function(){} |
可以通过css完全定制对话框的外观,这里的是您可能感兴趣的选择器列表。
- .boxy-wrapper .title-bar——div包装的自动生成的标题栏
- .boxy-wrapper .title-bar h2——标题栏的内容
- .boxy-wrapper .title-bar.dragging——拖拽时候的标题栏
- .boxy-wrapper .title-bar .close——默认的关闭对话框的执行器
- .boxy-inner——内部区域,包括标题栏
- .boxy-content——内部区域,不包括标题栏。这个class类将被自动添加到传递给Boxy的构造函数的任何元素。
- .boxy-wrapper .question——通过Boxy.ask()创建的,包含问题文字
- .boxy-wrapper .answers——通过Boxy.ask()创建的,包含应答的按钮
- .close——这一class类的任何内容的单击事件将关联到关闭对话框上。
- 全文由我(张鑫旭)翻译整理自http://onehackoranother.com/projects/jquery/boxy/,时间仓促,难免在翻译或编辑时出现错误或不到位之处,欢迎指正。您可以通过邮箱iamzhangxinxu#qq.com联系我。
- 此插件js部分以及css部分自己略微修改,一些英文中文化,添加一些class便于样式控制等。
转载于:https://www.cnblogs.com/JoannaQ/archive/2013/04/13/3017664.html
jQuery boxy弹出层插件中文演示及讲解(转)相关推荐
- layer php弹出层,layer官方演示与讲解(jQuery弹出层插件)
特别说明:事件需自己绑定,以下只展现调用代码. //初体验 layer.alert('内容') //第三方扩展皮肤 layer.alert('内容', { icon: 1, skin: 'layer- ...
- layer——极简的jquery弹出层插件
官网:http://layer.layui.com/ 作者:贤心 jquery layer是layUI库的成员,一直致力于为web开发提供动力. jquery layer弹出层插件支持单击弹出,自动 ...
- html 弹出层插件,jQuery弹出层插件(原创)
插件描述:简约的jQuery弹出层插件 更新时间:2020-01-17 23:37:28 更新说明:版本v4.3.0 1.修复最大化可拖动.改变大小的问题 2.去除对于图片的依赖 3.更新拖动插件 4 ...
- jquery 弹出层插件
最近在研究弹出层插件时发现网上很多插件功能很强大,同时插件也很庞大.在这里个人写了一个比较秀珍的弹出层插件. jquery.popdialog.js $(function () {$.fn.PopDi ...
- jbox弹窗_强大的jquery弹出层插件jBox
jBox是一款功能强大的jquery弹出层插件.jBox插件可以用来创建tooltips提示框.模态窗口.图片画廊等多种效果. 使用方法 在页面中引入jBox.all.min.css.jquery和j ...
- Jquery UI dialog弹出层插件
必须先下载Jquery UI插件 然后再把下载的文档复制到项目中,可以复制你需要的单个插件 --------------------------------------具体代码如下---------- ...
- Lightbox弹出层插件:jQuery弹出层插件用法
插件描述:这款lightbox,可应用于图片.swf文件.html文件等等. Lightbox弹出层插件 说明文档 : 1.引入资源,(JQ1.3+)和JS文件: <script type=& ...
- Jquery弹出层插件ThickBox的使用方法
这篇文章主要介绍了Jquery弹出层插件ThickBox的使用方法,需要的朋友可以参考下 thickbox是jQuery的一个插件,其作用是弹出对话框.网页框,使用户体验度更加愉悦,下面就来简单介绍它 ...
- layer弹出层闪退_jQuery使用Layer弹出层插件闪退问题
一.前言 巨坑,基础没学好,导致找了一个下午的问题,终于被我发现了.说多都是泪,记录下来,以后有人遇到这个错误可以参考下 做项目期间做了几个页面,需要用到弹出层,为了方便使用到了Layer的插件,然后 ...
- html 5 桌面弹窗,HTML5+CSS3+jQuery实现弹出层
我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可以在桌面PC ...
最新文章
- JGG | 肠道微生物研究助力穿山甲圈养保护
- 乳腺MG数据获取(Breast Mammography)
- 释疑のABAP输入框字符自动变成大写问题
- spring boot使用freemarker页面获取系统路径最简配置
- python数据分享人力资源_Python数据分析帮你清晰的了解整理员工们的工作效率和整体满意度...
- 针对CDP协议攻击分析及安全防护
- SQL函数获取一年中每个月的天数
- 5G从小就梦想着自己要迎娶:高速率、低时延、大容量三个老婆。
- c++绘制函数图像_简洁优雅的Matplotlib可视化 | 绘制论文曲线图
- 发展大数据还有啥问题:数据孤岛、技术差距、人才短缺
- 转载:C#7.0新特性(VS2017可用)
- TFS dataserver故障测试
- appium问题解决
- html坦克游戏,HTML5实现经典坦克大战坦克乱走还能发出一个子弹
- html图片轮播效果加链接,HTML首页怎么加图片轮播?
- ffmpeg命令分析-b:v
- 用where in遇到null时的解决方法1
- SSM框架实现数据库存储图片及读取图片
- 思科2018校招硬件测试笔试试题及答案
- 如何打赢呼叫中心人才管理前哨战
热门文章
- 邮箱163登录入口,邮箱163如何注册?
- FFmpeg 加水印 加马赛克
- 计算机学院青协特色活动,计算机学院青年志愿者协会纳新活动简讯
- favicon.ico在线制作
- Python3.6支付宝账单爬虫
- PDF旋转保存居然还能如此高效的办法
- 新版2002觅知blibli专用可对接JSON解析弹幕播放器-所有后台功能一键管理-更新22-4-29详解
- Mac上挂载移动硬盘出现“Read-only file system“问题
- 【PS】抠图,通道抠图
- C++面向对象小练习:几何图形类