跨浏览器模态窗口|对话框|提示框插件

Ply是一款非常实用的跨浏览器模态窗口|对话框|提示框插件。可以用它来制作各种提示框，警告框，对话框，模态窗口等。它使用ES6语法编写，可以兼容IE8以上的浏览器。它的特点还有：

• 可以不依赖于jQuery(某些操作需要 Promise)
• 在显示之前会预加载内容
• 自动聚焦表单元素
• ES6语法
• 跨浏览器：Chrome 20+, FireFox 20+, Safari 6+, Opera 12+, IE8+

使用方法

在页面中引入ply.css和Ply.js文件。

<link href="./ply.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/Ply.js"></script>              
              

创建对话框

然后使用下面的方法来创建一个对话框。

Ply.dialog("alert", "Wow!").always(function (ui) {
    ui.state; // true — "OK", false — "cancel"
    ui.by; // submit, overlay, esc, "x"
    ui.widget; // Ply instance
});

//or
Ply.dialog("confirm", "Do you like it?")
    .done(function (ui) {
        // OK
    })
    .fail(function (ui) {
        // Cancel
    })
    .always(function (ui) {
        if (ui.state) {
            // Clicked "OK"
        }
        else {
            // Clicked "Cancel"
            //   details: `ui.by` — "cancel", "overlay", "esc", "x"
        }
    });                
              

多步骤对话框

要创建一个多步骤的对话框，可以使用下面的方法。

Ply.dialog({
    "init-state": {
        ui: "alert",
        data: "Wow!",
        next: "other-step"
        nextEffect: "3d-flip[180,-180]"
    },

    "other-step": {
        ui: "confirm",
        data: {
            text: "What's next?",
            ok: "Exit",     // button text
            cancel: "Back"
        },
        back: "init-state",
        backEffect: "3d-flip[-180,180]"
    }
}).always(function (ui) {
    if (ui.state) {
        // OK
    } else {
        // Cancel
        // ui.by — 'overlay', 'x', 'esc'
    }
})                
              

Low-level

new Ply(el[, options])

• el:String|HTMLElement：内容层
• 选项：Object-层的选项

new Ply(options)

• 选项：Object-层的选项

var ply = new Ply({
    el: "...", // HTML-content

    effect: "fade", // or ["open-effect:duration", "close-effect:duration"]

    layer: {}, // default css

    overlay: { // defaults css
        opacity: 0.6,
        backgroundColor: "#000"
    },

    flags: { // defaults
        closeBtn: true, // presence close button "✖"
        bodyScroll: false, // disable scrollbar at body
        closeByEsc: true, // close by press on `Esc` key
        closeByOverlay: true, // close by click on the overlay
        hideLayerInStack: true, // hide the layer if it is not the first in the stack
        visibleOverlayInStack: false // visibility overlay, if the layer is not the first in the stack
    },

    // Callback
    oninit: function (ply) {},
    onopen: function (ply) {},
    onclose: function (ply) {},
    ondestory: function (ply) {},
    onaction: function (ui) {},
});


// And
ply.open().always(function () {
    ply.swap({ el: ".." }, "3d-flip").always(function () {
        ply.close();
    });
});                
              

• open([effect])：Promise
• close(effect)Promise
• swap(layer[, effect])Promise：从一个层切换到另一个层
• innerSwap(layer[, effect])Promise：从一个层的内容切换到另一个层的内容
• destroy()：销毁层

预定义效果

• fade
• scale
• fall
• slide
• 3d-flip
• 3d-sign

结合使用多种效果

Ply.dialog("alert", { effect: ["fade", "scale"] }, "Fade & scale");                
              

自定义效果

Ply.effects["my-effect"] = {
    open:  { layer: "fade-in", overlay: "background-in" },
    close: { layer: "fade-out", overlay: "background-out" }
};

Ply.effects["background-in"] = {
    "from": { opacity: 0, backgroundColor: "red" },
    "to":   { opacity: 1, backgroundColor: "white" }
};

Ply.effects["background-out"] = {
    "from": { opacity: 1, backgroundColor: "white" },
    "to":   { opacity: 0, backgroundColor: "green" }
};                
              

Ply.stack

• last:Ply|null
• length:Number

Ply.support

• transition:String|Boolean
• transform:String|Boolean
• perspective:String|Boolean
• transformStyle:String|Boolean
• transformOrigin:String|Boolean
• backfaceVisibility:String|Boolean

Ply.support

• ok:String — "OK"
• cancel:String — "Cancel"
• cross:String — "✖"

Ply.defaults

• layer:Object — css
• overlay:Object — 遮罩样式
  • opacity:Number - 默认值0.6
  • backgroundColor:String - 默认值rgb(0, 0, 0)
• flags:Object
  • closeBtn:Boolean - 关闭按钮"✖"
  • bodyScroll:Boolean - 禁用滚动条，默认false
  • closeByEsc:Boolean - 通过Esc键关闭层，默认值true
  • closeByOverlay:Boolean - 通过点击层关闭层，默认值true
  • hideLayerInStack:Boolean - 如果层不在栈的顶部将其隐藏
  • visibleOverlayInStack:Boolean - 如果层不在栈的顶部显示为遮罩层

Ply.dom

build(tag:String|Object):HTMLElement

Ply.build(); // <div/>
Ply.build("input"); // <input/>
Ply.build(".foo"); // <div class="foo"/>
Ply.build(".foo.bar"); // <div class="foo bar"/>
Ply.build({  // <input type="password" class="foo" style="padding: 10px" maxlength="32"/>
    tag: "input.foo",
    type: "password",
    css: { padding: "10px" },
    maxlength: 32
});
Ply.build({ text: "<i>?</i>" }); // <div><i>?</i></div>
Ply.build({ html: "<i>!</i>" }); // <div><i>!</i></div>                
              

append(parent:HTMLElement, el:HTMLElement)

remove(el:HTMLElement)

addEvent(el:HTMLElement, name:String, fn:Function)

removeEvent(el:HTMLElement, name:String, fn:Function)