19 demos/draggable/sortable.html
View file
@@ -1,19 +1,19 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable + Sortable</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.sortable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
.demo li { margin: 5px; padding: 5px; width: 150px; }
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
</style>
<script>
$(function() {
@@ -31,8 +31,6 @@
</head>
<body>

<div class="demo">

<ul>
<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
@@ -45,13 +43,8 @@
<li class="ui-state-default">Item 5</li>
</ul>

</div><!-- End demo -->



<div class="demo-description">
<p>Draggables are built to interact seamlessly with <a href="#">sortables</a>.</p>
</div><!-- End demo-description -->

<p>Draggables are built to interact seamlessly with <a href="http://jqueryui.com/sortable">sortables</a>.</p>
</div>
</body>
</html>
13 demos/draggable/visual-feedback.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Visual feedback</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -33,8 +33,6 @@
</head>
<body>

<div class="demo">

<h3 class="docs">With helpers:</h3>

<div id="draggable" class="ui-widget-content">
@@ -64,14 +62,9 @@ <h3 class="docs">Stacked:</h3>
</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Provide feedback to users as they drag an object in the form of a helper. The <code>helper</code> option accepts the values 'original' (the draggable object moves with the cursor), 'clone' (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper's transparency with the <code>opacity</code> option.</p>
<p>To clarify which draggable is in play, bring the draggable in motion to front. Use the <code>zIndex</code> option to set a higher z-index for the helper, if in play, or use the <code>stack</code> option to ensure that the last item dragged will appear on top of others in the same group on drag stop.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
13 demos/droppable/accepted-elements.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Accept</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -34,8 +34,6 @@
</head>
<body>

<div class="demo">

<div id="draggable-nonvalid" class="ui-widget-content">
<p>I'm draggable but can't be dropped</p>
</div>
@@ -48,13 +46,8 @@
<p>accept: '#draggable'</p>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
13 demos/droppable/default.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -31,8 +31,6 @@
</head>
<body>

<div class="demo">

<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
@@ -41,13 +39,8 @@
<p>Drop here</p>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
24 demos/droppable/index.html
View file
@@ -1,24 +1,20 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable Demos</title>
<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
<li><a href="accepted-elements.html">Accepted elements</a></li>
<li><a href="propagation.html">Prevent propagation</a></li>
<li><a href="visual-feedback.html">Visual feedback</a></li>
<li><a href="revert.html">Revert draggable position</a></li>
<li><a href="shopping-cart.html">Shopping Cart</a></li>
<li><a href="photo-manager.html">Simple photo manager</a></li>
</ul>
</div>
<ul>
<li><a href="default.html">Default functionality</a></li>
<li><a href="accepted-elements.html">Accepted elements</a></li>
<li><a href="propagation.html">Prevent propagation</a></li>
<li><a href="visual-feedback.html">Visual feedback</a></li>
<li><a href="revert.html">Revert draggable position</a></li>
<li><a href="shopping-cart.html">Shopping Cart</a></li>
<li><a href="photo-manager.html">Simple photo manager</a></li>
</ul>

</body>
</html>
14 demos/droppable/photo-manager.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Simple photo manager</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
@@ -38,7 +38,7 @@
$( "li", $gallery ).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present
containment: "document",
helper: "clone",
cursor: "move"
});
@@ -138,7 +138,7 @@
</head>
<body>

<div class="demo ui-widget ui-helper-clearfix">
<div class="ui-widget ui-helper-clearfix">

<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
@@ -171,14 +171,12 @@ <h5 class="ui-widget-header">High Tatras 4</h5>
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
</div>

</div><!-- End demo -->

</div>

<div class="demo-description">
<p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p>
<p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p>
<p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
13 demos/droppable/propagation.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Prevent propagation</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -48,8 +48,6 @@
</head>
<body>

<div class="demo">

<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
@@ -68,13 +66,8 @@
</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>When working with nested droppables &#8212; for example, you may have an editable directory structure displayed as a tree, with folder and document nodes &#8212; the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
13 demos/droppable/revert.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Revert draggable position</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -35,8 +35,6 @@
</head>
<body>

<div class="demo">

<div id="draggable" class="ui-widget-content">
<p>I revert when I'm dropped</p>
</div>
@@ -49,13 +47,8 @@
<p>Drop me here</p>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option set on the draggable.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
13 demos/droppable/shopping-cart.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Shopping Cart Demo</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -48,8 +48,6 @@
</head>
<body>

<div class="demo">

<div id="products">
<h1 class="ui-widget-header">Products</h1>
<div id="catalog">
@@ -89,13 +87,8 @@ <h1 class="ui-widget-header">Shopping Cart</h1>
</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Demonstrate how to use an accordion to structure products into a catalog and make use drag and drop for adding them to a shopping cart, where they are sortable.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
18 demos/droppable/visual-feedback.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Visual feedback</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -14,6 +14,7 @@
<style>
#draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
h3 { clear: left; }
</style>
<script>
$(function() {
@@ -44,10 +45,8 @@
</head>
<body>

<div class="demo">
<h3>Feedback on hover:</h3>

<h3 class="docs">Feedback on hover:</h3>

<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
@@ -56,7 +55,7 @@ <h3 class="docs">Feedback on hover:</h3>
<p>Drop here</p>
</div>

<h3 class="docs">Feedback on activating draggable:</h3>
<h3>Feedback on activating draggable:</h3>

<div id="draggable2" class="ui-widget-content">
<p>Drag me to my target</p>
@@ -66,13 +65,8 @@ <h3 class="docs">Feedback on activating draggable:</h3>
<p>Drop here</p>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
19 demos/effect/default.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects - Effect demo</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.effect.js"></script>
<script src="../../ui/jquery.ui.effect-blind.js"></script>
<script src="../../ui/jquery.ui.effect-bounce.js"></script>
@@ -25,15 +25,15 @@
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
.ui-effects-transfer { border: 2px dotted gray; }
</style>
<script>
$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();

// most effect types need no options passed by default
var options = {};
// some effects have required parameters
@@ -66,8 +66,6 @@
</head>
<body>

<div class="demo">

<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Effect</h3>
@@ -97,13 +95,8 @@ <h3 class="ui-widget-header ui-corner-all">Effect</h3>

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

</div><!-- End demo -->



<div class="demo-description">
<p>Click the button above to show the effect.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
13 demos/effect/easing.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects - Easing demo</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.effect.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
@@ -93,17 +93,10 @@
</head>
<body>

<div class="demo">

<div id="graphs"></div>

</div><!-- End demo -->



<div class="demo-description">
<p><strong>All easings provided by jQuery UI are drawn above, using a HTML canvas element</strong>. Click a diagram to see the easing in action.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
14 demos/effect/index.html
View file
@@ -1,19 +1,15 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects Demos</title>
<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Effect showcase</a></li>
<li><a href="easing.html">Easing showcase</a></li>
</ul>
</div>
<ul>
<li><a href="default.html">Effect showcase</a></li>
<li><a href="easing.html">Easing showcase</a></li>
</ul>

</body>
</html>
13 demos/hide/default.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects - Hide Demo</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.effect.js"></script>
<script src="../../ui/jquery.ui.effect-blind.js"></script>
<script src="../../ui/jquery.ui.effect-bounce.js"></script>
@@ -61,8 +61,6 @@
</head>
<body>

<div class="demo">

<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Hide</h3>
@@ -90,13 +88,8 @@ <h3 class="ui-widget-header ui-corner-all">Hide</h3>

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

</div><!-- End demo -->



<div class="demo-description">
<p>Click the button above to preview the effect.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
12 demos/hide/index.html
View file
@@ -1,18 +1,14 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects Demos</title>
<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
</ul>
</div>
<ul>
<li><a href="default.html">Default functionality</a></li>
</ul>

</body>
</html>
357 demos/index.html
View file

Large diffs are not rendered by default.

45 demos/menu/default.html
View file
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>jQuery UI Menu - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.menu.js"></script>
@@ -17,33 +17,26 @@
</head>
<body>

<div class="demo">

<ul id="menu">
<li><a href="#Aberdeen">Aberdeen</a></li>
<li><a href="#Ada">Ada</a></li>
<li><a href="#Adamsville">Adamsville</a></li>
<li><a href="#Addyston">Addyston</a></li>
<li><a href="#Adelphi">Adelphi</a></li>
<li><a href="#Adena">Adena</a></li>
<li><a href="#Adrian">Adrian</a></li>
<li><a href="#Akron">Akron</a></li>
<li><a href="#Albany">Albany</a></li>
<li><a href="#Alexandria">Alexandria</a></li>
<li><a href="#Alger">Alger</a></li>
<li><a href="#Alledonia">Alledonia</a></li>
<li><a href="#Alliance">Alliance</a></li>
<li><a href="#Alpha">Alpha</a></li>
<li><a href="#Alvada">Alvada</a></li>
</ul>

</div><!-- End demo -->
<ul id="menu">
<li><a href="#Aberdeen">Aberdeen</a></li>
<li><a href="#Ada">Ada</a></li>
<li><a href="#Adamsville">Adamsville</a></li>
<li><a href="#Addyston">Addyston</a></li>
<li><a href="#Adelphi">Adelphi</a></li>
<li><a href="#Adena">Adena</a></li>
<li><a href="#Adrian">Adrian</a></li>
<li><a href="#Akron">Akron</a></li>
<li><a href="#Albany">Albany</a></li>
<li><a href="#Alexandria">Alexandria</a></li>
<li><a href="#Alger">Alger</a></li>
<li><a href="#Alledonia">Alledonia</a></li>
<li><a href="#Alliance">Alliance</a></li>
<li><a href="#Alpha">Alpha</a></li>
<li><a href="#Alvada">Alvada</a></li>
</ul>

<div class="demo-description">

<p>A menu with the default configuration. A list is transformed, adding theming, mouse and keyboard navigation support. Try to tab to the menu then use the cursor keys to navigate.</p>

</div><!-- End demo-description -->

</div>
</body>
</html>
16 demos/menu/index.html
View file
@@ -3,16 +3,14 @@
<head>
<meta charset="utf-8">
<title>jQuery UI Menu Demos</title>
<link rel="stylesheet" href="../demos.css">
</head>
<body>
<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
<li><a href="topalignmenu.html">Top-aligned sub menus</a></li>
<li><a href="navigationmenu.html">Navigation menu</a></li>
</ul>
</div>

<ul>
<li><a href="default.html">Default functionality</a></li>
<li><a href="topalignmenu.html">Top-aligned sub menus</a></li>
<li><a href="navigationmenu.html">Navigation menu</a></li>
</ul>

</body>
</html>
85 demos/menu/navigationmenu.html
View file
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>jQuery UI Menu - Navigation Menu</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
@@ -29,53 +29,46 @@
</head>
<body>

<div class="demo">

<ul id="menu">
<li><a href="?Aberdeen">Aberdeen</a></li>
<li><a href="?Ada">Ada</a></li>
<li><a href="?Adamsville">Adamsville</a></li>
<li><a href="?Addyston">Addyston</a></li>
<li>
<a href="?Delphi">Delphi</a>
<ul>
<li><a href="?Ada">Ada</a></li>
<li><a href="?Saarland">Saarland</a></li>
<li><a href="?Salzburg">Salzburg</a></li>
</ul>
</li>
<li><a href="?Saarland">Saarland</a></li>
<li>
<a href="?Salzburg">Salzburg</a>
<ul>
<li>
<a href="?Delphi">Delphi</a>
<ul>
<li><a href="?Ada">Ada</a></li>
<li><a href="?Saarland">Saarland</a></li>
<li><a href="?Salzburg">Salzburg</a></li>
</ul>
</li>
<li>
<a href="?Delphi">Delphi</a>
<ul>
<li><a href="?Ada">Ada</a></li>
<li><a href="?Saarland">Saarland</a></li>
<li><a href="?Salzburg">Salzburg</a></li>
</ul>
</li>
<li><a href="?Perch">Perch</a></li>
</ul>
</li>
</ul>

</div><!-- End demo -->
<ul id="menu">
<li><a href="?Aberdeen">Aberdeen</a></li>
<li><a href="?Ada">Ada</a></li>
<li><a href="?Adamsville">Adamsville</a></li>
<li><a href="?Addyston">Addyston</a></li>
<li>
<a href="?Delphi">Delphi</a>
<ul>
<li><a href="?Ada">Ada</a></li>
<li><a href="?Saarland">Saarland</a></li>
<li><a href="?Salzburg">Salzburg</a></li>
</ul>
</li>
<li><a href="?Saarland">Saarland</a></li>
<li>
<a href="?Salzburg">Salzburg</a>
<ul>
<li>
<a href="?Delphi">Delphi</a>
<ul>
<li><a href="?Ada">Ada</a></li>
<li><a href="?Saarland">Saarland</a></li>
<li><a href="?Salzburg">Salzburg</a></li>
</ul>
</li>
<li>
<a href="?Delphi">Delphi</a>
<ul>
<li><a href="?Ada">Ada</a></li>
<li><a href="?Saarland">Saarland</a></li>
<li><a href="?Salzburg">Salzburg</a></li>
</ul>
</li>
<li><a href="?Perch">Perch</a></li>
</ul>
</li>
</ul>

<div class="demo-description">

<p>A navigation menu. A list is transformed, adding theming, mouse and keyboard navigation support. Try to tab to the menu then use the cursor keys to navigate.</p>

</div><!-- End demo-description -->

</div>
</body>
</html>
5 demos/menu/topalignmenu.html
View file
@@ -5,7 +5,7 @@
<title>Menu Demo: Top-aligned Menu</title>
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
@@ -80,5 +80,8 @@
</li>
</ul>

<div class="demo-description">
<p>Menus can use custom positioning. There is a delay before activing an item on hover and a delay before closing a menu on mouse out to allow for moving to a submenu that is not touching its parent item.</p>
</div>
</body>
</html>
64 demos/position/cycler.html
View file
@@ -4,19 +4,30 @@
<meta charset="utf-8">
<title>jQuery UI Position - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#container {
overflow: hidden;
position: relative;
height: 400px;
}

img {
position: absolute;
}
</style>
<script>
$(function() {
// TODO refactor into a widget and get rid of these plugin methods
$.fn.left = function( using ) {
return this.position({
my: "right middle",
at: "left+25 middle",
of: window,
of: "#container",
collision: "none",
using: using
});
@@ -25,7 +36,7 @@
return this.position({
my: "left middle",
at: "right-25 middle",
of: window,
of: "#container",
collision: "none",
using: using
});
@@ -34,21 +45,11 @@
return this.position({
my: "center middle",
at: "center middle",
of: window,
of: "#container",
using: using
});
};

$( "body" ).css({
overflow: "hidden"
})
$( ".demo" ).css({
position: "relative",
});
$( ".demo img" ).css({
position: "absolute",
});

$( "img:eq(0)" ).left();
$( "img:eq(1)" ).center();
$( "img:eq(2)" ).right();
@@ -60,19 +61,19 @@
event.preventDefault();
$( "img:eq(2)" ).center( animate );
$( "img:eq(1)" ).left( animate )
$( "img:eq(0)" ).right().appendTo( ".demo" );
$( "img:eq(0)" ).right().appendTo( "#container" );
}
function previous( event ) {
event.preventDefault();
$( "img:eq(0)" ).center( animate );
$( "img:eq(1)" ).right( animate );
$( "img:eq(2)" ).left().prependTo( ".demo" );
$( "img:eq(2)" ).left().prependTo( "#container" );
}
$( "#previous" ).click( previous );
$( "#next" ).click( next );

$( ".demo img" ).click(function( event ) {
$( ".demo img" ).index( this ) === 0 ? previous( event ) : next( event );
$( "img" ).click(function( event ) {
$( "img" ).index( this ) === 0 ? previous( event ) : next( event );
});

$( window ).resize(function() {
@@ -85,25 +86,20 @@
</head>
<body>

<div class="demo">

<img src="images/earth.jpg" width="458" height="308" alt="earth" />
<img src="images/flight.jpg" width="512" height="307" alt="flight" />
<img src="images/rocket.jpg" width="300" height="353" alt="rocket" />

<a id="previous" href="#">Previous</a>
<a id="next" href="#">Next</a>

</div><!-- End demo -->

<div id="container">
<img src="images/earth.jpg" width="458" height="308" alt="earth">
<img src="images/flight.jpg" width="512" height="307" alt="flight">
<img src="images/rocket.jpg" width="300" height="353" alt="rocket">

<a id="previous" href="#">Previous</a>
<a id="next" href="#">Next</a>
</div>

<div class="demo-description">
<p>A prototype for the <a href="http://wiki.jqueryui.com/Photoviewer">Photoviewer</a> using Position to place images at the center, left and right and cycle them.
<br/>Use the links at the top to cycle, or click on the images on the left and right.
<br/>Note how the images are repositioned when resizing the window.
<br/>Warning: Doesn't currently work inside the demo viewer; open in a new window instead!</p>
</div><!-- End demo-description -->

<br>Use the links at the top to cycle, or click on the images on the left and right.
<br>Note how the images are repositioned when resizing the window.
<br>Warning: Doesn't currently work inside the demo viewer; open in a new window instead!</p>
</div>
</body>
</html>
13 demos/position/default.html
View file
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>jQuery UI Position - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -67,8 +67,6 @@
</head>
<body>

<div class="demo">

<div id="parent">
<p>
This is the position parent element.
@@ -136,14 +134,9 @@
</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
<br/>Drag around the parent element to see collision detection in action.</p>
</div><!-- End demo-description -->

<br>Drag around the parent element to see collision detection in action.</p>
</div>
</body>
</html>
14 demos/position/index.html
View file
@@ -1,19 +1,15 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Position Demo</title>
<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
<li><a href="cycler.html">Cycling images</a></li>
</ul>
</div>
<ul>
<li><a href="default.html">Default functionality</a></li>
<li><a href="cycler.html">Cycling images</a></li>
</ul>

</body>
</html>
13 demos/progressbar/animated.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Animated</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.progressbar.js"></script>
@@ -22,14 +22,8 @@
</head>
<body>

<div class="demo">

<div id="progressbar"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>
This progressbar has an animated fill by setting the
@@ -38,7 +32,6 @@
<code>.ui-progressbar-value</code>
element, using css.
</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
13 demos/progressbar/default.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.progressbar.js"></script>
@@ -19,17 +19,10 @@
</head>
<body>

<div class="demo">

<div id="progressbar"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Default determinate progress bar.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
16 demos/progressbar/index.html
View file
@@ -1,20 +1,16 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar Demos</title>
<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
<li><a href="animated.html">Animated</a></li>
<li><a href="resize.html">Resizable progressbar</a></li>
</ul>
</div>
<ul>
<li><a href="default.html">Default functionality</a></li>
<li><a href="animated.html">Animated</a></li>
<li><a href="resize.html">Resizable progressbar</a></li>
</ul>

</body>
</html>
13 demos/progressbar/resize.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Resizable</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -22,19 +22,12 @@
</head>
<body>

<div class="demo">

<div id="progressbarWrapper" style="height:30px; " class="ui-widget-default">
<div id="progressbar" style="height:100%;"></div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>The progress bar's widths are specified in percentages for flexible sizing so it will resize to fit its container. Try resizing the height and width of this bar to see how it maintains the correct proportions. (This is not necessarily a real-world example, but it's a good illustration of how flexibly all the plugins are coded.)</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
13 demos/removeClass/default.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects - removeClass Demo</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.effect.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
@@ -30,8 +30,6 @@
</head>
<body>

<div class="demo">

<div class="toggler">
<div id="effect" class="newClass ui-corner-all">
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
@@ -40,13 +38,8 @@

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

</div><!-- End demo -->



<div class="demo-description">
<p>Click the button above to preview the effect.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
12 demos/removeClass/index.html
View file
@@ -1,18 +1,14 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects Demos</title>
<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
</ul>
</div>
<ul>
<li><a href="default.html">Default functionality</a></li>
</ul>

</body>
</html>
13 demos/resizable/animate.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Animate</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -25,19 +25,12 @@
</head>
<body>

<div class="demo">

<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Animate</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Animate the resize action using the <code>animate</code> option (boolean). When this option is set to true, drag the outline to the desired location; the element animates to that size on drag stop.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
13 demos/resizable/aspect-ratio.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Preserve aspect ratio</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -24,19 +24,12 @@
</head>
<body>

<div class="demo">

<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Preserve aspect ratio</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Maintain the existing aspect ratio or set a new one to constrain the proportions on resize. Set the <code>aspectRatio</code> option to true, and optionally pass in a new ratio (i.e., 4/3)</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
13 demos/resizable/constrain-area.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Constrain resize area</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -26,22 +26,15 @@
</head>
<body>

<div class="demo">

<div id="container" class="ui-widget-content">
<h3 class="ui-widget-header">Containment</h3>
<div id="resizable" class="ui-state-active">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Define the boundaries of the resizable area. Use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
13 demos/resizable/default.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -22,19 +22,12 @@
</head>
<body>

<div class="demo">

<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
15 demos/resizable/delay-start.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Delay start</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -19,7 +19,7 @@
$( "#resizable" ).resizable({
delay: 1000
});

$( "#resizable2" ).resizable({
distance: 40
});
@@ -28,8 +28,6 @@
</head>
<body>

<div class="demo">

<h3 class="docs">Time delay (ms):</h3>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Time</h3>
@@ -40,13 +38,8 @@ <h3 class="docs">Distance delay (px):</h3>
<h3 class="ui-widget-header">Distance</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Delay the start of resizng for a number of milliseconds with the <code>delay</code> option; prevent resizing until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
13 demos/resizable/helper.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Helper</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -25,19 +25,12 @@
</head>
<body>

<div class="demo">

<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Helper</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
32 demos/resizable/index.html
View file
@@ -1,28 +1,24 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable Demos</title>
<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
<li><a href="aspect-ratio.html">Preserve aspect ratio</a></li>
<li><a href="max-min.html">Maximum / minimum size</a></li>
<li><a href="constrain-area.html">Constrain resize area</a></li>
<li><a href="delay-start.html">Delay start</a></li>
<li><a href="snap-to-grid.html">Snap to grid</a></li>
<li><a href="visual-feedback.html">Visual feedback</a></li>
<li><a href="synchronous-resize.html">Synchronous resize</a></li>
<li><a href="animate.html">Animate</a></li>
<li><a href="helper.html">Resize Helper</a></li>
<li><a href="textarea.html">Textarea</a></li>
</ul>
</div>
<ul>
<li><a href="default.html">Default functionality</a></li>
<li><a href="aspect-ratio.html">Preserve aspect ratio</a></li>
<li><a href="max-min.html">Maximum / minimum size</a></li>
<li><a href="constrain-area.html">Constrain resize area</a></li>
<li><a href="delay-start.html">Delay start</a></li>
<li><a href="snap-to-grid.html">Snap to grid</a></li>
<li><a href="visual-feedback.html">Visual feedback</a></li>
<li><a href="synchronous-resize.html">Synchronous resize</a></li>
<li><a href="animate.html">Animate</a></li>
<li><a href="helper.html">Resize Helper</a></li>
<li><a href="textarea.html">Textarea</a></li>
</ul>

</body>
</html>
13 demos/resizable/max-min.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Maximum / minimum size</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -27,19 +27,12 @@
</head>
<body>

<div class="demo">

<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resize larger / smaller</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Limit the resizable element to a maximum or minimum height or width using the <code>maxHeight</code>, <code>maxWidth</code>, <code>minHeight</code>, and <code>minWidth</code> options.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
13 demos/resizable/snap-to-grid.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Snap to grid</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -24,19 +24,12 @@
</head>
<body>

<div class="demo">

<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Grid</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Snap the resizable element to a grid. Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
13 demos/resizable/synchronous-resize.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Synchronous resize</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -27,8 +27,6 @@
</head>
<body>

<div class="demo">

<div id="resizable" class="ui-widget-header">
<h3 class="ui-state-active">Resize</h3>
</div>
@@ -37,13 +35,8 @@ <h3 class="ui-state-active">Resize</h3>
<h3 class="ui-widget-header">will also resize</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Resize multiple elements simultaneously by clicking and dragging the sides of one. Pass a shared selector into the <code>alsoResize</code> option.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
13 demos/resizable/textarea.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Textarea</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -25,17 +25,10 @@
</head>
<body>

<div class="demo">

<textarea id="resizable" rows="5" cols="20"></textarea>

</div><!-- End demo -->



<div class="demo-description">
<p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
13 demos/resizable/visual-feedback.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Visual feedback</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -25,19 +25,12 @@
</head>
<body>

<div class="demo">

<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Ghost</h3>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Instead of showing the actual element during resize, set the <code>ghost</code> option to true to show a semi-transparent part of the element.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
15 demos/selectable/default.html
View file
@@ -1,16 +1,16 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectable - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.selectable.js"></script>
<link rel="stylesheet" href="../demos.css">

<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
@@ -26,8 +26,6 @@
</head>
<body>

<div class="demo">

<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
@@ -38,13 +36,8 @@
<li class="ui-widget-content">Item 7</li>
</ol>

</div><!-- End demo -->



<div class="demo-description">
<p>Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. </p>
</div><!-- End demo-description -->

</div>
</body>
</html>
17 demos/selectable/display-grid.html
View file
@@ -1,21 +1,21 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectable - Display as grid</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.selectable.js"></script>
<link rel="stylesheet" href="../demos.css">

<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
</style>
<script>
@@ -26,8 +26,6 @@
</head>
<body>

<div class="demo">

<ol id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
@@ -43,13 +41,8 @@
<li class="ui-state-default">12</li>
</ol>

</div><!-- End demo -->



<div class="demo-description">
<p>To arrange selectable items as a grid, give them identical dimensions and float them using CSS.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
16 demos/selectable/index.html
View file
@@ -1,20 +1,16 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectable Demos</title>
<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
<li><a href="serialize.html">Serialize</a></li>
<li><a href="display-grid.html">Display as grid</a></li>
</ul>
</div>
<ul>
<li><a href="default.html">Default functionality</a></li>
<li><a href="serialize.html">Serialize</a></li>
<li><a href="display-grid.html">Display as grid</a></li>
</ul>

</body>
</html>
15 demos/selectable/serialize.html
View file
@@ -1,16 +1,16 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectable - Serialize</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.selectable.js"></script>
<link rel="stylesheet" href="../demos.css">

<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
@@ -34,8 +34,6 @@
</head>
<body>

<div class="demo">

<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
@@ -49,13 +47,8 @@
<li class="ui-widget-content">Item 6</li>
</ol>

</div><!-- End demo -->



<div class="demo-description">
<p>Write a function that fires on the <code>stop</code> event to collect the index values of selected items. Present values as feedback, or pass as a data string.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
2 demos/selectmenu/custom_render.html
View file
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>jQuery UI Selectmenu - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
2 demos/selectmenu/default.html
View file
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>jQuery UI Selectmenu - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
15 demos/show/default.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects - Show Demo</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.effect.js"></script>
<script src="../../ui/jquery.ui.effect-blind.js"></script>
<script src="../../ui/jquery.ui.effect-bounce.js"></script>
@@ -28,7 +28,7 @@
$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();

// most effect types need no options passed by default
@@ -63,8 +63,6 @@
</head>
<body>

<div class="demo">

<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Show</h3>
@@ -92,13 +90,8 @@ <h3 class="ui-widget-header ui-corner-all">Show</h3>

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

</div><!-- End demo -->



<div class="demo-description">
<p>Click the button above to preview the effect.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
12 demos/show/index.html
View file
@@ -1,18 +1,14 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects Demos</title>
<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
</ul>
</div>
<ul>
<li><a href="default.html">Default functionality</a></li>
</ul>

</body>
</html>
16 demos/slider/colorpicker.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Colorpicker</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -30,7 +30,6 @@
#green .ui-slider-handle { border-color: #8ae234; }
#blue .ui-slider-range { background: #729fcf; }
#blue .ui-slider-handle { border-color: #729fcf; }
#demo-frame > div.demo { padding: 10px !important; };
</style>
<script>
function hexFromRGB(r, g, b) {
@@ -70,8 +69,6 @@
</head>
<body class="ui-widget-content" style="border:0;">

<div class="demo">

<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
<span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
Simple Colorpicker
@@ -83,13 +80,8 @@

<div id="swatch" class="ui-widget-content ui-corner-all"></div>

</div><!-- End demo -->



<div class="demo-description" style="clear:left;">
<div class="demo-description">
<p>Combine three sliders to create a simple RGB colorpicker.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
16 demos/slider/default.html
View file
@@ -1,18 +1,15 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" >
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#demo-frame > div.demo { padding: 10px !important; }
</style>
<script>
$(function() {
$( "#slider" ).slider();
@@ -21,17 +18,10 @@
</head>
<body>

<div class="demo">

<div id="slider"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
16 demos/slider/hotelrooms.html
View file
@@ -1,18 +1,15 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range with fixed minimum</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#demo-frame > div.demo { padding: 10px !important; };
</style>
<script>
$(function() {
var select = $( "#minbeds" );
@@ -33,8 +30,6 @@
</head>
<body>

<div class="demo">

<form id="reservation">
<label for="minbeds">Minimum number of beds</label>
<select name="minbeds" id="minbeds">
@@ -47,13 +42,8 @@
</select>
</form>

</div><!-- End demo -->



<div class="demo-description">
<p>How to bind a slider to an existing select element. The select stays visible to display the change. When the select is changed, the slider is updated, too.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
33 demos/slider/index.html
View file
@@ -1,29 +1,24 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider Demos</title>
<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
<li><a href="steps.html">Snap to increments</a></li>
<li><a href="range.html">Range slider</a></li>
<li><a href="rangemin.html">Range with fixed minimum</a></li>
<li><a href="hotelrooms.html">Room reservation</a></li>
<li><a href="rangemax.html">Range with fixed maximum</a></li>
<li><a href="slider-vertical.html">Vertical slider</a></li>
<li><a href="range-vertical.html">Vertical range slider</a></li>
<li><a href="multiple-vertical.html">Multiple sliders</a></li>
<li><a href="colorpicker.html">Simple colorpicker</a></li>
<li><a href="side-scroll.html">Simple scrollbar</a></li>
<li><a href="tabs.html">Slider controls tabs</a></li>
</ul>
</div>
<ul>
<li><a href="default.html">Default functionality</a></li>
<li><a href="steps.html">Snap to increments</a></li>
<li><a href="range.html">Range slider</a></li>
<li><a href="rangemin.html">Range with fixed minimum</a></li>
<li><a href="hotelrooms.html">Room reservation</a></li>
<li><a href="rangemax.html">Range with fixed maximum</a></li>
<li><a href="slider-vertical.html">Vertical slider</a></li>
<li><a href="range-vertical.html">Vertical range slider</a></li>
<li><a href="multiple-vertical.html">Multiple sliders</a></li>
<li><a href="colorpicker.html">Simple colorpicker</a></li>
<li><a href="side-scroll.html">Simple scrollbar</a></li>
</ul>

</body>
</html>
18 demos/slider/multiple-vertical.html
View file
@@ -1,17 +1,16 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Multiple sliders</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#demo-frame > div.demo { padding: 10px !important; }
#eq span {
height:120px; float:left; margin:15px
}
@@ -39,9 +38,7 @@
});
</script>
</head>
<body class="ui-widget-content" style="border:0;">

<div class="demo">
<body>

<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
@@ -65,13 +62,8 @@
<span>70</span>
</div>

</div><!-- End demo -->



<div class="demo-description" style="clear:left;">
<div class="demo-description">
<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
16 demos/slider/range-vertical.html
View file
@@ -1,18 +1,15 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Vertical range slider</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#demo-frame > div.demo { padding: 10px !important; };
</style>
<script>
$(function() {
$( "#slider-range" ).slider({
@@ -30,22 +27,15 @@
</head>
<body>

<div class="demo">

<p>
<label for="amount">Target sales goal (Millions):</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range" style="height:250px;"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Change the orientation of the range slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
16 demos/slider/range.html
View file
@@ -1,18 +1,15 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#demo-frame > div.demo { padding: 10px !important; };
</style>
<script>
$(function() {
$( "#slider-range" ).slider({
@@ -31,22 +28,15 @@
</head>
<body>

<div class="demo">

<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Set the <code>range</code> option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
16 demos/slider/rangemax.html
View file
@@ -1,18 +1,15 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range with fixed maximum</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#demo-frame > div.demo { padding: 10px !important; };
</style>
<script>
$(function() {
$( "#slider-range-max" ).slider({
@@ -30,21 +27,14 @@
</head>
<body>

<div class="demo">

<p>
<label for="amount">Minimum number of bedrooms:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider-range-max"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Fix the maximum value of the range slider so that the user can only select a minimum. Set the <code>range</code> option to "max."</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
16 demos/slider/rangemin.html
View file
@@ -1,18 +1,15 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range with fixed minimum</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#demo-frame > div.demo { padding: 10px !important; };
</style>
<script>
$(function() {
$( "#slider-range-min" ).slider({
@@ -30,22 +27,15 @@
</head>
<body>

<div class="demo">

<p>
<label for="amount">Maximum price:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range-min"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Fix the minimum value of the range slider so that the user can only select a maximum. Set the <code>range</code> option to "min."</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
14 demos/slider/side-scroll.html
View file
@@ -1,17 +1,16 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Slider scrollbar</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#demo-frame > div.demo { padding: 10px !important; }
.scroll-pane { overflow: auto; width: 99%; float:left; }
.scroll-content { width: 2440px; float: left; }
.scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }
@@ -98,8 +97,6 @@
</head>
<body>

<div class="demo">

<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
<div class="scroll-content">
<div class="scroll-content-item ui-widget-header">1</div>
@@ -128,13 +125,8 @@
</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
16 demos/slider/slider-vertical.html
View file
@@ -1,18 +1,15 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Vertical slider</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#demo-frame > div.demo { padding: 10px !important; };
</style>
<script>
$(function() {
$( "#slider-vertical" ).slider({
@@ -31,22 +28,15 @@
</head>
<body>

<div class="demo">

<p>
<label for="amount">Volume:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-vertical" style="height:200px;"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Change the orientation of the slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
16 demos/slider/steps.html
View file
@@ -1,18 +1,15 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Snap to increments</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#demo-frame > div.demo { padding: 10px !important; };
</style>
<script>
$(function() {
$( "#slider" ).slider({
@@ -30,22 +27,15 @@
</head>
<body>

<div class="demo">

<p>
<label for="amount">Donation amount ($50 increments):</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Increment slider values with the <code>step</code> option set to an integer, commonly a dividend of the slider's maximum value. The default increment is 1.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
67 demos/slider/tabs.html
View file

This file was deleted.

12 demos/sortable/connect-lists-through-tabs.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Connect lists with Tabs</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -39,7 +39,6 @@
</script>
</head>
<body>
<div class="demo">

<div id="tabs">
<ul>
@@ -66,13 +65,8 @@
</div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
12 demos/sortable/connect-lists.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -23,7 +23,6 @@
</script>
</head>
<body>
<div class="demo">

<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
@@ -41,18 +40,13 @@
<li class="ui-state-highlight">Item 5</li>
</ul>

</div><!-- End demo -->



<div class="demo-description">
<p>
Sort items from one list into another and vice versa, by passing a selector into
the <code>connectWith</code> option. The simplest way to do this is to
group all related lists with a CSS class, and then pass that class into the
sortable function (i.e., <code>connectWith: '.myclass'</code>).
</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
12 demos/sortable/default.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -23,7 +23,6 @@
</script>
</head>
<body>
<div class="demo">

<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
@@ -35,17 +34,12 @@
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

</div><!-- End demo -->



<div class="demo-description">
<p>
Enable a group of DOM elements to be sortable. Click on and drag an
element to a new spot within the list, and the other items will adjust to
fit. By default, sortable items share <code>draggable</code> properties.
</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
14 demos/sortable/delay-start.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Delay start</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -19,7 +19,7 @@
$( "#sortable1" ).sortable({
delay: 300
});

$( "#sortable2" ).sortable({
distance: 15
});
@@ -29,7 +29,6 @@
</script>
</head>
<body>
<div class="demo">

<h3 class="docs">Time delay of 300ms:</h3>

@@ -49,10 +48,6 @@ <h3 class="docs">Distance delay of 15px:</h3>
<li class="ui-state-default">Item 4</li>
</ul>

</div><!-- End demo -->



<div class="demo-description">
<p>
Prevent accidental sorting either by delay (time) or distance. Set a number of
@@ -61,7 +56,6 @@ <h3 class="docs">Distance delay of 15px:</h3>
needs to be dragged before sorting starts with the <code>distance</code>
option.
</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
14 demos/sortable/display-grid.html
View file
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Display as grid</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.sortable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style>
<script>
@@ -22,7 +22,6 @@
</script>
</head>
<body>
<div class="demo">

<ul id="sortable">
<li class="ui-state-default">1</li>
@@ -39,16 +38,11 @@
<li class="ui-state-default">12</li>
</ul>

</div><!-- End demo -->



<div class="demo-description">
<p>
To arrange sortable items as a grid, give them identical dimensions and
float them using CSS.
</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
14 demos/sortable/empty-lists.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Handle empty lists</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -30,7 +30,6 @@
</script>
</head>
<body>
<div class="demo">

<ul id="sortable1" class='droptrue'>
<li class="ui-state-default">Can be dropped..</li>
@@ -51,19 +50,14 @@
<ul id="sortable3" class='droptrue'>
</ul>

<br style="clear:both" />

</div><!-- End demo -->


<br style="clear:both">

<div class="demo-description">
<p>
Prevent all items in a list from being dropped into a separate, empty list
using the <code>dropOnEmpty</code> option set to <code>false</code>. By default,
sortable items can be dropped on empty lists.
</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
28 demos/sortable/index.html
View file
@@ -1,26 +1,22 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable Demos</title>
<link rel="stylesheet" href="../demos.css">
</head>
<body>

<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
<li><a href="placeholder.html">Drop placeholder</a></li>
<li><a href="connect-lists.html">Connect lists</a></li>
<li><a href="connect-lists-through-tabs.html">Connect lists through tabs</a></li>
<li><a href="empty-lists.html">Handle empty lists</a></li>
<li><a href="items.html">Include / exclude items</a></li>
<li><a href="delay-start.html">Delay start</a></li>
<li><a href="display-grid.html">Display as grid</a></li>
<li><a href="portlets.html">Portlets</a></li>
</ul>
</div>
<ul>
<li><a href="default.html">Default functionality</a></li>
<li><a href="placeholder.html">Drop placeholder</a></li>
<li><a href="connect-lists.html">Connect lists</a></li>
<li><a href="connect-lists-through-tabs.html">Connect lists through tabs</a></li>
<li><a href="empty-lists.html">Handle empty lists</a></li>
<li><a href="items.html">Include / exclude items</a></li>
<li><a href="delay-start.html">Delay start</a></li>
<li><a href="display-grid.html">Display as grid</a></li>
<li><a href="portlets.html">Portlets</a></li>
</ul>

</body>
</html>
12 demos/sortable/items.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Include / exclude items</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -29,7 +29,6 @@
</script>
</head>
<body>
<div class="demo">

<h3 class="docs">Specify which items are sortable:</h3>

@@ -49,10 +48,6 @@ <h3 class="docs">Cancel sorting (but keep as drop targets):</h3>
<li class="ui-state-default">Item 4</li>
</ul>

</div><!-- End demo -->



<div class="demo-description">
<p>
Specify which items are eligible to sort by passing a jQuery selector into
@@ -64,7 +59,6 @@ <h3 class="docs">Cancel sorting (but keep as drop targets):</h3>
<code>cancel</code> option. Cancelled items remain valid sort targets for
others.
</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
12 demos/sortable/placeholder.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Drop placeholder</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -26,7 +26,6 @@
</script>
</head>
<body>
<div class="demo">

<ul id="sortable">
<li class="ui-state-default">Item 1</li>
@@ -38,10 +37,6 @@
<li class="ui-state-default">Item 7</li>
</ul>

</div><!-- End demo -->



<div class="demo-description">
<p>
When dragging a sortable item to a new location, other items will make room
@@ -50,7 +45,6 @@
be visible. Use the boolean <code>forcePlaceholderSize</code> option
to set dimensions on the placeholder.
</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
16 demos/sortable/portlets.html
View file
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Portlets</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
@@ -42,15 +42,14 @@
</script>
</head>
<body>
<div class="demo">

<div class="column">

<div class="portlet">
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>

<div class="portlet">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
@@ -73,24 +72,19 @@
<div class="portlet-header">Links</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>

<div class="portlet">
<div class="portlet-header">Images</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>

</div>

</div><!-- End demo -->



<div class="demo-description">
<p>
Enable portlets (styled divs) as sortables and use the <code>connectWith</code>
option to allow sorting between columns.
</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
11 demos/spinner/currency.html
View file
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>jQuery UI Spinner - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../external/jquery.mousewheel.js"></script>
<script src="../../external/globalize.js"></script>
<script src="../../external/globalize.culture.de-DE.js"></script>
@@ -32,8 +32,6 @@
</head>
<body>

<div class="demo">

<p>
<label for="currency">Currency to donate</label>
<select id="currency" name="currency">
@@ -47,13 +45,8 @@
<input id="spinner" name="spinner" value="5">
</p>

</div><!-- End demo -->



<div class="demo-description">
<p>Example of a donation form, with currency selection and amount spinner.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
11 demos/spinner/decimal.html
View file
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>jQuery UI Spinner - Decimal</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../external/jquery.mousewheel.js"></script>
<script src="../../external/globalize.js"></script>
<script src="../../external/globalize.culture.de-DE.js"></script>
@@ -31,8 +31,6 @@
</head>
<body>

<div class="demo">

<p>
<label for="spinner">Decimal spinner:</label>
<input id="spinner" name="spinner" value="5.06">
@@ -46,18 +44,13 @@
</select>
</p>

</div><!-- End demo -->



<div class="demo-description">
<p>
Example of a decimal spinner. Step is set to 0.01.
<br>The code handling the culture change reads the current spinner value,
then changes the culture, then sets the value again, resulting in an updated
formatting, based on the new culture.
</p>
</div><!-- End demo-description -->

</div>
</body>
</html>
11 demos/spinner/default.html
View file
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>jQuery UI Spinner - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.0.js"></script>
<script src="../../jquery-1.8.2.js"></script>
<script src="../../external/jquery.mousewheel.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
@@ -42,8 +42,6 @@
</head>
<body>

<div class="demo">

<p>
<label for="spinner">Select a value:</label>
<input id="spinner" name="value">
@@ -59,13 +57,8 @@
<button id="setvalue">Set value to 5</button>
</p>

</div><!-- End demo -->



<div class="demo-description">
<p>Default spinner.</p>
</div><!-- End demo-description -->

</div>
</body>
</html>