+ Dialogs

11 years ago · 923a593d1f
2 changed files with 39 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -2,16 +2,18 @@
 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)
+ * More than 90% [test code coverage](http://rubaxa.github.io/Ply/tests/)



 ## Base usage

-Include [ply.css] in `<head/>`
+Include [ply.css](ply.css) in `<head/>` (optional)
 ```html
 	<link href='./ply.css' rel='stylesheet' type='text/css'/>
 ```
@ -25,6 +27,40 @@ Ply.dialog("alert", "Wow!").then(function (ui) {
 ```


+---
+
+
+## Dialogs
+
+```js
+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]"
+	}
+}).then(function (ui) {
+	// ...
+})
+```
+
+
+
+---
+
+
 ## Low-level

 ```js
--- a/index.html
+++ b/index.html
@ -15,6 +15,8 @@

 </head>
 <body>
+	<a href="https://github.com/RubaXa/Ply"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
+
 	<div style="height: 50px;"></div>

 	<h1 title="Try demo!"><u>Ply</u></h1>