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)