From 9f2c52eafd877c6b809c357eeec257504d969128 Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Tue, 30 Dec 2008 17:47:22 +0000 Subject: Added demo wrapper divs, description text and improved sample data --- demos/dialog/default.html | 36 +++++++++++++++++++--- demos/dialog/modal.html | 54 ++++++++++++++++++++------------- demos/dialog/modal_confirmation.html | 58 ++++++++++++++++++++++-------------- demos/dialog/modal_form.html | 55 +++++++++++++++++++++------------- demos/dialog/modal_message.html | 51 ++++++++++++++++++++----------- 5 files changed, 169 insertions(+), 85 deletions(-) (limited to 'demos/dialog') diff --git a/demos/dialog/default.html b/demos/dialog/default.html index a51238401..ebef1426e 100644 --- a/demos/dialog/default.html +++ b/demos/dialog/default.html @@ -17,10 +17,38 @@ -
-

This is the default dialog which is useful for displaying information. It is created by simply calling .dialog on the ID of the content like this: 

$("#dialog").dialog();

-

If the content exceeds the size of the window, a scrollbar will automatically appear. The dialog window can be moved, resized and closed with the 'x' icon by default.

-
+
+ +
+

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
+

+
+
+

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.

+
+ +
+ + + +
+ +

This is a default dialog which opens in a floating layer above the page content protected with an iframe. It is created by simply calling .dialog on the ID of the content like this: 

$("#dialog").dialog();

+

A basic dialog window has a title bar and a content area. If the content length exceeds the size of the window, a scrollbar will automatically appear. The dialog window can be moved, resized and closed with the 'x' icon by default.

+ +
+ diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html index f4e573305..a06451b5e 100644 --- a/demos/dialog/modal.html +++ b/demos/dialog/modal.html @@ -11,7 +11,8 @@ @@ -12,14 +12,16 @@ - -
-

This type of dialog adds a button bar and is useful for confirming an action that may be destructive or important. These are typically displayed as modal dialogs to get the user's attention and force a decision before continuing.

- - -
-

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.

-

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.

-

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
-

-
-
-
+
+ +
+

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
+

+
+
+

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.

+
+ +
+ + + +
+ +

This type of dialog adds a button bar and is useful for confirming an action that may be destructive or important. These are typically displayed as modal dialogs to get the user's attention and force a decision before continuing. This example uses the an icon from the css sprite set and is set to be not resizable by setting this option to false.

+ +
+ diff --git a/demos/dialog/modal_form.html b/demos/dialog/modal_form.html index 1114b0ab1..dd1053c25 100644 --- a/demos/dialog/modal_form.html +++ b/demos/dialog/modal_form.html @@ -1,7 +1,7 @@ - jQuery UI Dialog - Buttons Demo + jQuery UI Dialog - Modal Form Demo @@ -41,8 +41,13 @@ -
-

Example of a form placed inside a dialog.

+ + + +
+ +
+

All form fields are required.

@@ -54,24 +59,32 @@
-
- - +
+ + +
+

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
+

+
+
+

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.

+
- -
-

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.

-

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.

-

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
-

-
-
-
+
+ + + +
+ +

This is an example of how a dialog can be used for data entry by making it larger and embedding a form into the content area. A multi-step wizard could be created by extending this with a step navigation and forward and back buttons.

+ +
+ diff --git a/demos/dialog/modal_message.html b/demos/dialog/modal_message.html index d3f5b4922..3d41897d9 100644 --- a/demos/dialog/modal_message.html +++ b/demos/dialog/modal_message.html @@ -1,7 +1,7 @@ - jQuery UI Dialog - Buttons Demo + jQuery UI Dialog - Modal Message Demo @@ -28,27 +28,42 @@ -
-

A modal message dialog like this is useful for providing information to the user that requires them to explicitly acknowledge before continuing with their work.

This example adds a button bar with a single 'ok' button to dismiss the dialog.

+
+

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.

-

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.

-

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
-

-
-
-
+
+

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
+

+
+
+

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.

+
+ +
+ + + +
+ +

A modal message dialog like this is useful for providing information to the user that requires them to explicitly acknowledge before continuing with their work.

This example adds a button bar with a single 'Ok' button to dismiss the dialog.

+ +
-- cgit v1.2.3