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)
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!