jQuery boxy弹出层插件中文演示及使用讲解-工具盒子

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

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

手动创建实例

用手动模式使用boxy是很容易的------只需要创建一个boxy的新实例，传递一些内部的内容和任何附加的散列对象。在默认情况下，对话框会立即显示出来，在视角的中心，可拖拽。所有的这些设置都可以通过给构造函数传递附加的对象来进行覆盖------更多详情请参见下面的构造函数选项

传递给构造函数的内容可以是任何有效的参数，jQuery的$()函数- DOM元素，是HTML片断或其他jQuery对象。无论提供的是什么，其display属性均被设置为block，并插入名为boxy-content的class在对话框中。

下面为一些代表性的示例：

创建一个新的对话框，new Boxy("内容......", {title: "对话框"});。
创建一个新对话框，无法拖拽。new Boxy("内容......", {title: "对话框", draggable: false});。
创建一个新的对话框，没有默认的关闭按钮。new Boxy("内容......", {title: "对话框", closeable:false});。
新建对话框，使用absolute绝对定位（跟随滚动条）new Boxy("内容......", {title: "对话框, fixed:false"});。
新建对话框，模态的new Boxy("内容......", {title: "对话框, modal:true"});。
新建对话框，自定义行为new Boxy("内容......", {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(){#ask} - 用户定义的选项，选择项传递给回调函数
弹出 - Boxy.alert(){#alert} - 回调函数总是不被调用
确认 - Boxy.confirm(){#confirm} - 仅当用户选择了"确认"时回调函数会被调用

++复制代码++ 代码如下:

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)的位置，可链接。