mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Demos: Cleanup.
This commit is contained in:
Scott González
parent
9e259c6e53
commit
303f20e1b3
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -19,8 +19,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
@ -45,13 +43,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the <code>collapsible</code> option to true. Click on the currently open section to collapse its content pane.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -31,8 +31,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
@ -59,13 +57,8 @@
|
||||
|
||||
<button id="toggle">Toggle icons</button>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Customize the header icons with the <code>icons</code> option, which accepts classes for the header's default and active (open) state. Use any class from the UI CSS framework, or create custom classes with background images.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -17,8 +17,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
@ -68,8 +66,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
|
||||
@ -79,7 +75,6 @@ Optionally, toggle sections open/closed on mouseover.
|
||||
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
|
||||
usable without JavaScript.
|
||||
</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -11,6 +11,13 @@
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#accordion-resizer {
|
||||
padding: 10px;
|
||||
width: 350px;
|
||||
height: 220px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#accordion" ).accordion({
|
||||
@ -18,7 +25,7 @@
|
||||
});
|
||||
});
|
||||
$(function() {
|
||||
$( "#accordionResizer" ).resizable({
|
||||
$( "#accordion-resizer" ).resizable({
|
||||
minHeight: 140,
|
||||
minWidth: 200,
|
||||
resize: function() {
|
||||
@ -30,48 +37,36 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<h3 class="docs">Resize the outer container:</h3>
|
||||
|
||||
<div id="accordionResizer" style="padding:10px; width:350px; height:220px;" class="ui-widget-content">
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
|
||||
</div>
|
||||
<h3>Section 2</h3>
|
||||
<div>
|
||||
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
|
||||
</div>
|
||||
<h3>Section 3</h3>
|
||||
<div>
|
||||
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
|
||||
<ul>
|
||||
<li>List item one</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>Section 4</h3>
|
||||
<div>
|
||||
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
|
||||
<div id="accordion-resizer" class="ui-widget-content">
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
|
||||
</div>
|
||||
<h3>Section 2</h3>
|
||||
<div>
|
||||
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
|
||||
</div>
|
||||
<h3>Section 3</h3>
|
||||
<div>
|
||||
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
|
||||
<ul>
|
||||
<li>List item one</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>Section 4</h3>
|
||||
<div>
|
||||
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="ui-icon ui-icon-grip-dotted-horizontal" style="margin:2px auto;"></span>
|
||||
</div><!-- End accordionResizer -->
|
||||
|
||||
<div style="margin-top:7px; padding:10px; width:350px; height:50px;" class="ui-widget-content">I'm another panel</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Because the accordion is comprised of block-level elements, by default its width fills the available horizontal space. To fill the vertical space allocated by its container, set the <code>heightStyle</code> option to <code>"fill"</code>, and the script will automatically set the dimensions of the accordion to the height of its parent container.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -70,8 +70,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
@ -121,8 +119,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
|
||||
@ -132,7 +128,6 @@ Optionally, toggle sections open/closed on mouseover.
|
||||
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
|
||||
usable without JavaScript.
|
||||
</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,24 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Accordion 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="fillspace.html">Fill space</a></li>
|
||||
<li><a href="no-auto-height.html">No auto height</a></li>
|
||||
<li><a href="collapsible.html">Collapse content</a></li>
|
||||
<li><a href="hoverintent.html">Open on hoverintent</a></li>
|
||||
<li><a href="custom-icons.html">Customize icons</a></li>
|
||||
<li><a href="sortable.html">Sortable</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="fillspace.html">Fill space</a></li>
|
||||
<li><a href="no-auto-height.html">No auto height</a></li>
|
||||
<li><a href="collapsible.html">Collapse content</a></li>
|
||||
<li><a href="hoverintent.html">Open on hoverintent</a></li>
|
||||
<li><a href="custom-icons.html">Customize icons</a></li>
|
||||
<li><a href="sortable.html">Sortable</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -19,8 +19,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
@ -45,13 +43,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Setting <code>heightStyle: "content"</code> allows the accordion panels to keep their native height.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -35,8 +35,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="accordion">
|
||||
<div class="group">
|
||||
<h3>Section 1</h3>
|
||||
@ -69,13 +67,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Drag the header to re-order panels.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -30,8 +30,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="toggler">
|
||||
<div id="effect" class="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>This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -37,8 +37,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">Animate</h3>
|
||||
@ -50,13 +48,8 @@
|
||||
|
||||
<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle 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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -29,7 +29,7 @@
|
||||
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
|
||||
currentCategory = item.category;
|
||||
}
|
||||
that._renderItem( ul, item );
|
||||
that._renderItemData( ul, item );
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -57,16 +57,11 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
<label for="search">Search: </label>
|
||||
<input id="search">
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
<label for="search">Search: </label>
|
||||
<input id="search">
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A categorized search result. Try typing "a" or "n".</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -172,8 +172,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label>Your preferred programming language: </label>
|
||||
<select id="combobox">
|
||||
@ -204,15 +202,10 @@
|
||||
</div>
|
||||
<button id="toggle">Show underlying select</button>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.</p>
|
||||
<p>The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.</p>
|
||||
<p>This is not a supported or even complete widget. Its purely for demoing what autocomplete can do with a bit of customization. <a href="http://www.learningjquery.com/2010/06/a-jquery-ui-combobox-under-the-hood">For a detailed explanation of how the widget works, check out this Learning jQuery article.</a></p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -77,20 +77,15 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
<div id="project-label">Select a project (type "j" for a start):</div>
|
||||
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
|
||||
<input id="project">
|
||||
<input type="hidden" id="project-id">
|
||||
<p id="project-description"></p>
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
<div id="project-label">Select a project (type "j" for a start):</div>
|
||||
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
|
||||
<input id="project">
|
||||
<input type="hidden" id="project-id">
|
||||
<p id="project-description"></p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>You can use your own custom data formats and displays by simply overriding the default focus and select actions.</p>
|
||||
<p>Try typing "j" to get a list of projects or just press the down arrow.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -44,22 +44,15 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="tags">Tags: </label>
|
||||
<input id="tags">
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
|
||||
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -41,8 +41,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<form>
|
||||
<label for="developer">Developer: </label>
|
||||
@ -50,14 +48,9 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The autocomplete field uses a custom source option which will match results that have accented characters even when the text field doesn't contain accented characters. However if the you type in accented characters in the text field it is smart enough not to show results that aren't accented.</p>
|
||||
<p>Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,27 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete 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="remote.html">Remote datasource</a></li>
|
||||
<li><a href="remote-with-cache.html">Remote with caching</a></li>
|
||||
<li><a href="remote-jsonp.html">Remote JSONP datasource</a></li>
|
||||
<li><a href="maxheight.html">Scrollable results</a></li>
|
||||
<li><a href="combobox.html">Combobox</a></li>
|
||||
<li><a href="custom-data.html">Custom data and display</a></li>
|
||||
<li><a href="xml.html">XML data parsed once</a></li>
|
||||
<li><a href="categories.html">Categories</a></li>
|
||||
<li><a href="folding.html">Accent folding</a></li>
|
||||
<li><a href="multiple.html">Multiple values</a></li>
|
||||
<li><a href="multiple-remote.html">Multiple, remote</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="remote.html">Remote datasource</a></li>
|
||||
<li><a href="remote-with-cache.html">Remote with caching</a></li>
|
||||
<li><a href="remote-jsonp.html">Remote JSONP datasource</a></li>
|
||||
<li><a href="maxheight.html">Scrollable results</a></li>
|
||||
<li><a href="combobox.html">Combobox</a></li>
|
||||
<li><a href="custom-data.html">Custom data and display</a></li>
|
||||
<li><a href="xml.html">XML data parsed once</a></li>
|
||||
<li><a href="categories.html">Categories</a></li>
|
||||
<li><a href="folding.html">Accent folding</a></li>
|
||||
<li><a href="multiple.html">Multiple values</a></li>
|
||||
<li><a href="multiple-remote.html">Multiple, remote</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -59,20 +59,13 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="tags">Tags: </label>
|
||||
<input id="tags">
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large. Try typing "a" or "s" above to get a long list of results that you can scroll through.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -67,21 +67,14 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="birds">Birds: </label>
|
||||
<input id="birds" size="50">
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.</p>
|
||||
<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -80,21 +80,14 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="tags">Tag programming languages: </label>
|
||||
<input id="tags" size="50">
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.</p>
|
||||
<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -63,8 +63,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="city">Your city: </label>
|
||||
<input id="city">
|
||||
@ -76,14 +74,9 @@
|
||||
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.</p>
|
||||
<p>In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -42,21 +42,14 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="birds">Birds: </label>
|
||||
<input id="birds">
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p>
|
||||
<p>Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -37,8 +37,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="birds">Birds: </label>
|
||||
<input id="birds">
|
||||
@ -49,14 +47,9 @@
|
||||
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p>
|
||||
<p>The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -48,8 +48,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="birds">London matches: </label>
|
||||
<input id="birds" />
|
||||
@ -60,14 +58,9 @@
|
||||
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.</p>
|
||||
<p>This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -21,8 +21,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<input type="checkbox" id="check" /><label for="check">Toggle</label>
|
||||
|
||||
<div id="format">
|
||||
@ -31,14 +29,9 @@
|
||||
<input type="checkbox" id="check3" /><label for="check3">U</label>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.</p>
|
||||
<p>This demo also demonstrates three checkboxes styled as a button set by calling <code>.buttonset()</code> on a common container.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -11,28 +11,24 @@
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "input[type=submit], a, button", ".demo" ).button();
|
||||
$( "a", ".demo" ).click(function() { return false; });
|
||||
$( "input[type=submit], a, button" )
|
||||
.button()
|
||||
.click(function( event ) {
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<button>A button element</button>
|
||||
|
||||
<input type="submit" value="A submit button">
|
||||
|
||||
<a href="#">An anchor</a>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -12,45 +12,38 @@
|
||||
<script>
|
||||
$(function() {
|
||||
$( ".demo button:first" ).button({
|
||||
icons: {
|
||||
primary: "ui-icon-locked"
|
||||
},
|
||||
text: false
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-locked"
|
||||
}
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-gear",
|
||||
secondary: "ui-icon-triangle-1-s"
|
||||
}
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-gear",
|
||||
secondary: "ui-icon-triangle-1-s"
|
||||
},
|
||||
text: false
|
||||
});
|
||||
icons: {
|
||||
primary: "ui-icon-locked"
|
||||
},
|
||||
text: false
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-locked"
|
||||
}
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-gear",
|
||||
secondary: "ui-icon-triangle-1-s"
|
||||
}
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-gear",
|
||||
secondary: "ui-icon-triangle-1-s"
|
||||
},
|
||||
text: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<button>Button with icon only</button>
|
||||
<button>Button with icon on the left</button>
|
||||
<button>Button with two icons</button>
|
||||
<button>Button with two icons and no text</button>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Some buttons with various combinations of text and icons, here specified via metadata.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,23 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button 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="radio.html">Radios</a></li>
|
||||
<li><a href="checkbox.html">Checkboxes</a></li>
|
||||
<li><a href="icons.html">Icons</a></li>
|
||||
<li><a href="toolbar.html">Toolbar</a></li>
|
||||
<li><a href="splitbutton.html">Split Button</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="radio.html">Radios</a></li>
|
||||
<li><a href="checkbox.html">Checkboxes</a></li>
|
||||
<li><a href="icons.html">Icons</a></li>
|
||||
<li><a href="toolbar.html">Toolbar</a></li>
|
||||
<li><a href="splitbutton.html">Split Button</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -17,8 +17,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<form>
|
||||
<div id="radio">
|
||||
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
|
||||
@ -27,13 +25,8 @@
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A set of three radio buttons transformed into a button set.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -49,30 +49,21 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<button id="rerun">Run last action</button>
|
||||
<button id="select">Select an action</button>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="#">Open...</a></li>
|
||||
<li><a href="#">Save</a></li>
|
||||
<li><a href="#">Delete</a></li>
|
||||
</ul>
|
||||
<button id="rerun">Run last action</button>
|
||||
<button id="select">Select an action</button>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
<ul>
|
||||
<li><a href="#">Open...</a></li>
|
||||
<li><a href="#">Save</a></li>
|
||||
<li><a href="#">Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>An example of a split button built with two buttons: A plain button with just text, one with only a primary icon
|
||||
and no text. Both are grouped together in a set.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -86,8 +86,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<span id="toolbar" class="ui-widget-header ui-corner-all">
|
||||
<button id="beginning">go to beginning</button>
|
||||
<button id="rewind">rewind</button>
|
||||
@ -95,9 +93,9 @@
|
||||
<button id="stop">stop</button>
|
||||
<button id="forward">fast forward</button>
|
||||
<button id="end">go to end</button>
|
||||
|
||||
|
||||
<input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
|
||||
|
||||
|
||||
<span id="repeat">
|
||||
<input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
|
||||
<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
|
||||
@ -105,16 +103,11 @@
|
||||
</span>
|
||||
</span>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
|
||||
an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
|
||||
</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -20,17 +20,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"> <input type="text" id="alternate" size="30"/></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Populate an alternate field with its own date format whenever a date is selected using the <code>altField</code> and <code>altFormat</code> options. This feature could be used to present a human-friendly date for user selection, while passing a more computer-friendly date through for further processing.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -27,8 +27,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker" size="30"/></p>
|
||||
|
||||
<p>Animations:<br />
|
||||
@ -46,13 +44,8 @@
|
||||
</select>
|
||||
</p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Use different animations when opening or closing the datepicker. Choose an animation from the dropdown, then click on the input to see its effect. You can use one of the three standard animations or any of the UI Effects.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -19,17 +19,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Display a button for selecting Today's date and a Done button for closing the calendar with the boolean <code>showButtonPanel</code> option. Each button is enabled by default when the bar is displayed, but can be turned off with additional options. Button text is customizable.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -20,8 +20,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker" size="30"/></p>
|
||||
|
||||
<p>Format options:<br />
|
||||
@ -35,13 +33,8 @@
|
||||
</select>
|
||||
</p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Display date feedback in a variety of ways. Choose a date format from the dropdown, then click on the input and select a date to see it in that format.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -32,20 +32,13 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<label for="from">From</label>
|
||||
<input type="text" id="from" name="from"/>
|
||||
<label for="to">to</label>
|
||||
<input type="text" id="to" name="to"/>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Select the date range to search for.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -17,17 +17,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -20,17 +20,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -21,17 +21,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Click the icon next to the input field to show the datepicker. Set the datepicker to open on focus (default behavior), on icon click, or both.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,31 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker 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="date-formats.html">Format date</a></li>
|
||||
<li><a href="min-max.html">Restrict date range</a></li>
|
||||
<li><a href="localization.html">Localize calendar</a></li>
|
||||
<li><a href="alt-field.html">Populate alternate field</a></li>
|
||||
<li><a href="inline.html">Display inline</a></li>
|
||||
<li><a href="buttonbar.html">Display button bar</a></li>
|
||||
<li><a href="dropdown-month-year.html">Display month & year menus</a></li>
|
||||
<li><a href="other-months.html">Dates in other months</a></li>
|
||||
<li><a href="show-week.html">Show week of the year</a></li>
|
||||
<li><a href="multiple-calendars.html">Display multiple months</a></li>
|
||||
<li><a href="icon-trigger.html">Icon trigger</a></li>
|
||||
<li><a href="animation.html">Animations</a></li>
|
||||
<li><a href="date-range.html">Date Range</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="date-formats.html">Format date</a></li>
|
||||
<li><a href="min-max.html">Restrict date range</a></li>
|
||||
<li><a href="localization.html">Localize calendar</a></li>
|
||||
<li><a href="alt-field.html">Populate alternate field</a></li>
|
||||
<li><a href="inline.html">Display inline</a></li>
|
||||
<li><a href="buttonbar.html">Display button bar</a></li>
|
||||
<li><a href="dropdown-month-year.html">Display month & year menus</a></li>
|
||||
<li><a href="other-months.html">Dates in other months</a></li>
|
||||
<li><a href="show-week.html">Show week of the year</a></li>
|
||||
<li><a href="multiple-calendars.html">Display multiple months</a></li>
|
||||
<li><a href="icon-trigger.html">Icon trigger</a></li>
|
||||
<li><a href="animation.html">Animations</a></li>
|
||||
<li><a href="date-range.html">Date Range</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -17,17 +17,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
Date: <div id="datepicker"></div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -90,8 +90,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"/>
|
||||
<select id="locale">
|
||||
<option value="af">Afrikaans</option>
|
||||
@ -164,13 +162,8 @@
|
||||
<option value="cy-GB">Welsh/UK (Cymraeg)</option>
|
||||
</select></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Localize the datepicker calendar language and format (English / Western formatting is the default). The datepicker includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -17,17 +17,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Restrict the range of selectable dates with the <code>minDate</code> and <code>maxDate</code> options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D'). For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -20,17 +20,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single datepicker.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -20,18 +20,11 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The datepicker can show dates that come from other than the main month
|
||||
being displayed. These other dates can also be made selectable.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -20,20 +20,13 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The datepicker can show the week of the year. The default calculation follows
|
||||
the ISO 8601 definition: the week starts on Monday, the first week of the year
|
||||
contains the first Thursday of the year. This means that some days from one
|
||||
year may be placed into weeks 'belonging' to another year.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
324
demos/demos.css
324
demos/demos.css
@ -1,335 +1,19 @@
|
||||
body {
|
||||
font-size: 62.5%;
|
||||
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Site
|
||||
-------------------------------- */
|
||||
|
||||
body {
|
||||
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
|
||||
}
|
||||
|
||||
/* Layout
|
||||
-------------------------------- */
|
||||
|
||||
.layout-grid {
|
||||
width: 960px;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.layout-grid td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.layout-grid td.left-nav {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.layout-grid td.normal {
|
||||
border-left: 1px solid #eee;
|
||||
padding: 20px 24px;
|
||||
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
|
||||
}
|
||||
|
||||
.layout-grid td.demos {
|
||||
background: url('/images/demos_bg.jpg') no-repeat;
|
||||
height: 337px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Normal
|
||||
-------------------------------- */
|
||||
|
||||
.normal h3,
|
||||
.normal h4 {
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.normal h3 {
|
||||
padding: 0 0 9px;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.normal h4 {
|
||||
padding-bottom: 21px;
|
||||
border-bottom: 1px dashed #999;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.normal p {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
/* Demos */
|
||||
|
||||
.demos-nav, .demos-nav dt, .demos-nav dd, .demos-nav ul, .demos-nav li {
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.demos-nav {
|
||||
float: left;
|
||||
width: 170px;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.demos-nav dt,
|
||||
.demos-nav h4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font: normal 1.1em "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
|
||||
color: #e87b10;
|
||||
}
|
||||
|
||||
.demos-nav dt,
|
||||
.demos-nav h4 {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0;
|
||||
padding-left: 8px;
|
||||
padding-bottom:5px;
|
||||
line-height: 1.2em;
|
||||
border-bottom: 1px solid #F4F4F4;
|
||||
}
|
||||
|
||||
.demos-nav dd a,
|
||||
.demos-nav li a {
|
||||
border-bottom: 1px solid #F4F4F4;
|
||||
display:block;
|
||||
padding: 4px 3px 4px 8px;
|
||||
font-size: 90%;
|
||||
text-decoration: none;
|
||||
color: #555 ;
|
||||
margin:2px 0;
|
||||
height:13px;
|
||||
}
|
||||
|
||||
.demos-nav dd a:hover,
|
||||
.demos-nav dd a:focus,
|
||||
.demos-nav dd a:hover,
|
||||
.demos-nav dd a:focus {
|
||||
background: #f3f3f3;
|
||||
color:#000;
|
||||
-moz-border-radius: 5px; -webkit-border-radius: 5px;
|
||||
}
|
||||
.demos-nav dd a.selected {
|
||||
background: #555;
|
||||
color:#ffffff;
|
||||
-moz-border-radius: 5px; -webkit-border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* 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
|
||||
*/
|
||||
|
||||
.normal h3.demo-header { font-size:32px; padding:0 0 5px; border-bottom:1px solid #eee; text-transform: capitalize; }
|
||||
.normal h4.demo-subheader { font-size:10px; text-transform: uppercase; color:#999; padding:8px 0 3px; border:0; margin:0; }
|
||||
#demo-notes a, #demo-link a, #demo-source a { color:#1b75bb; text-decoration:none; }
|
||||
.normal a:hover,
|
||||
.normal a:active { color:#0b559b; }
|
||||
|
||||
#demo-config { padding:20px 0 0; }
|
||||
|
||||
#demo-frame { float:left; width:540px; height:380px; border:1px solid #ddd; overflow: auto; position: relative; }
|
||||
#demo-frame h3, #demo-frame h4 { padding: 0; font-weight: bold; font-size: 1em; }
|
||||
|
||||
#demo-config-menu { float:right; width:180px; }
|
||||
#demo-config-menu h4 { font-size:13px; color:#666; font-weight:normal; border:0; padding-left:18px; }
|
||||
|
||||
#demo-config-menu ul { list-style: none; padding: 0; margin: 0; }
|
||||
|
||||
#demo-config-menu li { font-size:12px; padding:0 0 0 10px; margin:3px 0; zoom: 1; }
|
||||
|
||||
#demo-config-menu li a:link,
|
||||
#demo-config-menu li a:visited { display:block; padding:1px 8px 4px; border-bottom:1px dotted #b3b3b3; }
|
||||
* html #demo-config-menu li a:link,
|
||||
* html #demo-config-menu li a:visited { padding:1px 8px 2px; }
|
||||
#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:active { background: url(images/demo-config-on.gif) no-repeat left; padding-left:18px; color:#fff; border:0; margin-left:-10px; margin-top: 0px; margin-bottom: 0px; }
|
||||
|
||||
#demo-source, #demo-notes {
|
||||
.demo-description {
|
||||
clear: both;
|
||||
padding: 20px 0 0;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
#demo-notes { width:520px; color:#333; font-size: 1em; }
|
||||
#demo-notes p code, .demo-description p code { padding: 0; font-weight: bold; }
|
||||
#demo-source pre, #demo-source code { padding: 0; }
|
||||
code, pre { padding:8px 0 8px 20px ; font-size: 1.2em; line-height:130%; }
|
||||
|
||||
#demo-source a:link,
|
||||
#demo-source a:visited,
|
||||
#demo-source a:hover,
|
||||
#demo-source a:active { font-size:12px; padding-left:13px; background-position: left center; background-repeat: no-repeat; }
|
||||
|
||||
#demo-source a.source-open:link,
|
||||
#demo-source a.source-open:visited,
|
||||
#demo-source a.source-open:hover,
|
||||
#demo-source a.source-open:active { background-image: url(images/demo-spindown-open.gif); }
|
||||
|
||||
#demo-source a.source-closed:link,
|
||||
#demo-source a.source-closed:visited,
|
||||
#demo-source a.source-closed:hover,
|
||||
#demo-source a.source-closed:active { background-image: url(images/demo-spindown-closed.gif); }
|
||||
|
||||
div.demo {
|
||||
padding:12px;
|
||||
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
|
||||
}
|
||||
|
||||
div.demo h3.docs { clear:left; font-size:12px; font-weight:normal; padding:0 0 1em; margin:0; }
|
||||
|
||||
div.demo-description {
|
||||
clear:both;
|
||||
padding:12px;
|
||||
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
|
||||
padding: 12px;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.ui-draggable, .ui-droppable {
|
||||
background-position: top left;
|
||||
background-position: top;
|
||||
}
|
||||
|
||||
.left-nav .demos-nav {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#demo-link { font-size:11px; padding-top: 6px; clear: both; overflow: hidden; }
|
||||
#demo-link a span.ui-icon { float:left; margin-right:3px; }
|
||||
|
||||
/* Component containers
|
||||
----------------------------------*/
|
||||
#widget-docs .ui-widget { font-family: Trebuchet MS,Verdana,Arial,sans-serif; font-size: 1em; }
|
||||
#widget-docs .ui-widget input, #widget-docs .ui-widget select, #widget-docs .ui-widget textarea, #widget-docs .ui-widget button { font-family: Trebuchet MS,Verdana,Arial,sans-serif; font-size: 1em; }
|
||||
#widget-docs .ui-widget-header { border: 1px solid #ffffff; background: #464646 url(images/464646_40x100_textures_01_flat_100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
|
||||
#widget-docs .ui-widget-header a { color: #ffffff; }
|
||||
#widget-docs .ui-widget-content { border: 1px solid #ffffff; background: #ffffff url(images/ffffff_40x100_textures_01_flat_75.png) 50% 50% repeat-x; color: #222222; }
|
||||
#widget-docs .ui-widget-content a { color: #222222; }
|
||||
|
||||
/* Interaction states
|
||||
----------------------------------*/
|
||||
#widget-docs .ui-state-default, #widget-docs .ui-widget-content #widget-docs .ui-state-default { border: 1px solid #666666; background: #555555 url(images/555555_40x100_textures_03_highlight_soft_75.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; }
|
||||
#widget-docs .ui-state-default a { color: #ffffff; text-decoration: none; outline: none; }
|
||||
#widget-docs .ui-state-hover, #widget-docs .ui-widget-content #widget-docs .ui-state-hover, #widget-docs .ui-state-focus, #widget-docs .ui-widget-content #widget-docs .ui-state-focus { border: 1px solid #666666; background: #444444 url(images/444444_40x100_textures_03_highlight_soft_60.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; }
|
||||
#widget-docs .ui-state-hover a { color: #ffffff; text-decoration: none; outline: none; }
|
||||
#widget-docs .ui-state-active, #widget-docs .ui-widget-content #widget-docs .ui-state-active { border: 1px solid #666666; background: #ffffff url(images/ffffff_40x100_textures_01_flat_65.png) 50% 50% repeat-x; font-weight: normal; color: #F6921E; outline: none; }
|
||||
#widget-docs .ui-state-active a { color: #F6921E; outline: none; text-decoration: none; }
|
||||
|
||||
/* Interaction Cues
|
||||
----------------------------------*/
|
||||
#widget-docs .ui-state-highlight, #widget-docs .ui-widget-content #widget-docs .ui-state-highlight {border: 1px solid #fcefa1; background: #fbf9ee url(images/fbf9ee_40x100_textures_02_glass_55.png) 50% 50% repeat-x; color: #363636; }
|
||||
#widget-docs .ui-state-error, #widget-docs .ui-widget-content #widget-docs .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/fef1ec_40x100_textures_05_inset_soft_95.png) 50% bottom repeat-x; color: #cd0a0a; }
|
||||
#widget-docs .ui-state-error-text, #widget-docs .ui-widget-content #widget-docs .ui-state-error-text { color: #cd0a0a; }
|
||||
#widget-docs .ui-state-disabled, #widget-docs .ui-widget-content #widget-docs .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
|
||||
#widget-docs .ui-priority-primary, #widget-docs .ui-widget-content #widget-docs .ui-priority-primary { font-weight: bold; }
|
||||
#widget-docs .ui-priority-secondary, #widget-docs .ui-widget-content #widget-docs .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
|
||||
|
||||
/* Icons
|
||||
----------------------------------*/
|
||||
|
||||
/* states and images */
|
||||
#demo-frame-wrapper .ui-icon, #widget-docs .ui-icon { width: 16px; height: 16px; background-image: url(images/222222_256x240_icons_icons.png); }
|
||||
#widget-docs .ui-widget-content .ui-icon {background-image: url(images/222222_256x240_icons_icons.png); }
|
||||
#widget-docs .ui-widget-header .ui-icon {background-image: url(images/222222_256x240_icons_icons.png); }
|
||||
#widget-docs .ui-state-default .ui-icon { background-image: url(images/888888_256x240_icons_icons.png); }
|
||||
#widget-docs .ui-state-hover .ui-icon, #widget-docs .ui-state-focus .ui-icon {background-image: url(images/454545_256x240_icons_icons.png); }
|
||||
#widget-docs .ui-state-active .ui-icon {background-image: url(images/454545_256x240_icons_icons.png); }
|
||||
#widget-docs .ui-state-highlight .ui-icon {background-image: url(images/2e83ff_256x240_icons_icons.png); }
|
||||
#widget-docs .ui-state-error .ui-icon, #widget-docs .ui-state-error-text .ui-icon {background-image: url(images/cd0a0a_256x240_icons_icons.png); }
|
||||
|
||||
|
||||
/* Misc visuals
|
||||
----------------------------------*/
|
||||
|
||||
/* Corner radius */
|
||||
#widget-docs .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; }
|
||||
#widget-docs .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
|
||||
#widget-docs .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
|
||||
#widget-docs .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
|
||||
#widget-docs .ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
|
||||
#widget-docs .ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
|
||||
#widget-docs .ui-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
|
||||
#widget-docs .ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
|
||||
#widget-docs .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; }
|
||||
|
||||
/* Overlays */
|
||||
#widget-docs .ui-widget-overlay { background: #aaaaaa url(images/aaaaaa_40x100_textures_01_flat_0.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
|
||||
#widget-docs .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/aaaaaa_40x100_textures_01_flat_0.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; }
|
||||
|
||||
/*
|
||||
----------------------------------*/
|
||||
|
||||
#widget-docs { margin:20px 0 0; border: none; }
|
||||
|
||||
#widget-docs h2, #widget-docs h3, #widget-docs h4, #widget-docs p, #widget-docs ul, #widget-docs code { margin:0; padding:0; }
|
||||
#widget-docs code { display:block; color:#444; font-size:.9em; margin:0 0 1em; }
|
||||
#widget-docs code strong { color:#000; }
|
||||
#widget-docs p { margin:0 3em 1.2em 0; }
|
||||
#widget-docs p.intro { font-size:13px; color:#666; line-height:1.3; }
|
||||
#widget-docs ul { list-style-type: none; }
|
||||
|
||||
#widget-docs h2 { font-size:16px; margin:1.2em 0 .5em; }
|
||||
#widget-docs h3 { font-size:14px; color:#e6820E; margin:1.5em 0 .5em; }
|
||||
.normal #widget-docs h4 { font-size:12px; color:#000; border:0; margin:0 0 .5em; }
|
||||
|
||||
#docs-overview-main { width:400px; }
|
||||
#docs-overview-sidebar { float:right; width:200px; }
|
||||
#docs-overview-sidebar a span { color:#666; }
|
||||
#widget-docs #docs-overview-main p { margin-right:0; }
|
||||
#widget-docs #docs-overview-sidebar h4 { padding-left:0; }
|
||||
|
||||
.docs-list-header { float:left; width:100%; margin:10px 0 0; border-bottom:1px solid #eee; }
|
||||
#widget-docs .docs-list-header h2 { float:left; margin:0; }
|
||||
#widget-docs .docs-list-header p { float:right; margin:5px 0; font-size:11px; }
|
||||
|
||||
.docs-list { float:left; width:100%; padding:0 0 10px; }
|
||||
.docs-list .param-header { float:left; clear:left; width:100%; padding:8px 0; border-top:1px solid #eee; }
|
||||
#widget-docs .param-header h3, #widget-docs .param-header p { margin:0; float:left; }
|
||||
#widget-docs .param-header h3 { width:50%; }
|
||||
#widget-docs .param-header h3 span { background: url(images/demo-spindown-closed.gif) no-repeat left; padding-left:13px; }
|
||||
#widget-docs .param-open .param-header h3 span { background: url(images/demo-spindown-open.gif) no-repeat left; }
|
||||
#widget-docs .param-header p { width:24%; }
|
||||
#widget-docs .param-header p.param-type span { background: url(images/icon-docs-info.gif) no-repeat left; cursor:pointer; border-bottom:1px dashed #ccc; padding-left:15px; }
|
||||
|
||||
.param-details { padding-left:13px; }
|
||||
.param-args { margin:0 0 1.5em; border-top:1px dotted #ccc;}
|
||||
.param-args td { padding:3px 30px 3px 5px; border-bottom:1px dotted #ccc; }
|
||||
|
||||
|
||||
/* overrides for ui-tab styles */
|
||||
#widget-docs ul.ui-tabs-nav { padding:0 0 0 8px; }
|
||||
#widget-docs .ui-tabs-nav li { margin:5px 5px 0 0; }
|
||||
|
||||
#widget-docs .ui-tabs-nav li a:link,
|
||||
#widget-docs .ui-tabs-nav li a:visited,
|
||||
#widget-docs .ui-tabs-nav li a:hover,
|
||||
#widget-docs .ui-tabs-nav li a:active { font-size:14px; padding:4px 1.2em 3px; color:#fff; }
|
||||
|
||||
#widget-docs .ui-tabs-nav li.ui-tabs-active a:link,
|
||||
#widget-docs .ui-tabs-nav li.ui-tabs-active a:visited,
|
||||
#widget-docs .ui-tabs-nav li.ui-tabs-active a:hover,
|
||||
#widget-docs .ui-tabs-nav li.ui-tabs-active a:active { color:#e6820E; }
|
||||
|
||||
#widget-docs .ui-tabs-panel { padding:20px 9px; font-size:12px; line-height:1.4; color:#000; }
|
||||
|
||||
#widget-docs .ui-widget-content a:link,
|
||||
#widget-docs .ui-widget-content a:visited { color:#1b75bb; text-decoration:none; }
|
||||
#widget-docs .ui-widget-content a:hover,
|
||||
#widget-docs .ui-widget-content a:active { color:#0b559b; }
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -36,21 +36,14 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="dialog" title="Basic dialog">
|
||||
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
|
||||
</div>
|
||||
|
||||
<button id="opener">Open Dialog</button>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Dialogs may be animated by specifying an effect for the show and/or hide properties. You must include the individual effects file for any effects you would like to use.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -22,33 +22,12 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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>
|
||||
<form>
|
||||
<input value="text input" /><br />
|
||||
<input type="checkbox" />checkbox<br />
|
||||
<input type="radio" />radio<br />
|
||||
<select>
|
||||
<option>select</option>
|
||||
</select><br /><br />
|
||||
<textarea>textarea</textarea><br />
|
||||
</form>
|
||||
</div><!-- End sample page content -->
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,23 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Dialog 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 dialog</a></li>
|
||||
<li><a href="modal.html">Modal dialog</a></li>
|
||||
<li><a href="modal-message.html">Modal message</a></li>
|
||||
<li><a href="modal-confirmation.html">Modal confirmation</a></li>
|
||||
<li><a href="modal-form.html">Modal form</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="animated.html">Animated dialog</a></li>
|
||||
<li><a href="modal.html">Modal dialog</a></li>
|
||||
<li><a href="modal-message.html">Modal message</a></li>
|
||||
<li><a href="modal-confirmation.html">Modal confirmation</a></li>
|
||||
<li><a href="modal-form.html">Modal form</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -16,9 +16,6 @@
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
|
||||
$( "#dialog:ui-dialog" ).dialog( "destroy" );
|
||||
|
||||
$( "#dialog-confirm" ).dialog({
|
||||
resizable: false,
|
||||
height:140,
|
||||
@ -37,33 +34,14 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="dialog-confirm" 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>
|
||||
<form>
|
||||
<input value="text input" /><br />
|
||||
<input type="checkbox" />checkbox<br />
|
||||
<input type="radio" />radio<br />
|
||||
<select>
|
||||
<option>select</option>
|
||||
</select><br /><br />
|
||||
<textarea>textarea</textarea><br />
|
||||
</form>
|
||||
</div><!-- End sample page content -->
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Confirm an action that may be destructive or important. Set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -30,9 +30,6 @@
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
|
||||
$( "#dialog:ui-dialog" ).dialog( "destroy" );
|
||||
|
||||
var name = $( "#name" ),
|
||||
email = $( "#email" ),
|
||||
password = $( "#password" ),
|
||||
@ -68,7 +65,7 @@
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$( "#dialog-form" ).dialog({
|
||||
autoOpen: false,
|
||||
height: 300,
|
||||
@ -116,8 +113,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="dialog-form" title="Create new user">
|
||||
<p class="validateTips">All form fields are required.</p>
|
||||
|
||||
@ -155,13 +150,8 @@
|
||||
</div>
|
||||
<button id="create-user">Create new user</button>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -17,9 +17,6 @@
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
|
||||
$( "#dialog:ui-dialog" ).dialog( "destroy" );
|
||||
|
||||
$( "#dialog-message" ).dialog({
|
||||
modal: true,
|
||||
buttons: {
|
||||
@ -33,8 +30,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="dialog-message" title="Download complete">
|
||||
<p>
|
||||
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
|
||||
@ -45,27 +40,10 @@
|
||||
</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>
|
||||
<form>
|
||||
<input value="text input" /><br />
|
||||
<input type="checkbox" />checkbox<br />
|
||||
<input type="radio" />radio<br />
|
||||
<select>
|
||||
<option>select</option>
|
||||
</select><br /><br />
|
||||
<textarea>textarea</textarea><br />
|
||||
</form>
|
||||
</div><!-- End sample page content -->
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -16,9 +16,6 @@
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
|
||||
$( "#dialog:ui-dialog" ).dialog( "destroy" );
|
||||
|
||||
$( "#dialog-modal" ).dialog({
|
||||
height: 140,
|
||||
modal: true
|
||||
@ -28,33 +25,14 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="dialog-modal" 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>
|
||||
<form>
|
||||
<input value="text input" /><br />
|
||||
<input type="checkbox" />checkbox<br />
|
||||
<input type="radio" />radio<br />
|
||||
<select>
|
||||
<option>select</option>
|
||||
</select><br /><br />
|
||||
<textarea>textarea</textarea><br />
|
||||
</form>
|
||||
</div><!-- End sample page content -->
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A modal dialog prevents the user from interacting with the rest of the page until it is closed.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -16,6 +16,7 @@
|
||||
#draggable { cursor: n-resize; }
|
||||
#draggable2 { cursor: e-resize; }
|
||||
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
|
||||
h3 { clear: left; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
@ -23,17 +24,14 @@
|
||||
$( "#draggable2" ).draggable({ axis: "x" });
|
||||
|
||||
$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
|
||||
$( "#draggable4" ).draggable({ containment: "#demo-frame" });
|
||||
$( "#draggable5" ).draggable({ containment: "parent" });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
<h3>Constrain movement along an axis:</h3>
|
||||
|
||||
<h3 class="docs">Constrain movement along an axis:</h3>
|
||||
|
||||
<div id="draggable" class="draggable ui-widget-content">
|
||||
<p>I can be dragged only vertically</p>
|
||||
</div>
|
||||
@ -42,28 +40,19 @@
|
||||
<p>I can be dragged only horizontally</p>
|
||||
</div>
|
||||
|
||||
<h3 class="docs">Or to within another DOM element:</h3>
|
||||
<h3>Or to within another DOM element:</h3>
|
||||
<div id="containment-wrapper">
|
||||
<div id="draggable3" class="draggable ui-widget-content">
|
||||
<p>I'm contained within the box</p>
|
||||
<div id="draggable3" class="draggable ui-widget-content">
|
||||
<p>I'm contained within the box</p>
|
||||
</div>
|
||||
|
||||
<div class="draggable ui-widget-content">
|
||||
<p id="draggable5" class="ui-widget-header">I'm contained within my parent</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="draggable4" class="draggable ui-widget-content">
|
||||
<p>I'm contained within the box's parent</p>
|
||||
</div>
|
||||
|
||||
<div class="draggable ui-widget-content">
|
||||
<p id="draggable5" class="ui-widget-header">I'm contained within my parent</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the <code>axis</code> option to limit the draggable's path to the x- or y-axis, or 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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -23,8 +23,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>I will always stick to the center (relative to the mouse)</p>
|
||||
</div>
|
||||
@ -37,13 +35,8 @@
|
||||
<p>My cursor position is only controlled for the 'bottom' value</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the <code>cursorAt</code> option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left). Customize the cursor's appearance by supplying the <code>cursor</code> option with a valid CSS cursor value: default, move, pointer, crosshair, etc.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -21,19 +21,12 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me around</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -23,8 +23,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Only if you drag me by 20 pixels, the dragging will start</p>
|
||||
</div>
|
||||
@ -33,13 +31,8 @@
|
||||
<p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Delay the start of dragging for a number of milliseconds with the <code>delay</code> option; prevent dragging 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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -52,8 +52,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget ui-widget-content">
|
||||
|
||||
<p>Drag me to trigger the chain of events.</p>
|
||||
@ -65,13 +63,8 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Layer functionality onto the draggable using the <code>start</code>, <code>drag</code>, and <code>stop</code> events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -24,8 +24,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p class="ui-widget-header">I can be dragged only by this handle</p>
|
||||
</div>
|
||||
@ -35,16 +33,9 @@
|
||||
<p class="ui-widget-header">…but you can't drag me by this handle.</p>
|
||||
</div>
|
||||
|
||||
<!-- ADD CANCEL DEMO -->
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Allow dragging only when the cursor is over a specific part of the draggable. Use the <code>handle</code> option to specify the jQuery selector of an element (or group of elements) used to drag the object.</p>
|
||||
<p>Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the <code>cancel</code> option to specify a jQuery selector over which to "cancel" draggable functionality.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,28 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable 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="events.html">Events</a></li>
|
||||
<li><a href="constrain-movement.html">Constrain movement</a></li>
|
||||
<li><a href="delay-start.html">Delay start</a></li>
|
||||
<li><a href="snap-to.html">Snap to element or grid</a></li>
|
||||
<li><a href="scroll.html">Auto-scroll</a></li>
|
||||
<li><a href="revert.html">Revert position</a></li>
|
||||
<li><a href="visual-feedback.html">Visual feedback</a></li>
|
||||
<li><a href="handle.html">Drag handle</a></li>
|
||||
<li><a href="cursor-style.html">Cursor style</a></li>
|
||||
<li><a href="sortable.html">Draggable + Sortable</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="events.html">Events</a></li>
|
||||
<li><a href="constrain-movement.html">Constrain movement</a></li>
|
||||
<li><a href="delay-start.html">Delay start</a></li>
|
||||
<li><a href="snap-to.html">Snap to element or grid</a></li>
|
||||
<li><a href="scroll.html">Auto-scroll</a></li>
|
||||
<li><a href="revert.html">Revert position</a></li>
|
||||
<li><a href="visual-feedback.html">Visual feedback</a></li>
|
||||
<li><a href="handle.html">Drag handle</a></li>
|
||||
<li><a href="cursor-style.html">Cursor style</a></li>
|
||||
<li><a href="sortable.html">Draggable + Sortable</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -22,8 +22,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Revert the original</p>
|
||||
</div>
|
||||
@ -32,13 +30,8 @@
|
||||
<p>Revert the helper</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.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -23,8 +23,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Scroll set to true, default settings</p>
|
||||
</div>
|
||||
@ -39,13 +37,8 @@
|
||||
|
||||
<div style='height: 5000px; width: 1px;'></div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Automatically scroll the document when the draggable is moved beyond the viewport. Set the <code>scroll</code> option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the <code>scrollSensitivity</code> and <code>scrollSpeed</code> options.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -27,8 +27,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="snaptarget" class="ui-widget-header">
|
||||
<p>I'm a snap target</p>
|
||||
</div>
|
||||
@ -55,14 +53,9 @@
|
||||
<p>I snap to a 80 x 80 grid</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Snap the draggable to the inner or outer boundaries of a DOM element. Use the <code>snap</code>, <code>snapMode</code> (inner, outer, both), and <code>snapTolerance</code> (distance in pixels the draggable must be from the element when snapping is invoked) options. </p>
|
||||
<p>Or snap the draggable 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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -12,8 +12,8 @@
|
||||
<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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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 @@
|
||||
</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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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 @@
|
||||
<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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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 — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — 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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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 @@
|
||||
</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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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 @@
|
||||
<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 @@
|
||||
<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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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 @@
|
||||
|
||||
<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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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 @@
|
||||
|
||||
<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>
|
||||
|
||||
@ -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
357
demos/index.html
@ -1,337 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Demos</title>
|
||||
<link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../jquery-1.8.0.js"></script>
|
||||
<script src="../external/jquery.bgiframe-2.1.2.js"></script>
|
||||
<script src="../external/globalize.js"></script>
|
||||
<script src="../external/globalize.culture.de-DE.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.accordion.js"></script>
|
||||
<script src="../ui/jquery.ui.autocomplete.js"></script>
|
||||
<script src="../ui/jquery.ui.button.js"></script>
|
||||
<script src="../ui/jquery.ui.datepicker.js"></script>
|
||||
<script src="../ui/jquery.ui.dialog.js"></script>
|
||||
<script src="../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../ui/jquery.ui.droppable.js"></script>
|
||||
<script src="../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../ui/jquery.ui.position.js"></script>
|
||||
<script src="../ui/jquery.ui.progressbar.js"></script>
|
||||
<script src="../ui/jquery.ui.resizable.js"></script>
|
||||
<script src="../ui/jquery.ui.selectable.js"></script>
|
||||
<script src="../ui/jquery.ui.slider.js"></script>
|
||||
<script src="../ui/jquery.ui.sortable.js"></script>
|
||||
<script src="../ui/jquery.ui.spinner.js"></script>
|
||||
<script src="../ui/jquery.ui.tabs.js"></script>
|
||||
<script src="../ui/jquery.ui.tooltip.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>
|
||||
<script src="../ui/jquery.ui.effect-clip.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-drop.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-explode.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-fold.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-highlight.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-pulsate.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-scale.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-shake.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-slide.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-transfer.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-af.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ar.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ar-DZ.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-az.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-bs.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-bg.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ca.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-cs.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-cy-GB.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-da.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-de.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-el.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-en-AU.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-en-GB.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-en-NZ.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-eo.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-es.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-et.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-eu.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-fa.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-fi.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-fo.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-fr.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-fr-CH.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-gl.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-he.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-hi.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-hr.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-hu.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-hy.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-id.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-is.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-it.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ja.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ka.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-kk.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-km.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ko.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-lb.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-lt.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-lv.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-mk.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ml.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ms.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-nl.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-nl-BE.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-no.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-pl.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-pt.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-pt-BR.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-rm.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ro.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ru.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-sk.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-sl.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-sq.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-sr.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-sr-SR.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-sv.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ta.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-th.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-tj.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-tr.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-uk.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-vi.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-zh-HK.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-zh-TW.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('.left-nav a').click(function(ev) {
|
||||
window.location.hash = this.href.replace(/.+\/([^\/]+)\/index\.html/,'$1') + '|default';
|
||||
loadPage(this.href);
|
||||
$('.left-nav a.selected').removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
ev.preventDefault();
|
||||
});
|
||||
|
||||
if (window.location.hash) {
|
||||
if (window.location.hash.indexOf('|') === -1) {
|
||||
window.location.hash += '|default';
|
||||
}
|
||||
var path = window.location.href.replace(/(index\.html)?#/,'');
|
||||
path = path.replace('\|','/') + '.html';
|
||||
loadPage(path);
|
||||
}
|
||||
|
||||
function loadPage(path) {
|
||||
var section = path.replace(/\/[^\/]+\.html/,'');
|
||||
var header = section.replace(/.+\/([^\/]+)/,'$1').replace(/_/, ' ');
|
||||
|
||||
$('td.normal div.normal')
|
||||
.empty()
|
||||
.append('<h4 class="demo-subheader">Functional demo:</h4>')
|
||||
.append('<h3 class="demo-header">'+ header +'</h3>')
|
||||
.append('<div id="demo-config"></div>')
|
||||
.find('#demo-config')
|
||||
.append('<div id="demo-frame"></div><div id="demo-config-menu"></div><div id="demo-link"><a class="demoWindowLink" href="#"><span class="ui-icon ui-icon-newwin"></span>Open demo in a new window</a></div>')
|
||||
.find('#demo-config-menu')
|
||||
.load(section + '/index.html .demos-nav', function() {
|
||||
$('#demo-config-menu a').each(function() {
|
||||
this.setAttribute('href', section + '/' + this.getAttribute('href').replace(/.+\/([^\/]+)/,'$1'));
|
||||
$(this).attr('target', 'demo-frame');
|
||||
$(this).click(function() {
|
||||
|
||||
resetDemos();
|
||||
|
||||
$(this).parents('ul').find('li').removeClass('demo-config-on');
|
||||
$(this).parent().addClass('demo-config-on');
|
||||
$('#demo-notes').fadeOut();
|
||||
|
||||
//Set the hash to the actual page without ".html"
|
||||
window.location.hash = header + '|' + this.getAttribute('href').match((/\/([^\/\\]+)\.html/))[1];
|
||||
|
||||
loadDemo(this.getAttribute('href'));
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
if (window.location.hash) {
|
||||
var demo = window.location.hash.split('|')[1];
|
||||
$('#demo-config-menu a').each(function(){
|
||||
if (this.href.indexOf(demo + '.html') !== -1) {
|
||||
$(this).parents('ul').find('li').removeClass('demo-config-on');
|
||||
$(this).parent().addClass('demo-config-on');
|
||||
loadDemo(this.href);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateDemoNotes();
|
||||
})
|
||||
.end()
|
||||
.find('#demo-link a')
|
||||
.bind('click', function(ev){
|
||||
window.open(this.href);
|
||||
ev.preventDefault();
|
||||
})
|
||||
.end()
|
||||
.end()
|
||||
;
|
||||
|
||||
resetDemos();
|
||||
}
|
||||
|
||||
function loadDemo(path) {
|
||||
var directory = path.match(/([^\/]+)\/[^\/\.]+\.html$/)[1];
|
||||
$.get(path, function(data) {
|
||||
var source = data;
|
||||
data = data.replace(/<script.*>.*<\/script>/ig,""); // Remove script tags
|
||||
data = data.replace(/<\/?link.*>/ig,""); //Remove link tags
|
||||
data = data.replace(/<\/?html.*>/ig,""); //Remove html tag
|
||||
data = data.replace(/<\/?body.*>/ig,""); //Remove body tag
|
||||
data = data.replace(/<\/?head.*>/ig,""); //Remove head tag
|
||||
data = data.replace(/<\/?!doctype.*>/ig,""); //Remove doctype
|
||||
data = data.replace(/<title.*>.*<\/title>/ig,""); // Remove title tags
|
||||
data = data.replace(/((href|src)=["'])(?!(http|#))/ig, "$1" + directory + "/");
|
||||
|
||||
$('#demo-style').remove();
|
||||
$('#demo-frame').empty().html(data);
|
||||
$('#demo-frame style').clone().appendTo('head').attr('id','demo-style');
|
||||
$('#demo-link a').attr('href', path);
|
||||
updateDemoNotes();
|
||||
updateDemoSource(source);
|
||||
|
||||
if (/default.html$/.test(path)) {
|
||||
$.get("documentation/docs-" + path.match(/demos\/(.+)\//)[1] + ".html", function(html) {
|
||||
$("#demo-source").after(html);
|
||||
$("#widget-docs").tabs();
|
||||
$(".param-header").click(function() {
|
||||
$(this).parent().toggleClass("param-open").end().next().toggle();
|
||||
});
|
||||
$(".docs-list-header").each(function() {
|
||||
var header = $(this);
|
||||
var details = header.next().find(".param-details").hide();
|
||||
$("a:first", header).click(function() {
|
||||
details.show().parent().addClass("param-open");
|
||||
return false;
|
||||
});
|
||||
$("a:last", header).click(function() {
|
||||
details.hide().parent().removeClass("param-open");
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}, "html" );
|
||||
}
|
||||
}, "html" );
|
||||
}
|
||||
|
||||
function updateDemoNotes() {
|
||||
var notes = $('#demo-frame .demo-description');
|
||||
if ($('#demo-notes').length == 0) {
|
||||
$('<div id="demo-notes"></div>').insertAfter('#demo-config');
|
||||
}
|
||||
$('#demo-notes').hide().empty().html(notes.html());
|
||||
$('#demo-notes').show();
|
||||
notes.hide();
|
||||
}
|
||||
|
||||
function updateDemoSource(source) {
|
||||
if ($('#demo-source').length == 0) {
|
||||
$('<div id="demo-source"><a href="#" class="source-closed">View Source</a><div><pre><code></code></pre></div></div>').insertAfter('#demo-notes');
|
||||
$('#demo-source').find(">a").click(function() {
|
||||
$(this).toggleClass("source-closed").toggleClass("source-open").next().toggle();
|
||||
return false;
|
||||
}).end().find(">div").hide();
|
||||
}
|
||||
var cleanedSource = source
|
||||
.replace('themes/base/jquery.ui.all.css', 'theme/jquery.ui.all.css')
|
||||
.replace(/\s*\x3Clink.*demos\x2Ecss.*\x3E\s*/, '\r\n\t')
|
||||
.replace(/\x2E\x2E\x2F\x2E\x2E\x2F/g, '');
|
||||
|
||||
$('#demo-source code').empty().text(cleanedSource);
|
||||
}
|
||||
|
||||
function resetDemos() {
|
||||
$.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional['']));
|
||||
$(".ui-dialog-content").remove();
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table class="layout-grid">
|
||||
<tr>
|
||||
<td class="left-nav">
|
||||
<dl class="demos-nav">
|
||||
<dt>Interactions</dt>
|
||||
<dd><a href="draggable/index.html">Draggable</a></dd>
|
||||
<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>
|
||||
<dt>Widgets</dt>
|
||||
<dd><a href="accordion/index.html">Accordion</a></dd>
|
||||
<dd><a href="autocomplete/index.html">Autocomplete</a></dd>
|
||||
<dd><a href="button/index.html">Button</a></dd>
|
||||
<dd><a href="datepicker/index.html">Datepicker</a></dd>
|
||||
<dd><a href="dialog/index.html">Dialog</a></dd>
|
||||
<dd><a href="menu/index.html">Menu</a></dd>
|
||||
<dd><a href="progressbar/index.html">Progressbar</a></dd>
|
||||
<dd><a href="slider/index.html">Slider</a></dd>
|
||||
<dd><a href="spinner/index.html">Spinner</a></dd>
|
||||
<dd><a href="tabs/index.html">Tabs</a></dd>
|
||||
<dd><a href="tooltip/index.html">Tooltip</a></dd>
|
||||
<dt>Effects</dt>
|
||||
<dd><a href="animate/index.html">Color Animation</a></dd>
|
||||
<dd><a href="toggleClass/index.html">Toggle Class</a></dd>
|
||||
<dd><a href="addClass/index.html">Add Class</a></dd>
|
||||
<dd><a href="removeClass/index.html">Remove Class</a></dd>
|
||||
<dd><a href="switchClass/index.html">Switch Class</a></dd>
|
||||
<dd><a href="effect/index.html">Effect</a></dd>
|
||||
<dd><a href="toggle/index.html">Toggle</a></dd>
|
||||
<dd><a href="hide/index.html">Hide</a></dd>
|
||||
<dd><a href="show/index.html">Show</a></dd>
|
||||
<dt>Utilities</dt>
|
||||
<dd><a href="position/index.html">Position</a></dd>
|
||||
<dd><a href="widget/index.html">Widget</a></dd>
|
||||
<dt>About jQuery UI</dt>
|
||||
<dd><a href="http://jqueryui.com/docs/Getting_Started">Getting Started</a></dd>
|
||||
<dd><a href="http://jqueryui.com/docs/Upgrade_Guide">Upgrade Guide</a></dd>
|
||||
<dd><a href="http://jqueryui.com/docs/Changelog">Changelog</a></dd>
|
||||
<dd><a href="http://jqueryui.com/docs/Roadmap">Roadmap</a></dd>
|
||||
<dd><a href="http://jqueryui.com/docs/Subversion">Subversion Access</a></dd>
|
||||
<dd><a href="http://jqueryui.com/docs/Developer_Guide">UI Developer Guidelines</a></dd>
|
||||
<dt>Theming</dt>
|
||||
<dd><a href="http://jqueryui.com/docs/Theming">Theming jQuery UI</a></dd>
|
||||
<dd><a href="http://jqueryui.com/docs/Theming/API">jQuery UI CSS Framework</a></dd>
|
||||
<dd><a href="http://jqueryui.com/docs/Theming/Themeroller">ThemeRoller application</a></dd>
|
||||
<dd><a href="http://jqueryui.com/docs/Theming/ThemeSwitcher">Theme Switcher Widget</a></dd>
|
||||
<ul>
|
||||
<li><a href="accordion/">accordion</a></li>
|
||||
<li><a href="addClass/">addClass</a></li>
|
||||
<li><a href="animate/">animate</a></li>
|
||||
<li><a href="autocomplete/">autocomplete</a></li>
|
||||
<li><a href="button/">button</a></li>
|
||||
<li><a href="datepicker/">datepicker</a></li>
|
||||
<li><a href="dialog/">dialog</a></li>
|
||||
<li><a href="draggable/">draggable</a></li>
|
||||
<li><a href="droppable/">droppable</a></li>
|
||||
<li><a href="effect/">effect</a></li>
|
||||
<li><a href="hide/">hide</a></li>
|
||||
<li><a href="menu/">menu</a></li>
|
||||
<li><a href="position/">position</a></li>
|
||||
<li><a href="progressbar/">progressbar</a></li>
|
||||
<li><a href="removeClass/">removeClass</a></li>
|
||||
<li><a href="resizable/">resizable</a></li>
|
||||
<li><a href="selectable/">selectable</a></li>
|
||||
<li><a href="show/">show</a></li>
|
||||
<li><a href="slider/">slider</a></li>
|
||||
<li><a href="sortable/">sortable</a></li>
|
||||
<li><a href="spinner/">spinner</a></li>
|
||||
<li><a href="switchClass/">switchClass</a></li>
|
||||
<li><a href="tabs/">tabs</a></li>
|
||||
<li><a href="toggle/">toggle</a></li>
|
||||
<li><a href="toggleClass/">toggleClass</a></li>
|
||||
<li><a href="tooltip/">tooltip</a></li>
|
||||
<li><a href="widget/">widget</a></li>
|
||||
</ul>
|
||||
|
||||
</dl>
|
||||
</td>
|
||||
<td class="normal">
|
||||
|
||||
<div class="normal">
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -26,8 +26,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<ul id="menu">
|
||||
<li><a href="#">Aberdeen</a></li>
|
||||
<li><a href="#">Ada</a></li>
|
||||
@ -82,11 +80,8 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@ -9,6 +9,17 @@
|
||||
<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
|
||||
@ -16,7 +27,7 @@
|
||||
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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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 @@ on the
|
||||
<code>.ui-progressbar-value</code>
|
||||
element, using css.
|
||||
</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -26,8 +26,6 @@
|
||||
</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">
|
||||
@ -35,13 +33,8 @@
|
||||
</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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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="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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -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>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user