Fork me on GitHub

Ply

Alert

Hello %username%!

					Ply.dialog("alert", "Hello %username%!");
				

Confirm

Continue?

					Ply.dialog(
						"confirm",
						{ effect: "3d-sign" },
						"Continue?"
					);
				

Prompt

Spam subscribe

					Ply.dialog("prompt", {
						title: "Spam subscribe",
						form: { email: "E-mail" }
					});
				

Dialogs / Multistep

You want to win?

					Ply.dialog({
						"intro": {
							ui: "confirm",
							data: {
								text: "You want to win?",
								ok: "Yes",
								cancel: "No"
							},
							next: "congratulations", // OK button
							nextEffect: "3d-flip[180,-180]",
							back: "exit", // Cancel button
							backEffect: "scale"
						},
						"congratulations": {
							data: {
								children: [{
									tag: "img",
									src: "st/you-win.gif"
								}],
								ok: "Okay"
							}
						},
						"exit": {
							data: "Very vain!"
						}
					});
				

∞ Customization examples ∞

Login

Login

					// Usage: ply@rubaxa.org / 123
					// ply/login.dialog.js
					Ply.factory('login', function (options, data, resolve) {
						options.flags = {
							closeBtn: false,
							closeByEsc: true,
							closeByOverlay: true,
							visibleOverlayInStack: true
						};

						options.onaction = function (ui) {
							var data = ui.data;
							return !ui.state || $.post('/api/login', data).fail(function () {
								$(ui.widget.el)
									.addClass('ply-invalid')
									.one('input', function () {
										$(this).removeClass('ply-invalid')
									})
								;
							});
						};

						// Use base factory
						Ply.factory.use('base', options, {
							title: 'Login',
							form: {
								email: 'E-mail',
								password: { hint: 'Password', type: 'password' }
							},
							ok: 'Enter',
							cancel: false
						}, resolve);
					});


					// app.js
					Ply.dialog('login').done(function (ui) {
						Ply.dialog('alert', 'Bingo!');
					});
				
Loading…