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

36
demos/dialog/default.html
View File

@ -17,10 +17,38 @@
</head> </head>
<body> <body>
<div id="dialog" title="Basic dialog"> <div class="demo">
<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>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 id="dialog" title="Basic dialog">
</div> <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>
</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>

52
demos/dialog/modal.html
View File

@ -11,7 +11,8 @@
<script type="text/javascript" src="../../ui/ui.dialog.js"></script> <script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<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,25 +24,38 @@
</head> </head>
<body> <body>
<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>
</div>
<!-- Sample page content to illustrate the semi-transparent overlay screen --> <div class="demo">
<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> <div id="dialog" title="Basic modal dialog">
<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>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</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>
<form>
<input value="text input" /><br /> <!-- Sample page content to illustrate the layering of the dialog -->
<input type="checkbox" />checkbox<br /> <div class="hiddenInViewSource" style="padding:20px;">
<input type="radio" />radio<br /> <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>
<select> <form>
<option>select</option> <input value="text input" /><br />
</select><br /><br /> <input type="checkbox" />checkbox<br />
<textarea>textarea</textarea><br /> <input type="radio" />radio<br />
</form> <select>
</div> <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 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>

58
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.');
@ -31,26 +33,38 @@
</script> </script>
</head> </head>
<body> <body>
<div id="dialog" title="Modal confirmation dialog">
<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>
<!-- Sample page content to illustrate the semi-transparent overlay screen --> <div class="demo">
<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> <div id="dialog" title="Empty the recycle bin?">
<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><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>
<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>
<form>
<input value="text input" /><br /> <!-- Sample page content to illustrate the layering of the dialog -->
<input type="checkbox" />checkbox<br /> <div class="hiddenInViewSource" style="padding:20px;">
<input type="radio" />radio<br /> <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>
<select> <form>
<option>select</option> <input value="text input" /><br />
</select><br /><br /> <input type="checkbox" />checkbox<br />
<textarea>textarea</textarea><br /> <input type="radio" />radio<br />
</form> <select>
</div> <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 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>

55
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>
@ -54,24 +59,32 @@
<input type="password" name="password" id="password" value="" class="text" /> <input type="password" name="password" id="password" value="" class="text" />
</fieldset> </fieldset>
</form> </form>
</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 -->
<!-- Sample page content to illustrate the semi-transparent overlay screen --> </div><!-- End demo -->
<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> <div class="demo-description">
<form>
<input value="text input" /><br /> <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>
<input type="checkbox" />checkbox<br />
<input type="radio" />radio<br /> </div><!-- End demo-description -->
<select>
<option>select</option>
</select><br /><br />
<textarea>textarea</textarea><br />
</form>
</div>
</body> </body>
</html> </html>

51
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,27 +28,42 @@
</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>
<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 -->
<form> <div class="hiddenInViewSource" style="padding:20px;">
<input value="text input" /><br /> <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>
<input type="checkbox" />checkbox<br /> <form>
<input type="radio" />radio<br /> <input value="text input" /><br />
<select> <input type="checkbox" />checkbox<br />
<option>select</option> <input type="radio" />radio<br />
</select><br /><br /> <select>
<textarea>textarea</textarea><br /> <option>select</option>
</form> </select><br /><br />
</div> <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>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>