library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added demo wrapper divs, description text and improved sample data

Browse Source
This commit is contained in:
Todd Parker 2008-12-30 17:47:22 +00:00
parent c18b499330
commit 9f2c52eafd
5 changed files with 168 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
demos/dialog/default.html
View File

@ -17,10 +17,38 @@
</head> </head>
<body> <body>
<div class="demo">
<div id="dialog" title="Basic dialog"> <div id="dialog" title="Basic dialog">
<p>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: <pre>$("#dialog").dialog();</pre></p> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon. </p>
<p>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. </p>
</div> </div>
<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p>
<form>
<input value="text input" /><br />
<input type="checkbox" />checkbox<br />
<input type="radio" />radio<br />
<select>
<option>select</option>
</select><br /><br />
<textarea>textarea</textarea><br />
</form>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p>
</div><!-- End sample page content -->
</div><!-- End demo -->
<div class="demo-description">
<p>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: <pre>$("#dialog").dialog();</pre></p>
<p>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. </p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

26
demos/dialog/modal.html
View File

@ -12,6 +12,7 @@
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#dialog").dialog({ $("#dialog").dialog({
height:140,
modal: true, modal: true,
overlay: { overlay: {
backgroundColor: '#000', backgroundColor: '#000',
@ -23,14 +24,15 @@
</head> </head>
<body> <body>
<div class="demo">
<div id="dialog" title="Basic modal dialog"> <div id="dialog" title="Basic modal dialog">
<p>This is identical to the default dialog except a semi-transparent overlay layer is added as an option to make this look modal to the page content.</p><p>The dialog window can be moved, resized and closed with the 'x' icon.</p> <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div> </div>
<!-- Sample page content to illustrate the semi-transparent overlay screen --> <!-- Sample page content to illustrate the layering of the dialog -->
<div style="padding:20px;"> <div class="hiddenInViewSource" style="padding:20px;">
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p>
<form> <form>
<input value="text input" /><br /> <input value="text input" /><br />
@ -41,7 +43,19 @@
</select><br /><br /> </select><br /><br />
<textarea>textarea</textarea><br /> <textarea>textarea</textarea><br />
</form> </form>
</div> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p>
</div><!-- End sample page content -->
</div><!-- End demo -->
<div class="demo-description">
<p>This is identical to the default dialog except a semi-transparent overlay layer is added as an option to make this look more modal and dim out the page content behind it to bring the user's attention to the dialog.</p><p>The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

34
demos/dialog/modal_confirmation.html
View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Dialog - Buttons Demo</title> <title>jQuery UI Dialog - Modal Confirmation Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script> <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
@ -12,14 +12,16 @@
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#dialog").dialog({ $("#dialog").dialog({
resizable:false,
height:140,
modal: true, modal: true,
overlay: { overlay: {
backgroundColor: '#000', backgroundColor: '#000',
opacity: 0.5 opacity: 0.5
}, },
buttons: { buttons: {
'Delete this file': function() { 'Delete all items in recycle bin': function() {
alert('The user was deleted forever!'); alert('The items were deleted forever!');
}, },
Cancel: function() { Cancel: function() {
alert('You clicked Cancel. The dialog will now close.'); alert('You clicked Cancel. The dialog will now close.');
@ -32,14 +34,14 @@
</head> </head>
<body> <body>
<div id="dialog" title="Modal confirmation dialog"> <div class="demo">
<p>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.</p></div>
<div id="dialog" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
<!-- Sample page content to illustrate the semi-transparent overlay screen --> <!-- Sample page content to illustrate the layering of the dialog -->
<div style="padding:20px;"> <div class="hiddenInViewSource" style="padding:20px;">
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p>
<form> <form>
<input value="text input" /><br /> <input value="text input" /><br />
@ -50,7 +52,19 @@
</select><br /><br /> </select><br /><br />
<textarea>textarea</textarea><br /> <textarea>textarea</textarea><br />
</form> </form>
</div> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p>
</div><!-- End sample page content -->
</div><!-- End demo -->
<div class="demo-description">
<p>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.</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

33
demos/dialog/modal_form.html
View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Dialog - Buttons Demo</title> <title>jQuery UI Dialog - Modal Form Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script> <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
@ -41,8 +41,13 @@
</head> </head>
<body> <body>
<div id="dialog" title="Modal confirmation dialog">
<p>Example of a form placed inside a dialog.</p>
<div class="demo">
<div id="dialog" title="Create new user">
<p>All form fields are required.</p>
<form> <form>
<fieldset> <fieldset>
@ -56,12 +61,8 @@
</form> </form>
</div> </div>
<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
<!-- Sample page content to illustrate the semi-transparent overlay screen -->
<div style="padding:20px;">
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p>
<form> <form>
<input value="text input" /><br /> <input value="text input" /><br />
@ -72,6 +73,18 @@
</select><br /><br /> </select><br /><br />
<textarea>textarea</textarea><br /> <textarea>textarea</textarea><br />
</form> </form>
</div> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p>
</div><!-- End sample page content -->
</div><!-- End demo -->
<div class="demo-description">
<p>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.</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

31
demos/dialog/modal_message.html
View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Dialog - Buttons Demo</title> <title>jQuery UI Dialog - Modal Message Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script> <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
@ -28,16 +28,20 @@
</head> </head>
<body> <body>
<div id="dialog" title="Modal message dialog"> <div id="dialog" title="Download complete">
<p>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. </p><p>This example adds a button bar with a single 'ok' button to dismiss the dialog.</p> <p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Your files have downloaded successfully into the My Downloads folder.</p>
<p>Currently using <b>36% of your storage space</b>.</p>
</div> </div>
<div class="demo">
<!-- Sample page content to illustrate the semi-transparent overlay screen --> <div id="dialog" title="Basic dialog">
<div style="padding:20px;"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon. </p>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p> </div>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p>
<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p>
<form> <form>
<input value="text input" /><br /> <input value="text input" /><br />
@ -48,7 +52,18 @@
</select><br /><br /> </select><br /><br />
<textarea>textarea</textarea><br /> <textarea>textarea</textarea><br />
</form> </form>
</div> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. 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.</p>
</div><!-- End sample page content -->
</div><!-- End demo -->
<div class="demo-description">
<p>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. </p><p>This example adds a button bar with a single 'Ok' button to dismiss the dialog.</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>