<p>The icons used for the open and closed accordions can be any of the standard icons in the css framework or even a custom css class you create with an icon background image. For this example, we're using the arrow in a circle icons:
-<pre>
+<pre>
icons: {
header: "ui-icon-circle-arrow-e",
headerSelected: "ui-icon-circle-arrow-s"}
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Datepicker - Inline Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#date123").datepicker();\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-
-\r
-<div class="demo">\r
-\r
-Date: <div id="date123" /></div>\r
-\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Datepicker - Inline 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.datepicker.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#date123").datepicker();
+ });
+ </script>
+</head>
+<body>
+
+
+<div class="demo">
+
+Date: <div id="date123" /></div>
+
</div><!-- End demo -->
<p>This is an example of an inline date picker that is embedded in the page instead of opening in an overlay. This is done by calling .datepicker() in a div instead of an input.</p>
-</div><!-- End demo-description -->\r
-\r
-</body>\r
-</html>\r
+</div><!-- End demo-description -->
+
+</body>
+</html>
border-color: #BBBBBB;
}
-/* new styles for demo pages, added by Filament 12.29.08
+/* new styles for demo pages, added by Filament 12.29.08
eventually we should convert the font sizes to ems -- using px for now to minimize style conflicts
*/
#demo-config-menu li { font-size:11px; padding:0 0 0 10px; margin:3px 0; zoom: 1; }
-#demo-config-menu li a:link,
+#demo-config-menu li a:link,
#demo-config-menu li a:visited { display:block; padding:2px 8px 3px; border-bottom:1px dotted #b3b3b3; }
-#demo-config-menu li a:hover,
+#demo-config-menu li a:hover,
#demo-config-menu li a:active { background-color:#f6f6f6; }
#demo-config-menu li.demo-config-on { background: url(images/demo-config-on-tile.gif) repeat-x left center; }
-#demo-config-menu li.demo-config-on a:link,
-#demo-config-menu li.demo-config-on a:visited,
-#demo-config-menu li.demo-config-on a:hover,
+#demo-config-menu li.demo-config-on a:link,
+#demo-config-menu li.demo-config-on a:visited,
+#demo-config-menu li.demo-config-on a:hover,
#demo-config-menu li.demo-config-on a:active { background: url(images/demo-config-on.gif) no-repeat left; padding-left:18px; color:#fff; border:0; margin-left:-10px; }
#demo-source, #demo-notes {
#demo-source a.source-closed:hover,
#demo-source a.source-closed:active { background-image: url(images/demo-spindown-closed.gif); }
-div.demo {
- padding:12px;
+div.demo {
+ padding:12px;
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
}
-div.demo-description {
- padding:12px;
+div.demo-description {
+ padding:12px;
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
font-size: 1.3em;
line-height: 1.4em;
<div id="dialog" title="Basic dialog">
<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>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Dialog - Modal Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.dialog.js"></script>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#dialog").dialog({\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Dialog - Modal 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:140,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
}
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
+ });
+ });
+ </script>
+</head>
+<body>
+
<div class="demo">
<div id="dialog" title="Basic modal dialog">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</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>
<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 -->
-\r
-\r
-</body>\r
-</html>\r
+
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Dialog - Modal Confirmation Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.dialog.js"></script>\r
- <script type="text/javascript">\r
- $(function() {\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Dialog - Modal Confirmation 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({
resizable:false,
height:140,
$(this).dialog('close');
}
}
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
+ });
+ });
+ </script>
+</head>
+<body>
<div class="demo">
<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 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>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 -->
-\r
-\r
-</body>\r
-</html>\r
+
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Dialog - Modal Form Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.dialog.js"></script>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#dialog").dialog({\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Dialog - Modal Form 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: {
$(this).dialog('close');
}
}
- });\r
- });\r
- </script>\r
- \r
- <!-- Styles for this demo page -->\r
- <style type="text/css" media="screen">\r
- label, input { display:block; }\r
- input.text { margin-bottom:12px; width:95%; }\r
- fieldset { padding:0; border:0; margin-top:25px; }
+ });
+ });
+ </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>
-\r
-</head>\r
-<body>\r
-\r
-\r
-\r
-\r
+
+</head>
+<body>
+
+
+
+
<div class="demo">
-<div id="dialog" title="Create new user">\r
- <p>All form fields are required.</p>\r
- \r
- <form>\r
+<div id="dialog" title="Create new user">
+ <p>All form fields are required.</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="email" value="" class="text" />\r
+ <input type="text" name="email" id="email" value="" class="text" />
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text" />
</fieldset>
- </form>\r
+ </form>
</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>
<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 -->
-\r
-</body>\r
-</html>\r
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Dialog - Modal Message Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.dialog.js"></script>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#dialog").dialog({\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Dialog - Modal Message 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',
$(this).dialog('close');
}
}
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="dialog" title="Download complete">\r
- <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>\r
- <p>Currently using <b>36% of your storage space</b>.</p>\r
-</div>\r
-\r
-\r
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div id="dialog" title="Download complete">
+ <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 class="demo">
<div id="dialog" title="Basic dialog">
<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>
<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>\r
+<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 -->
-\r
-</body>\r
-</html>\r
+
+</body>
+</html>
<div class="ui-widget-content">
<p>We are draggables..</p>
</div>
-
+
<div class="ui-widget-content">
<p>..whose z-indexes are controlled automatically..</p>
</div>
-
+
<div class="ui-widget-content">
<p>..with the stack option.</p>
</div>
</style>
<script type="text/javascript">
$(function() {
-
+
$("#draggable,#draggable-nonvalid").draggable();
-
+
$("#droppable").droppable({
accept: '#draggable',
activeClass: 'ui-state-hover',
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
});
-
+
});
</script>
</head>
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
});
-
+
});
</script>
</head>
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
});
-
+
});
</script>
</head>
</style>
<script type="text/javascript">
$(function() {
-
+
$("#draggable").draggable();
-
+
$("#droppable, #droppable-inner").droppable({
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
});
-
+
$("#droppable2, #droppable2-inner").droppable({
greedy: true,
activeClass: 'ui-state-hover',
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
});
-
+
});
</script>
</head>
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
});
-
+
});
</script>
</head>
</style>
<script type="text/javascript">
$(function() {
-
+
$("#draggable").draggable({ revert: 'valid' });
$("#draggable2").draggable({ revert: 'invalid' });
-
+
$("#droppable").droppable({
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
});
-
+
});
</script>
</head>
</style>
<script type="text/javascript">
$(function() {
-
+
$("#draggable").draggable();
-
+
$("#droppable").droppable({
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
});
-
+
$("#droppable-fit").droppable({
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
});
-
+
$("#droppable-pointer").droppable({
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
});
-
+
$("#droppable-touch").droppable({
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
});
-
+
});
</script>
</head>
$('#demo-notes').hide();
});
});
-
+
$('#demo-frame').load(function() {
var content = $(this)[0].contentWindow.document || $(this).contents()[0];
var notes = $('.demo-description', content);
if ($('#demo-notes').length == 0) {
$('<div id="demo-notes"></div>').insertAfter('#demo-config');
- }
+ }
$('#demo-notes').hide().empty().html(notes.html());
$('#demo-notes').fadeIn();
notes.hide();
});
-
+
if ($('#demo-frame .demo-description:visible'))
$('#demo-frame').trigger('load');
})
ev.preventDefault();
});
});
- </script>
+ </script>
</head>
<body>
<?php } ?>
<dd><a href="droppable/index.html">Droppable</a></dd>
<dd><a href="resizable/index.html">Resizable</a></dd>
<dd><a href="selectable/index.html">Selectable</a></dd>
- <dd><a href="sortable/index.html">Sortable</a></dd>
+ <dd><a href="sortable/index.html">Sortable</a></dd>
<dt>Widgets</dt>
<dd><a href="accordion/index.html">Accordion</a></dd>
<dd><a href="datepicker/index.html">Datepicker</a></dd>
</dl>
</td>
<td class="normal">
-
+
<div class="normal">
<?php if(isset($plain) && $content) { echo $content; } else { ?>
-
+
<h3>Instructions</h3>
<p>
These demos showcase some common uses of each jQuery UI plugin. Simply copy and paste code from the demos to get started. Have fun playing with them.
</p>
<?php } ?>
</div>
-
+
</td>
</tr>
</table>
<div class="demo">
<div id="progressbar"></div>
-
+
</div><!-- End demo -->
<div class="demos-nav">
<h4>Examples</h4>
- <ul>
+ <ul>
<li class="demo-config-on"><a href="default.html">Default progress bar</a></li>
<li><a href="resize.html">Resizable bar</a></li>
</ul>
<body>
<div class="demo">
-
+
<div id="progressbarWrapper" style="height:10px; padding:2px;" class="ui-widget-default">
<div id="progressbar" style="height:100%;"></div>
</div>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Resizable - Also Resize Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>\r
- <style type="text/css">\r
- #resizable { background-position: top left; }\r
- #resizable, #also { width: 150px; height: 150px; padding: 0.5em; }\r
- #also { margin-top: 1em; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Resizable - Also Resize 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.resizable.js"></script>
+ <style type="text/css">
+ #resizable { background-position: top left; }
+ #resizable, #also { width: 150px; height: 150px; padding: 0.5em; }
+ #also { margin-top: 1em; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
$("#resizable").resizable({
alsoResize: '#also'
- });\r
- $("#also").resizable();\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="resizable" class="ui-widget-header">\r
- <p>Resize me</p>\r
-</div>\r
+ });
+ $("#also").resizable();
+ });
+ </script>
+</head>
+<body>
+
+<div id="resizable" class="ui-widget-header">
+ <p>Resize me</p>
+</div>
<div id="also" class="ui-widget-content">
<p>I will resize with the other div. I can also be resized independently.</p>
</div>
-\r
-</body>\r
-</html>\r
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Resizable - Animate Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>\r
- <style type="text/css">\r
- #resizable { width: 150px; height: 150px; padding: 0.5em; }\r
- .ui-resizable-helper { border: 1px dotted gray; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Resizable - Animate 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.resizable.js"></script>
+ <style type="text/css">
+ #resizable { width: 150px; height: 150px; padding: 0.5em; }
+ .ui-resizable-helper { border: 1px dotted gray; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
$("#resizable").resizable({
animate: true
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
+ });
+ });
+ </script>
+</head>
+<body>
-<div id="resizable" class="ui-widget-content">\r
- <p>Resize me</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<div id="resizable" class="ui-widget-content">
+ <p>Resize me</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Resizable - Aspect Ratio Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>\r
- <style type="text/css">\r
- #resizable { width: 160px; height: 90px; padding: 0.5em; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Resizable - Aspect Ratio 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.resizable.js"></script>
+ <style type="text/css">
+ #resizable { width: 160px; height: 90px; padding: 0.5em; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
$("#resizable").resizable({
aspectRatio: 16/9
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
+ });
+ });
+ </script>
+</head>
+<body>
-<div id="resizable" class="ui-widget-content">\r
- <p>Resize me</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<div id="resizable" class="ui-widget-content">
+ <p>Resize me</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Resizable - Containment Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>\r
- <style type="text/css">\r
- #resizable { background-position: top left; width: 150px; height: 150px; }\r
- #resizable, #container { padding: 0.5em; }\r
- #container { width: 300px; height: 300px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Resizable - Containment 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.resizable.js"></script>
+ <style type="text/css">
+ #resizable { background-position: top left; width: 150px; height: 150px; }
+ #resizable, #container { padding: 0.5em; }
+ #container { width: 300px; height: 300px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
$("#resizable").resizable({
containment: '#container'
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
+ });
+ });
+ </script>
+</head>
+<body>
-<div id="container" class="ui-widget-content">\r
+<div id="container" class="ui-widget-content">
<p>Container</p>
- <div id="resizable" class="ui-widget-header">\r
- <p>Resize me</p>\r
- </div>\r
+ <div id="resizable" class="ui-widget-header">
+ <p>Resize me</p>
+ </div>
</div>
-\r
-</body>\r
-</html>\r
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Resizable - Delay Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>\r
- <style type="text/css">\r
- #resizable { width: 150px; height: 150px; padding: 0.5em; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Resizable - Delay 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.resizable.js"></script>
+ <style type="text/css">
+ #resizable { width: 150px; height: 150px; padding: 0.5em; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
$("#resizable").resizable({
delay: 1000
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
+ });
+ });
+ </script>
+</head>
+<body>
-<div id="resizable" class="ui-widget-content">\r
- <p>Resize me</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<div id="resizable" class="ui-widget-content">
+ <p>Resize me</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Resizable - Distance Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>\r
- <style type="text/css">\r
- #resizable { width: 150px; height: 150px; padding: 0.5em; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Resizable - Distance 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.resizable.js"></script>
+ <style type="text/css">
+ #resizable { width: 150px; height: 150px; padding: 0.5em; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
$("#resizable").resizable({
distance: 40
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
+ });
+ });
+ </script>
+</head>
+<body>
-<div id="resizable" class="ui-widget-content">\r
- <p>Resize me</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<div id="resizable" class="ui-widget-content">
+ <p>Resize me</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Resizable - Ghost Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>\r
- <style type="text/css">\r
- #resizable { width: 150px; height: 150px; padding: 0.5em; }\r
- .ui-resizable-ghost { border: 1px dotted gray; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Resizable - Ghost 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.resizable.js"></script>
+ <style type="text/css">
+ #resizable { width: 150px; height: 150px; padding: 0.5em; }
+ .ui-resizable-ghost { border: 1px dotted gray; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
$("#resizable").resizable({
ghost: true
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
+ });
+ });
+ </script>
+</head>
+<body>
-<div id="resizable" class="ui-widget-content">\r
- <p>Resize me</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<div id="resizable" class="ui-widget-content">
+ <p>Resize me</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Resizable - Grid Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>\r
- <style type="text/css">\r
- #resizable { width: 150px; height: 150px; padding: 0.5em; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Resizable - Grid 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.resizable.js"></script>
+ <style type="text/css">
+ #resizable { width: 150px; height: 150px; padding: 0.5em; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
$("#resizable").resizable({
grid: 50
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
+ });
+ });
+ </script>
+</head>
+<body>
-<div id="resizable" class="ui-widget-content">\r
- <p>Resize me</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<div id="resizable" class="ui-widget-content">
+ <p>Resize me</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Resizable - Max Height / Width Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>\r
- <style type="text/css">\r
- #resizable { width: 150px; height: 150px; padding: 0.5em; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Resizable - Max Height / Width 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.resizable.js"></script>
+ <style type="text/css">
+ #resizable { width: 150px; height: 150px; padding: 0.5em; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
$("#resizable").resizable({
maxHeight: 250,
maxWidth: 350
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
+ });
+ });
+ </script>
+</head>
+<body>
-<div id="resizable" class="ui-widget-content">\r
- <p>Resize me</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<div id="resizable" class="ui-widget-content">
+ <p>Resize me</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Resizable - Min Height / Width Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>\r
- <style type="text/css">\r
- #resizable { width: 150px; height: 150px; padding: 0.5em; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Resizable - Min Height / Width 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.resizable.js"></script>
+ <style type="text/css">
+ #resizable { width: 150px; height: 150px; padding: 0.5em; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
$("#resizable").resizable({
minHeight: 50,
minWidth: 100
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
+ });
+ });
+ </script>
+</head>
+<body>
-<div id="resizable" class="ui-widget-content">\r
- <p>Resize me</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<div id="resizable" class="ui-widget-content">
+ <p>Resize me</p>
+</div>
+
+</body>
+</html>
<div class="demo-description">
-<p>Example of a range slider that had two drag handles and a filled bar that connects the two handles to indicate that the values between them are selected. THis is created by setting the range option:</p>
+<p>Example of a range slider that had two drag handles and a filled bar that connects the two handles to indicate that the values between them are selected. THis is created by setting the range option:</p>
<pre>
range: true,
-</pre>
+</pre>
</div><!-- End demo-description -->
<div class="demo-description">
-<p>This is an example of a vertical range slider created by setting the orientation to vertical:</p>
+<p>This is an example of a vertical range slider created by setting the orientation to vertical:</p>
<pre>
orientation: "vertical",
range: true,
values: [17, 67]
-</pre>
+</pre>
<p>It's important to note that a vertical slider needs a height set. You can do this via the script options or by adding a height through CSS. </p>
</div><!-- End demo-description -->
<div class="demo-description">
-<p>An example of a range slider that has the filled bar hard-coded to the maximum value plus a single slider. This makes it clear that selecting a value will also include all values above the selection. This is a range option type:</p>
+<p>An example of a range slider that has the filled bar hard-coded to the maximum value plus a single slider. This makes it clear that selecting a value will also include all values above the selection. This is a range option type:</p>
<pre>
range: "max",
-</pre>
+</pre>
<p>This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.</p>
</div><!-- End demo-description -->
<div class="demo-description">
-<p>An example of a range slider that has the filled bar hard-coded to the minimum value plus a single slider. This makes it clear that selecting a value will also include all values below the selection. This is a range option type:</p>
+<p>An example of a range slider that has the filled bar hard-coded to the minimum value plus a single slider. This makes it clear that selecting a value will also include all values below the selection. This is a range option type:</p>
<pre>
range: "min",
-</pre>
+</pre>
<p>This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.</p>
</div><!-- End demo-description -->
$("#slider-vertical").slider({
orientation: "vertical",
range: "min",
- min: 0,
- max: 100,
+ min: 0,
+ max: 100,
value: 60,
slide: function(event, ui) {
$("#amount").val(ui.value);
<div class="demo-description">
-<p>This is an example of a minimum range vertical slider created by setting the orientation to vertical:</p> <pre>orientation: "vertical",</pre>
+<p>This is an example of a minimum range vertical slider created by setting the orientation to vertical:</p> <pre>orientation: "vertical",</pre>
<p>It's important to note that a vertical slider needs a height set. You can do this via the script options or by adding a height through CSS. </p>
<p>This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.</p>
<div class="demo-description">
<p>This slider has a step value set that will only allow for increments of 50 to be selected. The default step increment is 1. The drag handle will snap to drop points every 50 units. This is set in an option called step:</p>
-<pre>
+<pre>
min: 0, max: 500, step: 50
</pre>
<p>This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.</p>
</style>
<script type="text/javascript">
$(function() {
-
+
$("ul:eq(0)").sortable({
delay: 1000
});
-
+
$("ul:eq(1)").sortable({
distance: 50
});
-
+
});
</script>
</head>
$("ul.droptrue").sortable({
connectWith: ['ul']
});
-
+
$("ul.dropfalse").sortable({
connectWith: ['ul'],
dropOnEmpty: false
$("ul:eq(0)").sortable({
items: 'li:not(.ui-state-disabled)'
});
-
+
$("ul:eq(1)").sortable({
cancel: '.ui-state-disabled'
});
projects / jquery-ui.git / commitdiff