From af15f2c4a192dea02aab9e519defc68c71763ec4 Mon Sep 17 00:00:00 2001 From: yvesf Date: Mon, 22 Nov 2010 14:34:55 +0100 Subject: jquery ui --- .../development-bundle/demos/dialog/animated.html | 56 +++++++ .../development-bundle/demos/dialog/default.html | 54 +++++++ static/development-bundle/demos/dialog/index.html | 23 +++ .../demos/dialog/modal-confirmation.html | 69 +++++++++ .../demos/dialog/modal-form.html | 167 +++++++++++++++++++++ .../demos/dialog/modal-message.html | 71 +++++++++ static/development-bundle/demos/dialog/modal.html | 60 ++++++++ 7 files changed, 500 insertions(+) create mode 100644 static/development-bundle/demos/dialog/animated.html create mode 100644 static/development-bundle/demos/dialog/default.html create mode 100644 static/development-bundle/demos/dialog/index.html create mode 100644 static/development-bundle/demos/dialog/modal-confirmation.html create mode 100644 static/development-bundle/demos/dialog/modal-form.html create mode 100644 static/development-bundle/demos/dialog/modal-message.html create mode 100644 static/development-bundle/demos/dialog/modal.html (limited to 'static/development-bundle/demos/dialog') diff --git a/static/development-bundle/demos/dialog/animated.html b/static/development-bundle/demos/dialog/animated.html new file mode 100644 index 0000000..ac6adf4 --- /dev/null +++ b/static/development-bundle/demos/dialog/animated.html @@ -0,0 +1,56 @@ + + + + + jQuery UI Dialog - Animation + + + + + + + + + + + + + + + + + + +
+ +
+

This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

+
+ + + +
+ + + +
+

Dialogs may be animated by specifying an effect for the show and/or hide properties. You must include the individual effects file for any effects you would like to use.

+
+ + + diff --git a/static/development-bundle/demos/dialog/default.html b/static/development-bundle/demos/dialog/default.html new file mode 100644 index 0000000..732fb8a --- /dev/null +++ b/static/development-bundle/demos/dialog/default.html @@ -0,0 +1,54 @@ + + + + + jQuery UI Dialog - Default functionality + + + + + + + + + + + + + + + +
+ +
+

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

+
+ + +
+

Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.

+
+
+ checkbox
+ radio
+

+
+
+
+ +
+ + + +
+

The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.

+
+ + + diff --git a/static/development-bundle/demos/dialog/index.html b/static/development-bundle/demos/dialog/index.html new file mode 100644 index 0000000..460e4fb --- /dev/null +++ b/static/development-bundle/demos/dialog/index.html @@ -0,0 +1,23 @@ + + + + + jQuery UI Dialog Demos + + + + +
+

Examples

+ +
+ + + diff --git a/static/development-bundle/demos/dialog/modal-confirmation.html b/static/development-bundle/demos/dialog/modal-confirmation.html new file mode 100644 index 0000000..ba09de6 --- /dev/null +++ b/static/development-bundle/demos/dialog/modal-confirmation.html @@ -0,0 +1,69 @@ + + + + + jQuery UI Dialog - Modal confirmation + + + + + + + + + + + + + + + +
+ +
+

These items will be permanently deleted and cannot be recovered. Are you sure?

+
+ + +
+

Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.

+
+
+ checkbox
+ radio
+

+
+
+
+ +
+ + + +
+

Confirm an action that may be destructive or important. Set the modal option to true, and specify primary and secondary user actions with the buttons option.

+
+ + + diff --git a/static/development-bundle/demos/dialog/modal-form.html b/static/development-bundle/demos/dialog/modal-form.html new file mode 100644 index 0000000..15680af --- /dev/null +++ b/static/development-bundle/demos/dialog/modal-form.html @@ -0,0 +1,167 @@ + + + + + jQuery UI Dialog - Modal form + + + + + + + + + + + + + + + + + + +
+ +
+

All form fields are required.

+ +
+
+ + + + + + +
+
+
+ + +
+

Existing Users:

+ + + + + + + + + + + + + + + +
NameEmailPassword
John Doejohn.doe@example.comjohndoe1
+
+ + +
+ + + +
+

Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.

+
+ + + diff --git a/static/development-bundle/demos/dialog/modal-message.html b/static/development-bundle/demos/dialog/modal-message.html new file mode 100644 index 0000000..facb37d --- /dev/null +++ b/static/development-bundle/demos/dialog/modal-message.html @@ -0,0 +1,71 @@ + + + + + jQuery UI Dialog - Modal message + + + + + + + + + + + + + + + + +
+ +
+

+ + Your files have downloaded successfully into the My Downloads folder. +

+

+ Currently using 36% of your storage space. +

+
+ + +
+

Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.

+
+
+ checkbox
+ radio
+

+
+
+
+ +
+ + + +
+

Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the modal option to true, and specify a primary action (Ok) with the buttons option.

+
+ + + diff --git a/static/development-bundle/demos/dialog/modal.html b/static/development-bundle/demos/dialog/modal.html new file mode 100644 index 0000000..0d4e9b6 --- /dev/null +++ b/static/development-bundle/demos/dialog/modal.html @@ -0,0 +1,60 @@ + + + + + jQuery UI Dialog - Basic modal + + + + + + + + + + + + + + + +
+ +
+

Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.

+
+ + +
+

Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.

+
+
+ checkbox
+ radio
+

+
+
+
+ +
+ + + +
+

A modal dialog prevents the user from interacting with the rest of the page until it is closed.

+
+ + + -- cgit v1.2.1