mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-10-05 01:44:18 +00:00
slightly reorganized/renamed demos to better reflect functionality
This commit is contained in:
parent
134d8bd5d2
commit
25c6c7e7ef
@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Dialog - Default Demo</title>
|
||||
<title>jQuery UI Dialog - Default functionality</title>
|
||||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.3.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
@ -43,17 +43,7 @@
|
||||
|
||||
<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 dialog content element, like this:
|
||||
</p>
|
||||
|
||||
<pre><code>$("#dialog").dialog();
|
||||
</code></pre>
|
||||
|
||||
<p>
|
||||
A basic dialog window has a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.
|
||||
</p>
|
||||
<p>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.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
|
@ -9,7 +9,7 @@
|
||||
<div class="demos-nav">
|
||||
<h4>Examples</h4>
|
||||
<ul>
|
||||
<li class="demo-config-on"><a href="default.html">Default Dialog</a></li>
|
||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="modal.html">Modal dialog</a></li>
|
||||
<li><a href="modal_message.html">Modal message</a></li>
|
||||
<li><a href="modal_confirmation.html">Modal confirmation</a></li>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Dialog - Modal Demo</title>
|
||||
<title>jQuery UI Dialog - Basic modal</title>
|
||||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.3.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
@ -51,14 +51,7 @@
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>
|
||||
This is a simple modal dialog with a semi-transparent overlay layer added as an option to dim out the page content behind it and bring the user's attention to the dialog.
|
||||
A modal dialog prevents the user from interacting with the rest of the page until it is closed.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The dialog window can be moved, resized and closed with the 'x' icon.
|
||||
</p>
|
||||
<p>A modal dialog prevents the user from interacting with the rest of the page until it is closed. To add a semi-transparent layer that dims out the page content behind the dialog, set the background color and opacity of the <strong>overlay</strong> option.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Dialog - Modal Confirmation Demo</title>
|
||||
<title>jQuery UI Dialog - Modal confirmation</title>
|
||||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.3.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
@ -59,11 +59,7 @@
|
||||
|
||||
<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 an icon from the css sprite set and is set to be not resizable by setting the resizable option to false.
|
||||
</p>
|
||||
<p>Confirm an action that may be destructive or important. Set the <strong>modal</strong> option to true, and specify primary and secondary user actions with the <strong>buttons</strong> option.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Dialog - Modal Form Demo</title>
|
||||
<title>jQuery UI Dialog - Modal form</title>
|
||||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.3.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
@ -74,10 +74,7 @@
|
||||
|
||||
<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>
|
||||
<p>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 <strong>modal</strong> option to true, and specify primary and secondary user actions with the <strong>buttons</strong> option.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Dialog - Modal Message Demo</title>
|
||||
<title>jQuery UI Dialog - Modal message</title>
|
||||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.3.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
@ -60,13 +60,7 @@
|
||||
|
||||
<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>
|
||||
<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the <strong>modal</strong> option to true, and specify a primary action (Ok) with the <strong>buttons</strong> option.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user