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>
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
- modal
- 对话框是否设置为模态。模态时,浏览器背景“黑黑的”,阻止页面的其他元素接受事件。
- false
- x
- 对话框的x(left)坐标
- 50
- y
- 对话框的y(top)坐标
- 50
- unloadOnHide
- 如果是true,则在此对话框隐藏后会被卸载(如从DOM中删除)
- false
- clickToFront
- 如果是true,则单击对话框的任意位置(只是相对于标题栏),会导致其跑到顶部。
- false
- behaviours
- 函数用来申请对话框内容的自定义行为。每次调用setContent(),且在Boxy对象中的上下文中执行,将接受一个包含内容区域的jQuery对象作为参数。
- function(r){}
- afterDrop
- 当对话框放下的时候在Boxy对象的上下文执行回调函数。
- function(){}
- afterShow
- 当对话框显示的时候在Boxy对象的上下文执行回调函数。能够用来使表单的文本框获取焦点。
- function(){}
- afterHide
- 当对话框隐藏的时候在Boxy对象的上下文执行回调函数。
- fuuction(){}
- beforeUnload
- 在对话框卸载前在Boxy对象的上下文执行回调函数。
- function(){}
可以通过css完全定制对话框的外观,这里的是您可能感兴趣的选择器列表。
.boxy-wrapper .title-bar
.boxy-wrapper .title-bar h2
.boxy-wrapper .title-bar.dragging
.boxy-wrapper .title-bar .close
.boxy-inner
.boxy-content
.boxy-wrapper .question
.boxy-wrapper .answers
.close
jQuery boxy相关推荐
- 弹出层之1:JQuery.Boxy (二)
在<弹出层之1:JQuery.Boxy (一)>中讲到了JQuery.Boxy的基本用法,本次讲下手动创建实例,new一个boxy对象是很容易的,传递一些参数对象就能满足不同的需求了. 4 ...
- JQuery的一个插件boxy
这个插件是在页面上弹出一个div式的对话框,然后对对话框里的内容进行操作,以进行交互的处理.以例子来说明. 使用前引用这个插件的JS <script src="<%=this. ...
- 爱上MVC3系列~同步与异步提交,在过滤器里如何进行重定向~续
回到目录 上一篇文章已经解决了同步与异步表单提交的页面重定向问题,而为什么要写个"续"呢,原因是,我觉得上次的代码不够美丽,而且有些啰嗦,也不符合我的代码之美原则,所以,我自己的代 ...
- ie6 select出现在浮动层上面的解决方法
select,object对象极其特殊,z-index属性始终高于其他的页面元素,css的层的概念(包括其他css风格的设置 )对它们不起作用.select下拉框还可以跑出ie的窗口! 1.一般情况 ...
- JQuery-Dialog(弹出窗口,遮蔽窗口)
在Ajax中经常用到的弹出窗口和遮蔽窗口.自己写肯定是一个最佳方案,但时间和成本上,还是决定了寻找现成的吧.大概罗列一下.需要我满足我几个条件 一定要简洁方便 拥有遮蔽功能,Model Dialog ...
- windows7 php 无法启动,window_Win7系统无法启动错误提示代码为File:\BOOT\BCD, 很多人Win7系统用户都有遇 - phpStudy...
Win7系统无法启动错误提示代码为File:\BOOT\BCD 很多人Win7系统用户都有遇到过电脑无法开机出现错误提示的问题,提示File:\BOOT\BCD status:0xc000000f 的 ...
- 仿智联招聘首页html源码,模仿智联职位选择,地区选择Js插件
[实例简介] 模仿智联职位选择,地区选择Js插件,界面需要做简单的修改 [实例截图] [核心代码] jquery-plugin-ExtendedBoxy └── jquery-plugin-Exten ...
- php网络验证系统源码,kakaPHP 网络验证PHP服务端源码 - 下载 - 搜珍网
卡卡PHP/卡卡PHP/config/config.php 卡卡PHP/卡卡PHP/config/index.html 卡卡PHP/卡卡PHP/includes/controller/checkgoo ...
- 分享30个最佳 jQuery Lightbox 效果插件
您可能还喜欢 60款很酷的 jQuery 幻灯片演示和下载 Web开发者必备的20款超赞jQuery插件 提升你网站水平的 jQuery 插件推荐 12个很棒的学习 jQuery 的网站推荐 分享27 ...
- 常用jQuery web工具集4
tableHover tableHover一个jQuery插件当鼠标经过时,能够对表格的一整列或行进行着色加亮.支持colspans与rowspans的表格. tableHover Highlight ...
最新文章
- (Java)注解和反射
- Vue里引入three.js
- 信息学奥赛一本通C++语言——1120:同行列对角线的格
- html响应式布局_媒体查询
- 3D开发-AR技术基础
- cmd查看所有数据库 db2_db2 cmd命令操作
- HardSoft-Viewer SQL
- Android-Universal-Image-Loader的工具类封装
- Linux设备驱动模型-Ktype
- 基于C#的房屋租赁管理系统设计与实现
- TensorLy-神经网络张量库
- JAVA全栈工程师之路
- Arduino ESP32深度睡眠触摸唤醒(触摸唤醒)
- Java建立长链接的方式_java http长链接(keep-alive)导致的问题
- 怎么查看mysql密码_怎么查看mysql密码
- Fluent 时间步长【转载】
- Android设置屏幕保持长亮
- 腾讯音乐赴美IPO仅11亿美元,疑受科技股抛售和中美贸易战影响
- [TopCoder 12984] TorusSailing(高斯消元主元法优化)
- 使用userAgent检测内核、平台、Windows 操作系统、移动设备..
热门文章
- Android 直播调研
- windows2012计算机在桌面显示,Windows2012 如何在桌面上显示”我的电脑”
- 如何更好更快的站在巨人的肩膀上?
- vue开发完整企业购物商城集成支付宝和微信登陆支付3步实现登陆
- html js创建表格,javascript创建表格方式详解
- Vue3简单实现元素周期表
- matlab简单几何图形的识别代码,MATLAB识别几何图形
- linux下一个能显示IP来源的小工具-nali
- 恭喜这2所高校,喜提“电子土豆大学”“四川土豆大学”称号
- 如何在计算机上设置网络打印机,在 Windows XP 中如何设置共享打印机(下)