PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > Jquery教程 > 正文

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

    作者:admin来源:原创浏览:时间:2020-09-30 00:07:50我要评论
    导读:使用该jQuery插件要想使用该jQuery插件,需要把$(selector) boxy();放在document ready中。使用合适的选择器表达式替换这里的"selector",
    使用该jQuery插件
    要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中。使用合适的选择器表达式替换这里的"selector",例如:"a[rel=boxy],form.with-confirmation"。这会给匹配的元素附加一些行为,如下:
    一个href属性中如果锚点包含#,则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中。
    如果href锚点内容为其他一些东西,则会试图使用Ajax载入其对应的内容。理想情况下,我们有相同的起源检查和委托对框架的跨域请求。这将会在下面展示。
    表单上会显示一个提交模式的确认消息。
    其他的元素将会被忽略
    试试下面的演示:
    1.锚点#对应ID的内容(div#foobar)
    对应的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"); }); }});。
    修改现有的对话(先打开一个对话
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-47-143-1.html