dialogBoxS插件使用

dialogBoxS是由前端组开发的移动端公用弹层插件。

所需文件

dialogBoxS-1.0.js
dialogBoxS-noresizing-1.0.css（当页面中没有resizing.js时候，使用该css）
dialogBoxS.css（页面中有resizing.js）

使用方法

一、基本结构

<div class="s-dialogBox s-hide" id="dialogBoxS1">
    <div class="s-dialog-wrapper">
        <div class="s-butClose"><img src="../images/s-butClose@25_25.jpg" alt=""></div>
        <div class="s-cont s-center">
            <div class="s-cont-word">
                <p class="section-txt s-center">您将删除所有图片，是否继续？</p>
            </div>
        </div>
        <div class="s-butList s-row2">
            <a href="#" class="col-bg-orange1"></a>
            <a href="#" class="col-bg-green1"></a>
        </div>
    </div>
    <div class="s-mask"></div>
</div>

图片.png

• 提示文字居中，div.s-cont 中加s-center
• 按钮颜色
   col-bg-orange1： 橙色按钮
   col-bg-green1：绿色按钮
• 示例为两个按钮的状态，一个按钮时

<!--一个按钮--较小按钮-->
<div class="s-butList s-row1">
       <a href="#" class="s-but-small col-bg-orange1"></a>
</div>

图片.png

<!--一个按钮--较大按钮-->
<div class="s-butList s-row1">
       <a href="#" class="s-but-big col-bg-orange1"></a>
</div>

图片.png

二、调用

1、初始化实例

var dialogBox1 = $("#dialogBoxS1").dialogBox();

支持参数

• isOpen

默认值：false
类型：Boolean
说明：初始化时是否自动显示弹层

• queue

默认值：0
类型：Num
说明：队列，设置弹层的堆叠顺序，同时出现多个弹层时候使用，数值越大层级越高

• animation

默认值：default
类型：String
说明：弹层出现时的动画效果

var dialogBox1 = $("#dialogBoxS1").dialogBox({
        'isOpen': false,
        'queue': 2,
        'animation': 'default'
});

2、方法

• 打开弹层/关闭弹层

//打开弹层
dialogBox1.open();
//关闭弹层
dialogBox1.close();

• 提示内容有滚动时

better-scroll.js //有滚动时需要引入第三方滚动插件

    //初始化滚动实例
    dialogBox1.scroll();
    //如果内容为动态加载，加载完成后需要刷新滚动实例
    dialogBox1.refresh();