jQuery boxy弹出层插件中文演示及讲解

弹出层，thickbox 用过。

 

http://www.zhangxinxu.com/study/200911/jQuery-plugin-boxy.html

测试页面 »

使用该jQuery插件

要想使用该jQuery插件，需要把$(selector).boxy();放在document.ready中。使用合适的选择器表达式替换这里的"selector"，例如："a[rel=boxy],form.with-confirmation"。这会给匹配的元素附加一些行为，如下：

• 一个href属性中如果锚点包含#，则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中。
• 如果href锚点内容为其他一些东西，则会试图使用Ajax载入其对应的内容。理想情况下，我们有相同的起源检查和委托对框架的跨域请求。这将会在下面展示。
• 表单上会显示一个提交模式的确认消息。
• 其他的元素将会被忽略

试试下面的演示：

1.锚点#对应ID的内容(div#foobar)

这是一段ID为foobar的div标签内的文字

对应的ID为fobar的div内容为：

<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)

test.html页面内全部内容为：

<div style="padding:15px; font:2em bold Verdana, Geneva, sans-serif">这是名为test的html页面中div内的文字内容</div>

3.以确认框方式提交

 

form表单全部内容：

<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.load(url, options)

以一个URL加载内容并以Boxy对话框的形式展现。支持以下的一些选项参数：

• 类型 - HTTP方法，默认为GET
• 缓存 - 如果是true，缓存内容连续通话。相当于缓存选项传递到jQuery的Ajax方法。默认：false。
• 过滤 - jQuery的表达式，用于过滤远程内容。

（任何其他指定的选项将被传递到boxy的构造函数中）

Boxy.get(element)

返回包含元素的实例，例如： <a href="#" onclick="Boxy.get(this).hide();">关闭对话框</a>

Boxy.ask(question, answers, callback, options)

显示模式，即非可关闭对话框，允许用户选择选项。问题是要显示给用户的信息。答案是一个数组或一切可能的回答的数列。回调函数将收到选定的回答，这是否是需要的值或相应的密钥要根据一个数组或答案数列是否已经提供了。options是一种额外的可选设置选项传递给对话框的构造函数。

Boxy.alert(message, callback, options)

显示模式，非可关闭对话框显示消息给用户。
注意：此方法并 不是为了取代浏览器本地window.alert()函数提供，因为它没有能力阻止程序执行，在对话框是可见的时候。

Boxy.confirm(message, callback, options)

显示模式，非可关闭对话框显示的含有确定和取消按钮的消息。回调只会在用户选择了“确定”时被调用。
注意：此方法并 不是为了取代浏览器提供的本地window.confirm()函数，因为它没有能力在对话框可见时阻止程序执行的。

Boxy.linkedTo(ele)

返回已通过执行器构造函数选项连接DOM元素的boxy实例。

Boxy.isModalVisible()

返回true如果任何模式对话框是当前可见的，否则返回false。

new Boxy(element, options)

构造函数；创建一个新的boxy对话框。element是对话框的内容；任何有效的参数，jQuery的$()函数在这里也是有效的。options是一个配置选项的散列，见下面详细的资料。

estimateSize()

当对话框不可见的时候估计其大小。如果当前对话框可见，不要使用此方法，使用getSize()代替。

getSize()

以数组的形式[width, height]返回对话框的大小。

getContentSize()

返回对话框内容区域的大小。默认情况下，指在对话框框架里的一切，不包括标题栏。

getPosition()

以[x,y]数组形式返回最顶层对话框的左上角坐标。

getCenter()

以[x,y]数组形式返回最顶层对话框的中心点的坐标。

getInner()

返回一个jQuery对象包装对话框的内部区域-框架内包括标题栏一切。

getContent()

返回一个jQuery对象包装对话框的内容区域-框架内的一切，不包括标题栏。

setContent(newContent)

设置对话框中的内容，任何对$()有效的参数也对设置的新内容有效。可链接。

moveTo(x,y)

移动对话框到左上角为(x,y)的位置，可链接。

centerAt(x,y)

把对话框移动到中心坐标为(x,y)的位置上。

center(axis)

移动对话框，使其在视野的中央。可选参数axis可以是"x","y"中的任意一个中心轴。可链接。

resize(w,h,after)

重新调整对话框的高宽到[w,h]，完成后执行回调函数，回调函数将接受Boxy实例作为参数。可链接。

tween(w,h,after)

动画补间对话框高宽到[w,h]，完成后执行回调函数，回调函数将接受Boxy实例作为参数。可链接。

isVisible()

如果当前对话框可见，则返回true，否则返回false。

show()

显示对话框，可链接。

hide(after)

隐藏对话框，after为可选回调函数，完成后执行。可链接。

toggle()

触发对话框的显隐属性。可链接。

hideAndUnload(after)

在隐藏后立即执行卸载。在卸载之前执行after回调函数。可链接。

unload()

从DOM中删除对话框，切断其与执行机构的联系，如果有的话。一旦出现一个对话框已被卸载它的任何进一步行动都是未定义的。

toTop()

将当前对话框移动到其他所有对话框的上部。可链接。

getTitle()

以HTML的形式返回对话框的标题。

setTitle(t)

设置对话框的标题为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选择器

可以通过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类的任何内容的单击事件将关联到关闭对话框上。