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

50
demos/datepicker/inline.html
View File

@ -1,25 +1,25 @@
<!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>
<!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 class="demo">
Date: <div id="date123" /></div>
</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>
</div><!-- End demo-description -->
</body>
</html>
</div><!-- End demo-description -->
</body>
</html>

20
demos/demos.css
View File

@ -110,7 +110,7 @@ body {
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
*/
@ -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 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 {
@ -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: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;

2
demos/dialog/default.html
View File

@ -22,7 +22,7 @@
<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>

50
demos/dialog/modal.html
View File

@ -1,36 +1,36 @@
<!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({
<!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
}
});
});
</script>
</head>
<body>
});
});
</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>
@ -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>
</div><!-- End demo-description -->
</body>
</html>
</body>
</html>

46
demos/dialog/modal_confirmation.html
View File

@ -1,16 +1,16 @@
<!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() {
<!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,
@ -27,18 +27,18 @@
$(this).dialog('close');
}
}
});
});
</script>
</head>
<body>
});
});
</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>
@ -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>
</div><!-- End demo-description -->
</body>
</html>
</body>
</html>

80
demos/dialog/modal_form.html
View File

@ -1,17 +1,17 @@
<!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({
<!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: {
@ -26,40 +26,40 @@
$(this).dialog('close');
}
}
});
});
</script>
<!-- Styles for this demo page -->
<style type="text/css" media="screen">
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; }
fieldset { padding:0; border:0; margin-top:25px; }
});
});
</script>
<!-- Styles for this demo page -->
<style type="text/css" media="screen">
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; }
fieldset { padding:0; border:0; margin-top:25px; }
</style>
</head>
<body>
</head>
<body>
<div class="demo">
<div id="dialog" title="Create new user">
<p>All form fields are required.</p>
<form>
<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" />
<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>
</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>
@ -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>
</div><!-- End demo-description -->
</body>
</html>
</body>
</html>

62
demos/dialog/modal_message.html
View File

@ -1,17 +1,17 @@
<!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({
<!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',
@ -22,24 +22,24 @@
$(this).dialog('close');
}
}
});
});
</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>
});
});
</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>
@ -61,9 +61,9 @@
<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 -->
</body>
</html>
</body>
</html>

4
demos/draggable/zindexstack.html
View File

@ -28,11 +28,11 @@
<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>

6
demos/droppable/accept.html
View File

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

2
demos/droppable/activeclass.html
View File

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

2
demos/droppable/default.html
View File

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

8
demos/droppable/greedy.html
View File

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

2
demos/droppable/hoverclass.html
View File

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

6
demos/droppable/revert.html
View File

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

12
demos/droppable/tolerance.html
View File

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

16
demos/index.html
View File

@ -41,18 +41,18 @@
$('#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');
})
@ -62,7 +62,7 @@
ev.preventDefault();
});
});
</script>
</script>
</head>
<body>
<?php } ?>
@ -76,7 +76,7 @@
<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>
@ -91,17 +91,17 @@
</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>

2
demos/progressbar/default.html
View File

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

2
demos/progressbar/index.html
View File

@ -8,7 +8,7 @@
<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>

2
demos/progressbar/resize.html
View File

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

58
demos/resizable/alsoresize.html
View File

@ -1,35 +1,35 @@
<!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() {
<!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'
});
$("#also").resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-header">
<p>Resize me</p>
</div>
});
$("#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>
</body>
</html>
</body>
</html>

52
demos/resizable/animate.html
View File

@ -1,29 +1,29 @@
<!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() {
<!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
});
});
</script>
</head>
<body>
});
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<p>Resize me</p>
</div>
</body>
</html>
<div id="resizable" class="ui-widget-content">
<p>Resize me</p>
</div>
</body>
</html>

50
demos/resizable/aspectratio.html
View File

@ -1,28 +1,28 @@
<!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() {
<!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
});
});
</script>
</head>
<body>
});
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<p>Resize me</p>
</div>
</body>
</html>
<div id="resizable" class="ui-widget-content">
<p>Resize me</p>
</div>
</body>
</html>

56
demos/resizable/containment.html
View File

@ -1,33 +1,33 @@
<!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() {
<!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'
});
});
</script>
</head>
<body>
});
});
</script>
</head>
<body>
<div id="container" class="ui-widget-content">
<div id="container" class="ui-widget-content">
<p>Container</p>
<div id="resizable" class="ui-widget-header">
<p>Resize me</p>
</div>
<div id="resizable" class="ui-widget-header">
<p>Resize me</p>
</div>
</div>
</body>
</html>
</body>
</html>

50
demos/resizable/delay.html
View File

@ -1,28 +1,28 @@
<!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() {
<!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
});
});
</script>
</head>
<body>
});
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<p>Resize me</p>
</div>
</body>
</html>
<div id="resizable" class="ui-widget-content">
<p>Resize me</p>
</div>
</body>
</html>

50
demos/resizable/distance.html
View File

@ -1,28 +1,28 @@
<!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() {
<!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
});
});
</script>
</head>
<body>
});
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<p>Resize me</p>
</div>
</body>
</html>
<div id="resizable" class="ui-widget-content">
<p>Resize me</p>
</div>
</body>
</html>

52
demos/resizable/ghost.html
View File

@ -1,29 +1,29 @@
<!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() {
<!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
});
});
</script>
</head>
<body>
});
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<p>Resize me</p>
</div>
</body>
</html>
<div id="resizable" class="ui-widget-content">
<p>Resize me</p>
</div>
</body>
</html>

50
demos/resizable/grid.html
View File

@ -1,28 +1,28 @@
<!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() {
<!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
});
});
</script>
</head>
<body>
});
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<p>Resize me</p>
</div>
</body>
</html>
<div id="resizable" class="ui-widget-content">
<p>Resize me</p>
</div>
</body>
</html>

50
demos/resizable/max.html
View File

@ -1,29 +1,29 @@
<!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() {
<!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
});
});
</script>
</head>
<body>
});
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<p>Resize me</p>
</div>
</body>
</html>
<div id="resizable" class="ui-widget-content">
<p>Resize me</p>
</div>
</body>
</html>

50
demos/resizable/min.html
View File

@ -1,29 +1,29 @@
<!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() {
<!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
});
});
</script>
</head>
<body>
});
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<p>Resize me</p>
</div>
</body>
</html>
<div id="resizable" class="ui-widget-content">
<p>Resize me</p>
</div>
</body>
</html>

4
demos/slider/range.html
View File

@ -32,10 +32,10 @@
<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 -->

4
demos/slider/range_vertical.html
View File

@ -30,12 +30,12 @@
<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 -->

4
demos/slider/rangemax.html
View File

@ -34,10 +34,10 @@
<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 -->

4
demos/slider/rangemin.html
View File

@ -34,10 +34,10 @@
<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 -->

6
demos/slider/slider_vertical.html
View File

@ -12,8 +12,8 @@
$("#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);
@ -36,7 +36,7 @@
<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>

2
demos/slider/steps.html
View File

@ -35,7 +35,7 @@
<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>

6
demos/sortable/delaydistance.html
View File

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

2
demos/sortable/droponempty.html
View File

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

2
demos/sortable/items.html
View File

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