mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Re-vamped set of dialog examples that shows the standard set of dialog types. Removed button.html because it was expanded into the 3 modal types.
This commit is contained in:
Todd Parker
parent
622f34aeb9
commit
9f91a25ca3
@ -1,35 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Dialog - Buttons Demo</title>
|
||||
<link type="text/css" href="../demos.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="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#dialog").dialog({
|
||||
buttons: {
|
||||
Ok: function() {
|
||||
alert('You clicked Ok!');
|
||||
},
|
||||
Cancel: function() {
|
||||
alert('You clicked Cancel. The dialog will now close.');
|
||||
$(this).dialog('close');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="dialog" title="Curabitur augue">
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -17,8 +17,9 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="dialog" title="Curabitur augue">
|
||||
<p>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.</p>
|
||||
<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>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>
|
||||
|
||||
</body>
|
||||
|
||||
@ -8,9 +8,11 @@
|
||||
|
||||
<dl class="nav">
|
||||
<dt>Dialog</dt>
|
||||
<dd><a href="default.html">Default</a></dd>
|
||||
<dd><a href="buttons.html">Buttons</a></dd>
|
||||
<dd><a href="modal.html">Modal</a></dd>
|
||||
<dd><a href="default.html">Basic dialog (default)</a></dd>
|
||||
<dd><a href="modal.html">Modal dialog</a></dd>
|
||||
<dd><a href="modal_message.html">Modal message</a></dd>
|
||||
<dd><a href="modal_confirmation.html">Modal confirmation</a></dd>
|
||||
<dd><a href="modal_form.html">Modal form</a></dd>
|
||||
</dl>
|
||||
|
||||
</body>
|
||||
|
||||
@ -23,11 +23,12 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="dialog" title="Curabitur augue">
|
||||
<p>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.</p>
|
||||
<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>
|
||||
|
||||
<div>
|
||||
<!-- 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>
|
||||
@ -37,9 +38,10 @@
|
||||
<input type="radio" />radio<br />
|
||||
<select>
|
||||
<option>select</option>
|
||||
</select><br />
|
||||
</select><br /><br />
|
||||
<textarea>textarea</textarea><br />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
56
demos/dialog/modal_confirmation.html
Normal file
56
demos/dialog/modal_confirmation.html
Normal file
@ -0,0 +1,56 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Dialog - Buttons Demo</title>
|
||||
<link type="text/css" href="../demos.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="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#dialog").dialog({
|
||||
modal: true,
|
||||
overlay: {
|
||||
backgroundColor: '#000',
|
||||
opacity: 0.5
|
||||
},
|
||||
buttons: {
|
||||
'Delete this file': function() {
|
||||
alert('The user was deleted forever!');
|
||||
},
|
||||
Cancel: function() {
|
||||
alert('You clicked Cancel. The dialog will now close.');
|
||||
$(this).dialog('close');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<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 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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
77
demos/dialog/modal_form.html
Normal file
77
demos/dialog/modal_form.html
Normal file
@ -0,0 +1,77 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Dialog - Buttons Demo</title>
|
||||
<link type="text/css" href="../demos.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="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#dialog").dialog({
|
||||
height: '300',
|
||||
modal: true,
|
||||
overlay: {
|
||||
backgroundColor: '#000',
|
||||
opacity: 0.5
|
||||
},
|
||||
buttons: {
|
||||
'Create user account': function() {
|
||||
alert('The user was created!');
|
||||
},
|
||||
Cancel: function() {
|
||||
alert('You clicked Cancel. The dialog will now close.');
|
||||
$(this).dialog('close');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Styles for this demo page -->
|
||||
<style type="text/css" media="screen">
|
||||
label, input { display:block; }
|
||||
input.text { margin-bottom:12px; width:95%; }
|
||||
fieldset { padding:0; border:0; margin-top:25px; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="dialog" title="Modal confirmation dialog">
|
||||
<p>Example of a form placed inside a dialog.</p>
|
||||
|
||||
<form>
|
||||
<fieldset>
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" id="name" class="text" />
|
||||
<label for="email">Email</label>
|
||||
<input type="text" name="email" id="birthday" value="" class="text" />
|
||||
<label for="password">Password</label>
|
||||
<input type="password" name="password" id="birthday" value="" class="text" />
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
54
demos/dialog/modal_message.html
Normal file
54
demos/dialog/modal_message.html
Normal file
@ -0,0 +1,54 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Dialog - Buttons Demo</title>
|
||||
<link type="text/css" href="../demos.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="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#dialog").dialog({
|
||||
modal: true,
|
||||
overlay: {
|
||||
backgroundColor: '#000',
|
||||
opacity: 0.5
|
||||
},
|
||||
buttons: {
|
||||
Ok: function() {
|
||||
alert('You clicked Ok!');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="dialog" title="Modal message dialog">
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user