|
使用该jQuery插件
要想使用该jQuery插件，需要把$(selector).boxy();放在document.ready中。使用合适的选择器表达式替换这里的"selector"，例如："a[rel=boxy],form.with-confirmation"。这会给匹配的元素附加一些行为，如下：
试试下面的演示： 对应的ID为fobar的div内容为：
test.html页面内全部内容为：
3.以确认框方式提交 form表单全部内容：
基本的插件用法 请注意，boxy对话框自动计算出您的内容区域内本身的大小和位置，没有必要明确规定了包装集的尺寸。 此插件方法理解单一选项，其他任何选项被传递给了boxy的构造函数（参见下面的构造函数选项），或是用于Ajax操作，Boxy.load 。
此外，每个匹配锚title属性将被用来作为其相应的对话框的标题。
手动创建实例
用手动模式使用boxy是很容易的——只需要创建一个boxy的新实例，传递一些内部的内容和任何附加的散列对象。在默认情况下，对话框会立即显示出来，在视角的中心，可拖拽。所有的这些设置都可以通过给构造函数传递附加的对象来进行覆盖——更多详情请参见下面的构造函数选项 传递给构造函数的内容可以是任何有效的参数，jQuery的$()函数- DOM元素，是HTML片断或其他jQuery对象。无论提供的是什么，其display属性均被设置为block，并插入名为boxy-content的class在对话框中。 下面为一些代表性的示例：
修改现有的对话（先打开一个对话框，然后再单击下面的链接事件）
请注意，标题栏（也就是关闭按钮和拖动器）只有在标题指定的情况下会出现，在未来，这种行为可能会发生变化，使标题栏始终存在，除非特别禁用。 一旦您创建了一个实例，您可以将通过提供的API分配给一个变量，随后移动，改变大小，显示和隐藏 - 记录如下。 提问 使用Boxy.ask()，Boxy.alert()和Boxy.confirm()这些帮手可能提示用户从一些选项中进行选择以及完成可选的回调函数。点击下面含有演示的链接，参考API文档获取更多信息。
API(应用编程接口)
Boxy.load(url, options) 以一个URL加载内容并以Boxy对话框的形式展现。支持以下的一些选项参数：
（任何其他指定的选项将被传递到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，可链接。
完整的构造函数选项列表
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类的任何内容的单击事件将关联到关闭对话框上。
结语
|
|
|
