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});//orPly.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) {},});// Andply.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)
