jQuery boxy弹出层插件中文演示及使用讲解
134 浏览量
2020-11-30
20:35:31
上传
评论
收藏 96KB PDF 举报
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(“<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: “提示信息”});
评论0
最新资源