jQuery boxy弹出层插件(译文),原文地址http://onehackoranother.com/projects/jquery/boxy/
使用该jQuery插件
要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中。使用合适的选择器表达式替换这里的"selector",例如:"a[rel=boxy],form.with-confirmation"。这会给匹配的元素附加一些行为,如下:
- 一个href属性中如果锚点包含#,则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中。
- 如果href锚点内容为其他一些东西,则会试图使用Ajax载入其对应的内容。理想情况下,我们有相同的起源检查和委托对框架的跨域请求。这将会在下面展示。
- 表单上会显示一个提交模式的确认消息。
- 其他的元素将会被忽略
试试下面的演示:
对应的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页面内全部内容为:
<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 。
此外,每个匹配锚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() - 仅当用户选择了“确认”时回调函数会被调用
&amp;lt;script type='text/javascript'&amp;gt;
$(function() {
$(&amp;quot;#ask&amp;quot;).click(function() {
Boxy.ask(&amp;quot;你感觉怎么样?&amp;quot;, [&amp;quot;好极了&amp;quot;, &amp;quot;还好&amp;quot;, &amp;quot;不太好&amp;quot;], function(val) {
alert(&amp;quot;你选择的是: &amp;quot; + val);
}, {title: &amp;quot;这是一个问题&amp;hellip;&amp;hellip;&amp;quot;});
return false;
});
$(&amp;quot;#alert&amp;quot;).click(function() {
Boxy.alert(&amp;quot;文件未找到&amp;quot;, null, {title: &amp;quot;提示信息&amp;quot;});
return false;
});
$(&amp;quot;#confirm&amp;quot;).click(function() {
Boxy.confirm(&amp;quot;请确认:&amp;quot;, function() { alert(&amp;quot;已经确认!&amp;quot;); }, {title: &amp;quot;提示信息&amp;quot;});
return false;
});
});
&amp;lt;/script&amp;gt;
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()函数提供,因为它没有能力阻止程序执行,在对话框是可见的时候。
(责任编辑:admin) |