diff --git a/README.md b/README.md index b4dc0f0..1ebfc08 100644 --- a/README.md +++ b/README.md @@ -2,3 +2,80 @@ Amazing layer/modal/dialog system. Wow! +## Features + * Support browsers Chrome 20+, FireFox 20+, Safari 6+, Opera 12+, IE8+ (in progress) + * [ES6 syntax](https://github.com/termi/es6-transpiler) + * No jQuery (but then need polyfill [Promise](https://gist.github.com/RubaXa/8501359) polyfill) + + + +## Base usage + +Include [ply.css] in `` +```html + +``` + +Create a dialog: +```js +Ply.dialog("alert", "Wow!").then(function (ui) { + ui.by; // submit, overlay, esc, "x" + ui.state; // true — "OK", false — "cancel" +}); +``` + + +## Low-level + +```js +var ply = new Ply({ + el: "...", // HTML-content + + effect: "fade", // cuurent effect + + layer: {}, // default css + + overlay: { // defaults css + opacity: 0.6, + backgroundColor: "#000" + }, + + flags: { // defaults + bodyScroll: false, // disable scrollbar at body + closeByEsc: true, // close by press on `Esc` key + closeByOverlay: true // close by click on the overlay + }, + + // Callback + init: function () {}, + open: function (ply) {}, + close: function (ply) {}, + destory: function (ply) {}, + callback: function (ui) {}, +}); + + +// And +ply.open().then(function () { + ply.swap({ el: ".." }, "3d-flip").then(function () { + ply.close(); + }); +}); +``` + + + +## Effects + - fade + - scale + - fall + - slide + - 3d-flip + - 3d-sign + + + +## Combined Effects +```js +Ply.dialog("alert", { effect: ["fade", "scale"] }, "Fade & scale"); +``` diff --git a/package.json b/package.json index ccaca7f..a3230c9 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "layer", "modal", "dialog", + "popup", "lightbox", "alert", "confirm",