library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

demos: whitespace fixes

Browse Source 
- trailing whitespace
- inconsistent line endings
- set svn:eol-style to native
This commit is contained in:
Richard Worth 2008-12-31 01:20:50 +00:00
parent 2789fca8af
commit 9a35874d44
39 changed files with 464 additions and 464 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demos/accordion/custom_icons.html
View File

@ -63,7 +63,7 @@
<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: <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: { icons: {
header: "ui-icon-circle-arrow-e", header: "ui-icon-circle-arrow-e",
headerSelected: "ui-icon-circle-arrow-s"} headerSelected: "ui-icon-circle-arrow-s"}

50
demos/datepicker/inline.html
View File

@ -1,25 +1,25 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Datepicker - Inline Demo</title> <title>jQuery UI Datepicker - Inline 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>
<script type="text/javascript" src="../../ui/ui.core.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" src="../../ui/ui.datepicker.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#date123").datepicker(); $("#date123").datepicker();
}); });
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
Date: <div id="date123" /></div>
<div class="demo">
Date: <div id="date123" /></div>
</div><!-- End demo --> </div><!-- End demo -->
@ -28,7 +28,7 @@ Date: <div id="date123" /></div>
<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> <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 --> </div><!-- End demo-description -->
</body> </body>
</html> </html>

20
demos/demos.css
View File

@ -110,7 +110,7 @@ body {
border-color: #BBBBBB; 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 eventually we should convert the font sizes to ems -- using px for now to minimize style conflicts
*/ */
@ -132,16 +132,16 @@ eventually we should convert the font sizes to ems -- using px for now to minimi
#demo-config-menu li { font-size:11px; padding:0 0 0 10px; margin:3px 0; zoom: 1; } #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: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 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 { 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:link,
#demo-config-menu li.demo-config-on a:visited, #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: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-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, #demo-notes {
@ -168,13 +168,13 @@ eventually we should convert the font sizes to ems -- using px for now to minimi
#demo-source a.source-closed:hover, #demo-source a.source-closed:hover,
#demo-source a.source-closed:active { background-image: url(images/demo-spindown-closed.gif); } #demo-source a.source-closed:active { background-image: url(images/demo-spindown-closed.gif); }
div.demo { div.demo {
padding:12px; padding:12px;
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
} }
div.demo-description { div.demo-description {
padding:12px; padding:12px;
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
font-size: 1.3em; font-size: 1.3em;
line-height: 1.4em; line-height: 1.4em;

2
demos/dialog/default.html
View File

@ -22,7 +22,7 @@
<div id="dialog" title="Basic dialog"> <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> <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> </div>
<!-- Sample page content to illustrate the layering of the dialog --> <!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" 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>

50
demos/dialog/modal.html
View File

@ -1,36 +1,36 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Dialog - Modal Demo</title> <title>jQuery UI Dialog - Modal 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>
<script type="text/javascript" src="../../ui/ui.core.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.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.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" src="../../ui/ui.dialog.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#dialog").dialog({ $("#dialog").dialog({
height:140, height:140,
modal: true, modal: true,
overlay: { overlay: {
backgroundColor: '#000', backgroundColor: '#000',
opacity: 0.5 opacity: 0.5
} }
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<div class="demo"> <div class="demo">
<div id="dialog" title="Basic modal dialog"> <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> <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 layering of the dialog --> <!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" 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>
@ -55,7 +55,7 @@
<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> <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 --> </div><!-- End demo-description -->
</body> </body>
</html> </html>

46
demos/dialog/modal_confirmation.html
View File

@ -1,16 +1,16 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Dialog - Modal Confirmation 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>
<script type="text/javascript" src="../../ui/ui.core.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.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.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" src="../../ui/ui.dialog.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#dialog").dialog({ $("#dialog").dialog({
resizable:false, resizable:false,
height:140, height:140,
@ -27,18 +27,18 @@
$(this).dialog('close'); $(this).dialog('close');
} }
} }
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<div class="demo"> <div class="demo">
<div id="dialog" title="Empty the recycle bin?"> <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> <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> </div>
<!-- Sample page content to illustrate the layering of the dialog --> <!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" 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>
@ -63,7 +63,7 @@
<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> <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 --> </div><!-- End demo-description -->
</body> </body>
</html> </html>

80
demos/dialog/modal_form.html
View File

@ -1,17 +1,17 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Dialog - Modal Form 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>
<script type="text/javascript" src="../../ui/ui.core.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.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.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" src="../../ui/ui.dialog.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#dialog").dialog({ $("#dialog").dialog({
height: '300', height: '300',
modal: true, modal: true,
overlay: { overlay: {
@ -26,40 +26,40 @@
$(this).dialog('close'); $(this).dialog('close');
} }
} }
}); });
}); });
</script> </script>
<!-- Styles for this demo page --> <!-- Styles for this demo page -->
<style type="text/css" media="screen"> <style type="text/css" media="screen">
label, input { display:block; } label, input { display:block; }
input.text { margin-bottom:12px; width:95%; } input.text { margin-bottom:12px; width:95%; }
fieldset { padding:0; border:0; margin-top:25px; } fieldset { padding:0; border:0; margin-top:25px; }
</style> </style>
</head> </head>
<body> <body>
<div class="demo"> <div class="demo">
<div id="dialog" title="Create new user"> <div id="dialog" title="Create new user">
<p>All form fields are required.</p> <p>All form fields are required.</p>
<form> <form>
<fieldset> <fieldset>
<label for="name">Name</label> <label for="name">Name</label>
<input type="text" name="name" id="name" class="text" /> <input type="text" name="name" id="name" class="text" />
<label for="email">Email</label> <label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text" /> <input type="text" name="email" id="email" value="" class="text" />
<label for="password">Password</label> <label for="password">Password</label>
<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 --> <!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" 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>
@ -84,6 +84,6 @@
<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>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 --> </div><!-- End demo-description -->
</body> </body>
</html> </html>

62
demos/dialog/modal_message.html
View File

@ -1,17 +1,17 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Dialog - Modal Message 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>
<script type="text/javascript" src="../../ui/ui.core.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.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.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" src="../../ui/ui.dialog.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#dialog").dialog({ $("#dialog").dialog({
modal: true, modal: true,
overlay: { overlay: {
backgroundColor: '#000', backgroundColor: '#000',
@ -22,24 +22,24 @@
$(this).dialog('close'); $(this).dialog('close');
} }
} }
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="dialog" title="Download complete"> <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><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> <p>Currently using <b>36% of your storage space</b>.</p>
</div> </div>
<div class="demo"> <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. The dialog window can be moved, resized and closed with the 'x' icon. </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>
</div> </div>
<!-- Sample page content to illustrate the layering of the dialog --> <!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" 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>
@ -61,9 +61,9 @@
<div class="demo-description"> <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>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 --> </div><!-- End demo-description -->
</body> </body>
</html> </html>

4
demos/draggable/zindexstack.html
View File

@ -28,11 +28,11 @@
<div class="ui-widget-content"> <div class="ui-widget-content">
<p>We are draggables..</p> <p>We are draggables..</p>
</div> </div>
<div class="ui-widget-content"> <div class="ui-widget-content">
<p>..whose z-indexes are controlled automatically..</p> <p>..whose z-indexes are controlled automatically..</p>
</div> </div>
<div class="ui-widget-content"> <div class="ui-widget-content">
<p>..with the stack option.</p> <p>..with the stack option.</p>
</div> </div>

6
demos/droppable/accept.html
View File

@ -14,9 +14,9 @@
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#draggable,#draggable-nonvalid").draggable(); $("#draggable,#draggable-nonvalid").draggable();
$("#droppable").droppable({ $("#droppable").droppable({
accept: '#draggable', accept: '#draggable',
activeClass: 'ui-state-hover', activeClass: 'ui-state-hover',
@ -25,7 +25,7 @@
$(this).addClass('ui-state-highlight').find('p').html('Dropped!'); $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
} }
}); });
}); });
</script> </script>
</head> </head>

2
demos/droppable/activeclass.html
View File

@ -22,7 +22,7 @@
$(this).addClass('ui-state-highlight').find('p').html('Dropped!'); $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
} }
}); });
}); });
</script> </script>
</head> </head>

2
demos/droppable/default.html
View File

@ -20,7 +20,7 @@
$(this).addClass('ui-state-highlight').find('p').html('Dropped!'); $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
} }
}); });
}); });
</script> </script>
</head> </head>

8
demos/droppable/greedy.html
View File

@ -15,9 +15,9 @@
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#draggable").draggable(); $("#draggable").draggable();
$("#droppable, #droppable-inner").droppable({ $("#droppable, #droppable-inner").droppable({
activeClass: 'ui-state-hover', activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active', hoverClass: 'ui-state-active',
@ -25,7 +25,7 @@
$(this).addClass('ui-state-highlight').find('p').html('Dropped!'); $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
} }
}); });
$("#droppable2, #droppable2-inner").droppable({ $("#droppable2, #droppable2-inner").droppable({
greedy: true, greedy: true,
activeClass: 'ui-state-hover', activeClass: 'ui-state-hover',
@ -34,7 +34,7 @@
$(this).addClass('ui-state-highlight').find('p').html('Dropped!'); $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
} }
}); });
}); });
</script> </script>
</head> </head>

2
demos/droppable/hoverclass.html
View File

@ -21,7 +21,7 @@
$(this).addClass('ui-state-highlight').find('p').html('Dropped!'); $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
} }
}); });
}); });
</script> </script>
</head> </head>

6
demos/droppable/revert.html
View File

@ -14,10 +14,10 @@
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#draggable").draggable({ revert: 'valid' }); $("#draggable").draggable({ revert: 'valid' });
$("#draggable2").draggable({ revert: 'invalid' }); $("#draggable2").draggable({ revert: 'invalid' });
$("#droppable").droppable({ $("#droppable").droppable({
activeClass: 'ui-state-hover', activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active', hoverClass: 'ui-state-active',
@ -25,7 +25,7 @@
$(this).addClass('ui-state-highlight').find('p').html('Dropped!'); $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
} }
}); });
}); });
</script> </script>
</head> </head>

12
demos/droppable/tolerance.html
View File

@ -14,9 +14,9 @@
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#draggable").draggable(); $("#draggable").draggable();
$("#droppable").droppable({ $("#droppable").droppable({
activeClass: 'ui-state-hover', activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active', hoverClass: 'ui-state-active',
@ -24,7 +24,7 @@
$(this).addClass('ui-state-highlight').find('p').html('Dropped!'); $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
} }
}); });
$("#droppable-fit").droppable({ $("#droppable-fit").droppable({
activeClass: 'ui-state-hover', activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active', hoverClass: 'ui-state-active',
@ -33,7 +33,7 @@
$(this).addClass('ui-state-highlight').find('p').html('Dropped!'); $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
} }
}); });
$("#droppable-pointer").droppable({ $("#droppable-pointer").droppable({
activeClass: 'ui-state-hover', activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active', hoverClass: 'ui-state-active',
@ -42,7 +42,7 @@
$(this).addClass('ui-state-highlight').find('p').html('Dropped!'); $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
} }
}); });
$("#droppable-touch").droppable({ $("#droppable-touch").droppable({
activeClass: 'ui-state-hover', activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active', hoverClass: 'ui-state-active',
@ -51,7 +51,7 @@
$(this).addClass('ui-state-highlight').find('p').html('Dropped!'); $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
} }
}); });
}); });
</script> </script>
</head> </head>

16
demos/index.html
View File

@ -41,18 +41,18 @@
$('#demo-notes').hide(); $('#demo-notes').hide();
}); });
}); });
$('#demo-frame').load(function() { $('#demo-frame').load(function() {
var content = $(this)[0].contentWindow.document || $(this).contents()[0]; var content = $(this)[0].contentWindow.document || $(this).contents()[0];
var notes = $('.demo-description', content); var notes = $('.demo-description', content);
if ($('#demo-notes').length == 0) { if ($('#demo-notes').length == 0) {
$('<div id="demo-notes"></div>').insertAfter('#demo-config'); $('<div id="demo-notes"></div>').insertAfter('#demo-config');
} }
$('#demo-notes').hide().empty().html(notes.html()); $('#demo-notes').hide().empty().html(notes.html());
$('#demo-notes').fadeIn(); $('#demo-notes').fadeIn();
notes.hide(); notes.hide();
}); });
if ($('#demo-frame .demo-description:visible')) if ($('#demo-frame .demo-description:visible'))
$('#demo-frame').trigger('load'); $('#demo-frame').trigger('load');
}) })
@ -62,7 +62,7 @@
ev.preventDefault(); ev.preventDefault();
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<?php } ?> <?php } ?>
@ -76,7 +76,7 @@
<dd><a href="droppable/index.html">Droppable</a></dd> <dd><a href="droppable/index.html">Droppable</a></dd>
<dd><a href="resizable/index.html">Resizable</a></dd> <dd><a href="resizable/index.html">Resizable</a></dd>
<dd><a href="selectable/index.html">Selectable</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> <dt>Widgets</dt>
<dd><a href="accordion/index.html">Accordion</a></dd> <dd><a href="accordion/index.html">Accordion</a></dd>
<dd><a href="datepicker/index.html">Datepicker</a></dd> <dd><a href="datepicker/index.html">Datepicker</a></dd>
@ -91,17 +91,17 @@
</dl> </dl>
</td> </td>
<td class="normal"> <td class="normal">
<div class="normal"> <div class="normal">
<?php if(isset($plain) && $content) { echo $content; } else { ?> <?php if(isset($plain) && $content) { echo $content; } else { ?>
<h3>Instructions</h3> <h3>Instructions</h3>
<p> <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. 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> </p>
<?php } ?> <?php } ?>
</div> </div>
</td> </td>
</tr> </tr>
</table> </table>

2
demos/progressbar/default.html
View File

@ -20,7 +20,7 @@
<div class="demo"> <div class="demo">
<div id="progressbar"></div> <div id="progressbar"></div>
</div><!-- End demo --> </div><!-- End demo -->

2
demos/progressbar/index.html
View File

@ -8,7 +8,7 @@
<div class="demos-nav"> <div class="demos-nav">
<h4>Examples</h4> <h4>Examples</h4>
<ul> <ul>
<li class="demo-config-on"><a href="default.html">Default progress bar</a></li> <li class="demo-config-on"><a href="default.html">Default progress bar</a></li>
<li><a href="resize.html">Resizable bar</a></li> <li><a href="resize.html">Resizable bar</a></li>
</ul> </ul>

2
demos/progressbar/resize.html
View File

@ -24,7 +24,7 @@
<body> <body>
<div class="demo"> <div class="demo">
<div id="progressbarWrapper" style="height:10px; padding:2px;" class="ui-widget-default"> <div id="progressbarWrapper" style="height:10px; padding:2px;" class="ui-widget-default">
<div id="progressbar" style="height:100%;"></div> <div id="progressbar" style="height:100%;"></div>
</div> </div>

58
demos/resizable/alsoresize.html
View File

@ -1,35 +1,35 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Resizable - Also Resize Demo</title> <title>jQuery UI Resizable - Also Resize 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>
<script type="text/javascript" src="../../ui/ui.core.js"></script> <script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script> <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<style type="text/css"> <style type="text/css">
#resizable { background-position: top left; } #resizable { background-position: top left; }
#resizable, #also { width: 150px; height: 150px; padding: 0.5em; } #resizable, #also { width: 150px; height: 150px; padding: 0.5em; }
#also { margin-top: 1em; } #also { margin-top: 1em; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#resizable").resizable({ $("#resizable").resizable({
alsoResize: '#also' alsoResize: '#also'
}); });
$("#also").resizable(); $("#also").resizable();
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="resizable" class="ui-widget-header"> <div id="resizable" class="ui-widget-header">
<p>Resize me</p> <p>Resize me</p>
</div> </div>
<div id="also" class="ui-widget-content"> <div id="also" class="ui-widget-content">
<p>I will resize with the other div. I can also be resized independently.</p> <p>I will resize with the other div. I can also be resized independently.</p>
</div> </div>
</body> </body>
</html> </html>

52
demos/resizable/animate.html
View File

@ -1,29 +1,29 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Resizable - Animate Demo</title> <title>jQuery UI Resizable - Animate 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>
<script type="text/javascript" src="../../ui/ui.core.js"></script> <script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script> <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<style type="text/css"> <style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable { width: 150px; height: 150px; padding: 0.5em; }
.ui-resizable-helper { border: 1px dotted gray; } .ui-resizable-helper { border: 1px dotted gray; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#resizable").resizable({ $("#resizable").resizable({
animate: true animate: true
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="resizable" class="ui-widget-content"> <div id="resizable" class="ui-widget-content">
<p>Resize me</p> <p>Resize me</p>
</div> </div>
</body> </body>
</html> </html>

50
demos/resizable/aspectratio.html
View File

@ -1,28 +1,28 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Resizable - Aspect Ratio Demo</title> <title>jQuery UI Resizable - Aspect Ratio 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>
<script type="text/javascript" src="../../ui/ui.core.js"></script> <script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script> <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<style type="text/css"> <style type="text/css">
#resizable { width: 160px; height: 90px; padding: 0.5em; } #resizable { width: 160px; height: 90px; padding: 0.5em; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#resizable").resizable({ $("#resizable").resizable({
aspectRatio: 16/9 aspectRatio: 16/9
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="resizable" class="ui-widget-content"> <div id="resizable" class="ui-widget-content">
<p>Resize me</p> <p>Resize me</p>
</div> </div>
</body> </body>
</html> </html>

56
demos/resizable/containment.html
View File

@ -1,33 +1,33 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Resizable - Containment Demo</title> <title>jQuery UI Resizable - Containment 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>
<script type="text/javascript" src="../../ui/ui.core.js"></script> <script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script> <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<style type="text/css"> <style type="text/css">
#resizable { background-position: top left; width: 150px; height: 150px; } #resizable { background-position: top left; width: 150px; height: 150px; }
#resizable, #container { padding: 0.5em; } #resizable, #container { padding: 0.5em; }
#container { width: 300px; height: 300px; } #container { width: 300px; height: 300px; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#resizable").resizable({ $("#resizable").resizable({
containment: '#container' containment: '#container'
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="container" class="ui-widget-content"> <div id="container" class="ui-widget-content">
<p>Container</p> <p>Container</p>
<div id="resizable" class="ui-widget-header"> <div id="resizable" class="ui-widget-header">
<p>Resize me</p> <p>Resize me</p>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

50
demos/resizable/delay.html
View File

@ -1,28 +1,28 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Resizable - Delay Demo</title> <title>jQuery UI Resizable - Delay 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>
<script type="text/javascript" src="../../ui/ui.core.js"></script> <script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script> <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<style type="text/css"> <style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable { width: 150px; height: 150px; padding: 0.5em; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#resizable").resizable({ $("#resizable").resizable({
delay: 1000 delay: 1000
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="resizable" class="ui-widget-content"> <div id="resizable" class="ui-widget-content">
<p>Resize me</p> <p>Resize me</p>
</div> </div>
</body> </body>
</html> </html>

50
demos/resizable/distance.html
View File

@ -1,28 +1,28 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Resizable - Distance Demo</title> <title>jQuery UI Resizable - Distance 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>
<script type="text/javascript" src="../../ui/ui.core.js"></script> <script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script> <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<style type="text/css"> <style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable { width: 150px; height: 150px; padding: 0.5em; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#resizable").resizable({ $("#resizable").resizable({
distance: 40 distance: 40
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="resizable" class="ui-widget-content"> <div id="resizable" class="ui-widget-content">
<p>Resize me</p> <p>Resize me</p>
</div> </div>
</body> </body>
</html> </html>

52
demos/resizable/ghost.html
View File

@ -1,29 +1,29 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Resizable - Ghost Demo</title> <title>jQuery UI Resizable - Ghost 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>
<script type="text/javascript" src="../../ui/ui.core.js"></script> <script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script> <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<style type="text/css"> <style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable { width: 150px; height: 150px; padding: 0.5em; }
.ui-resizable-ghost { border: 1px dotted gray; } .ui-resizable-ghost { border: 1px dotted gray; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#resizable").resizable({ $("#resizable").resizable({
ghost: true ghost: true
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="resizable" class="ui-widget-content"> <div id="resizable" class="ui-widget-content">
<p>Resize me</p> <p>Resize me</p>
</div> </div>
</body> </body>
</html> </html>

50
demos/resizable/grid.html
View File

@ -1,28 +1,28 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Resizable - Grid Demo</title> <title>jQuery UI Resizable - Grid 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>
<script type="text/javascript" src="../../ui/ui.core.js"></script> <script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script> <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<style type="text/css"> <style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable { width: 150px; height: 150px; padding: 0.5em; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#resizable").resizable({ $("#resizable").resizable({
grid: 50 grid: 50
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="resizable" class="ui-widget-content"> <div id="resizable" class="ui-widget-content">
<p>Resize me</p> <p>Resize me</p>
</div> </div>
</body> </body>
</html> </html>

50
demos/resizable/max.html
View File

@ -1,29 +1,29 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Resizable - Max Height / Width Demo</title> <title>jQuery UI Resizable - Max Height / Width 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>
<script type="text/javascript" src="../../ui/ui.core.js"></script> <script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script> <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<style type="text/css"> <style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable { width: 150px; height: 150px; padding: 0.5em; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#resizable").resizable({ $("#resizable").resizable({
maxHeight: 250, maxHeight: 250,
maxWidth: 350 maxWidth: 350
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="resizable" class="ui-widget-content"> <div id="resizable" class="ui-widget-content">
<p>Resize me</p> <p>Resize me</p>
</div> </div>
</body> </body>
</html> </html>

50
demos/resizable/min.html
View File

@ -1,29 +1,29 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Resizable - Min Height / Width Demo</title> <title>jQuery UI Resizable - Min Height / Width 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>
<script type="text/javascript" src="../../ui/ui.core.js"></script> <script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script> <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<style type="text/css"> <style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable { width: 150px; height: 150px; padding: 0.5em; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#resizable").resizable({ $("#resizable").resizable({
minHeight: 50, minHeight: 50,
minWidth: 100 minWidth: 100
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="resizable" class="ui-widget-content"> <div id="resizable" class="ui-widget-content">
<p>Resize me</p> <p>Resize me</p>
</div> </div>
</body> </body>
</html> </html>

4
demos/slider/range.html
View File

@ -32,10 +32,10 @@
<div class="demo-description"> <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> <pre>
range: true, range: true,
</pre> </pre>
</div><!-- End demo-description --> </div><!-- End demo-description -->

4
demos/slider/range_vertical.html
View File

@ -30,12 +30,12 @@
<div class="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> <pre>
orientation: "vertical", orientation: "vertical",
range: true, range: true,
values: [17, 67] 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> <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><!-- End demo-description -->

4
demos/slider/rangemax.html
View File

@ -34,10 +34,10 @@
<div class="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> <pre>
range: "max", 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> <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><!-- End demo-description -->

4
demos/slider/rangemin.html
View File

@ -34,10 +34,10 @@
<div class="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> <pre>
range: "min", 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> <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><!-- End demo-description -->

6
demos/slider/slider_vertical.html
View File

@ -12,8 +12,8 @@
$("#slider-vertical").slider({ $("#slider-vertical").slider({
orientation: "vertical", orientation: "vertical",
range: "min", range: "min",
min: 0, min: 0,
max: 100, max: 100,
value: 60, value: 60,
slide: function(event, ui) { slide: function(event, ui) {
$("#amount").val(ui.value); $("#amount").val(ui.value);
@ -36,7 +36,7 @@
<div class="demo-description"> <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>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> <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>

2
demos/slider/steps.html
View File

@ -35,7 +35,7 @@
<div class="demo-description"> <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> <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 min: 0, max: 500, step: 50
</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> <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>

6
demos/sortable/delaydistance.html
View File

@ -13,15 +13,15 @@
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("ul:eq(0)").sortable({ $("ul:eq(0)").sortable({
delay: 1000 delay: 1000
}); });
$("ul:eq(1)").sortable({ $("ul:eq(1)").sortable({
distance: 50 distance: 50
}); });
}); });
</script> </script>
</head> </head>

2
demos/sortable/droponempty.html
View File

@ -16,7 +16,7 @@
$("ul.droptrue").sortable({ $("ul.droptrue").sortable({
connectWith: ['ul'] connectWith: ['ul']
}); });
$("ul.dropfalse").sortable({ $("ul.dropfalse").sortable({
connectWith: ['ul'], connectWith: ['ul'],
dropOnEmpty: false dropOnEmpty: false

2
demos/sortable/items.html
View File

@ -16,7 +16,7 @@
$("ul:eq(0)").sortable({ $("ul:eq(0)").sortable({
items: 'li:not(.ui-state-disabled)' items: 'li:not(.ui-state-disabled)'
}); });
$("ul:eq(1)").sortable({ $("ul:eq(1)").sortable({
cancel: '.ui-state-disabled' cancel: '.ui-state-disabled'
}); });