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">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -19,8 +19,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="accordion">
|
<div id="accordion">
|
||||||
<h3>Section 1</h3>
|
<h3>Section 1</h3>
|
||||||
<div>
|
<div>
|
||||||
@ -45,13 +43,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -31,8 +31,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="accordion">
|
<div id="accordion">
|
||||||
<h3>Section 1</h3>
|
<h3>Section 1</h3>
|
||||||
<div>
|
<div>
|
||||||
@ -59,13 +57,8 @@
|
|||||||
|
|
||||||
<button id="toggle">Toggle icons</button>
|
<button id="toggle">Toggle icons</button>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -17,8 +17,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="accordion">
|
<div id="accordion">
|
||||||
<h3>Section 1</h3>
|
<h3>Section 1</h3>
|
||||||
<div>
|
<div>
|
||||||
@ -68,8 +66,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>
|
<p>
|
||||||
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
|
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
|
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
|
||||||
usable without JavaScript.
|
usable without JavaScript.
|
||||||
</p>
|
</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -11,6 +11,13 @@
|
|||||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
<link rel="stylesheet" href="../demos.css">
|
||||||
|
<style>
|
||||||
|
#accordion-resizer {
|
||||||
|
padding: 10px;
|
||||||
|
width: 350px;
|
||||||
|
height: 220px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<script>
|
<script>
|
||||||
$(function() {
|
$(function() {
|
||||||
$( "#accordion" ).accordion({
|
$( "#accordion" ).accordion({
|
||||||
@ -18,7 +25,7 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
$(function() {
|
$(function() {
|
||||||
$( "#accordionResizer" ).resizable({
|
$( "#accordion-resizer" ).resizable({
|
||||||
minHeight: 140,
|
minHeight: 140,
|
||||||
minWidth: 200,
|
minWidth: 200,
|
||||||
resize: function() {
|
resize: function() {
|
||||||
@ -30,48 +37,36 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<h3 class="docs">Resize the outer container:</h3>
|
<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">
|
<div id="accordion-resizer" class="ui-widget-content">
|
||||||
<h3>Section 1</h3>
|
<div id="accordion">
|
||||||
<div>
|
<h3>Section 1</h3>
|
||||||
<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>
|
||||||
</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>
|
||||||
<h3>Section 2</h3>
|
</div>
|
||||||
<div>
|
<h3>Section 2</h3>
|
||||||
<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>
|
||||||
</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>
|
||||||
<h3>Section 3</h3>
|
</div>
|
||||||
<div>
|
<h3>Section 3</h3>
|
||||||
<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>
|
<div>
|
||||||
<ul>
|
<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>
|
||||||
<li>List item one</li>
|
<ul>
|
||||||
<li>List item two</li>
|
<li>List item one</li>
|
||||||
<li>List item three</li>
|
<li>List item two</li>
|
||||||
</ul>
|
<li>List item three</li>
|
||||||
</div>
|
</ul>
|
||||||
<h3>Section 4</h3>
|
</div>
|
||||||
<div>
|
<h3>Section 4</h3>
|
||||||
<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>
|
||||||
|
<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>
|
||||||
</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">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -70,8 +70,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="accordion">
|
<div id="accordion">
|
||||||
<h3>Section 1</h3>
|
<h3>Section 1</h3>
|
||||||
<div>
|
<div>
|
||||||
@ -121,8 +119,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>
|
<p>
|
||||||
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
|
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
|
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
|
||||||
usable without JavaScript.
|
usable without JavaScript.
|
||||||
</p>
|
</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,24 +1,20 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>jQuery UI Accordion Demos</title>
|
<title>jQuery UI Accordion Demos</title>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demos-nav">
|
<ul>
|
||||||
<h4>Examples</h4>
|
<li><a href="default.html">Default functionality</a></li>
|
||||||
<ul>
|
<li><a href="fillspace.html">Fill space</a></li>
|
||||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
<li><a href="no-auto-height.html">No auto height</a></li>
|
||||||
<li><a href="fillspace.html">Fill space</a></li>
|
<li><a href="collapsible.html">Collapse content</a></li>
|
||||||
<li><a href="no-auto-height.html">No auto height</a></li>
|
<li><a href="hoverintent.html">Open on hoverintent</a></li>
|
||||||
<li><a href="collapsible.html">Collapse content</a></li>
|
<li><a href="custom-icons.html">Customize icons</a></li>
|
||||||
<li><a href="hoverintent.html">Open on hoverintent</a></li>
|
<li><a href="sortable.html">Sortable</a></li>
|
||||||
<li><a href="custom-icons.html">Customize icons</a></li>
|
</ul>
|
||||||
<li><a href="sortable.html">Sortable</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -19,8 +19,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="accordion">
|
<div id="accordion">
|
||||||
<h3>Section 1</h3>
|
<h3>Section 1</h3>
|
||||||
<div>
|
<div>
|
||||||
@ -45,13 +43,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>Setting <code>heightStyle: "content"</code> allows the accordion panels to keep their native height.</p>
|
<p>Setting <code>heightStyle: "content"</code> allows the accordion panels to keep their native height.</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -35,8 +35,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="accordion">
|
<div id="accordion">
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<h3>Section 1</h3>
|
<h3>Section 1</h3>
|
||||||
@ -69,13 +67,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>Drag the header to re-order panels.</p>
|
<p>Drag the header to re-order panels.</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -30,8 +30,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div class="toggler">
|
<div class="toggler">
|
||||||
<div id="effect" class="ui-corner-all">
|
<div id="effect" class="ui-corner-all">
|
||||||
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
|
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>
|
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.</p>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,18 +1,14 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>jQuery UI Effects Demos</title>
|
<title>jQuery UI Effects Demos</title>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demos-nav">
|
<ul>
|
||||||
<h4>Examples</h4>
|
<li><a href="default.html">Default functionality</a></li>
|
||||||
<ul>
|
</ul>
|
||||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -37,8 +37,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div class="toggler">
|
<div class="toggler">
|
||||||
<div id="effect" class="ui-widget-content ui-corner-all">
|
<div id="effect" class="ui-widget-content ui-corner-all">
|
||||||
<h3 class="ui-widget-header ui-corner-all">Animate</h3>
|
<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>
|
<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>Click the button above to preview the effect.</p>
|
<p>Click the button above to preview the effect.</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,18 +1,14 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>jQuery UI Effects Demos</title>
|
<title>jQuery UI Effects Demos</title>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demos-nav">
|
<ul>
|
||||||
<h4>Examples</h4>
|
<li><a href="default.html">Default functionality</a></li>
|
||||||
<ul>
|
</ul>
|
||||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -29,7 +29,7 @@
|
|||||||
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
|
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
|
||||||
currentCategory = item.category;
|
currentCategory = item.category;
|
||||||
}
|
}
|
||||||
that._renderItem( ul, item );
|
that._renderItemData( ul, item );
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -57,16 +57,11 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
<label for="search">Search: </label>
|
||||||
<label for="search">Search: </label>
|
<input id="search">
|
||||||
<input id="search">
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>A categorized search result. Try typing "a" or "n".</p>
|
<p>A categorized search result. Try typing "a" or "n".</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -172,8 +172,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div class="ui-widget">
|
<div class="ui-widget">
|
||||||
<label>Your preferred programming language: </label>
|
<label>Your preferred programming language: </label>
|
||||||
<select id="combobox">
|
<select id="combobox">
|
||||||
@ -204,15 +202,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<button id="toggle">Show underlying select</button>
|
<button id="toggle">Show underlying select</button>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>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>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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -77,20 +77,15 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
<div id="project-label">Select a project (type "j" for a start):</div>
|
||||||
<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="">
|
||||||
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
|
<input id="project">
|
||||||
<input id="project">
|
<input type="hidden" id="project-id">
|
||||||
<input type="hidden" id="project-id">
|
<p id="project-description"></p>
|
||||||
<p id="project-description"></p>
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>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>
|
<p>Try typing "j" to get a list of projects or just press the down arrow.</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -44,22 +44,15 @@
|
|||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div class="ui-widget">
|
<div class="ui-widget">
|
||||||
<label for="tags">Tags: </label>
|
<label for="tags">Tags: </label>
|
||||||
<input id="tags">
|
<input id="tags">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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 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>
|
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -41,8 +41,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div class="ui-widget">
|
<div class="ui-widget">
|
||||||
<form>
|
<form>
|
||||||
<label for="developer">Developer: </label>
|
<label for="developer">Developer: </label>
|
||||||
@ -50,14 +48,9 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,27 +1,25 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>jQuery UI Autocomplete Demos</title>
|
<title>jQuery UI Autocomplete Demos</title>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="demos-nav">
|
|
||||||
<h4>Examples</h4>
|
<ul>
|
||||||
<ul>
|
<li><a href="default.html">Default functionality</a></li>
|
||||||
<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.html">Remote datasource</a></li>
|
<li><a href="remote-with-cache.html">Remote with caching</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="remote-jsonp.html">Remote JSONP datasource</a></li>
|
<li><a href="maxheight.html">Scrollable results</a></li>
|
||||||
<li><a href="maxheight.html">Scrollable results</a></li>
|
<li><a href="combobox.html">Combobox</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="custom-data.html">Custom data and display</a></li>
|
<li><a href="xml.html">XML data parsed once</a></li>
|
||||||
<li><a href="xml.html">XML data parsed once</a></li>
|
<li><a href="categories.html">Categories</a></li>
|
||||||
<li><a href="categories.html">Categories</a></li>
|
<li><a href="folding.html">Accent folding</a></li>
|
||||||
<li><a href="folding.html">Accent folding</a></li>
|
<li><a href="multiple.html">Multiple values</a></li>
|
||||||
<li><a href="multiple.html">Multiple values</a></li>
|
<li><a href="multiple-remote.html">Multiple, remote</a></li>
|
||||||
<li><a href="multiple-remote.html">Multiple, remote</a></li>
|
</ul>
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -59,20 +59,13 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div class="ui-widget">
|
<div class="ui-widget">
|
||||||
<label for="tags">Tags: </label>
|
<label for="tags">Tags: </label>
|
||||||
<input id="tags">
|
<input id="tags">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -67,21 +67,14 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div class="ui-widget">
|
<div class="ui-widget">
|
||||||
<label for="birds">Birds: </label>
|
<label for="birds">Birds: </label>
|
||||||
<input id="birds" size="50">
|
<input id="birds" size="50">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -80,21 +80,14 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div class="ui-widget">
|
<div class="ui-widget">
|
||||||
<label for="tags">Tag programming languages: </label>
|
<label for="tags">Tag programming languages: </label>
|
||||||
<input id="tags" size="50">
|
<input id="tags" size="50">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -63,8 +63,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div class="ui-widget">
|
<div class="ui-widget">
|
||||||
<label for="city">Your city: </label>
|
<label for="city">Your city: </label>
|
||||||
<input id="city">
|
<input id="city">
|
||||||
@ -76,14 +74,9 @@
|
|||||||
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -42,21 +42,14 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div class="ui-widget">
|
<div class="ui-widget">
|
||||||
<label for="birds">Birds: </label>
|
<label for="birds">Birds: </label>
|
||||||
<input id="birds">
|
<input id="birds">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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 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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -37,8 +37,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div class="ui-widget">
|
<div class="ui-widget">
|
||||||
<label for="birds">Birds: </label>
|
<label for="birds">Birds: </label>
|
||||||
<input id="birds">
|
<input id="birds">
|
||||||
@ -49,14 +47,9 @@
|
|||||||
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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 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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -48,8 +48,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div class="ui-widget">
|
<div class="ui-widget">
|
||||||
<label for="birds">London matches: </label>
|
<label for="birds">London matches: </label>
|
||||||
<input id="birds" />
|
<input id="birds" />
|
||||||
@ -60,14 +58,9 @@
|
|||||||
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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 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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -21,8 +21,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<input type="checkbox" id="check" /><label for="check">Toggle</label>
|
<input type="checkbox" id="check" /><label for="check">Toggle</label>
|
||||||
|
|
||||||
<div id="format">
|
<div id="format">
|
||||||
@ -31,14 +29,9 @@
|
|||||||
<input type="checkbox" id="check3" /><label for="check3">U</label>
|
<input type="checkbox" id="check3" /><label for="check3">U</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -11,28 +11,24 @@
|
|||||||
<link rel="stylesheet" href="../demos.css">
|
<link rel="stylesheet" href="../demos.css">
|
||||||
<script>
|
<script>
|
||||||
$(function() {
|
$(function() {
|
||||||
$( "input[type=submit], a, button", ".demo" ).button();
|
$( "input[type=submit], a, button" )
|
||||||
$( "a", ".demo" ).click(function() { return false; });
|
.button()
|
||||||
|
.click(function( event ) {
|
||||||
|
event.preventDefault();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<button>A button element</button>
|
<button>A button element</button>
|
||||||
|
|
||||||
<input type="submit" value="A submit button">
|
<input type="submit" value="A submit button">
|
||||||
|
|
||||||
<a href="#">An anchor</a>
|
<a href="#">An anchor</a>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -12,45 +12,38 @@
|
|||||||
<script>
|
<script>
|
||||||
$(function() {
|
$(function() {
|
||||||
$( ".demo button:first" ).button({
|
$( ".demo button:first" ).button({
|
||||||
icons: {
|
icons: {
|
||||||
primary: "ui-icon-locked"
|
primary: "ui-icon-locked"
|
||||||
},
|
},
|
||||||
text: false
|
text: false
|
||||||
}).next().button({
|
}).next().button({
|
||||||
icons: {
|
icons: {
|
||||||
primary: "ui-icon-locked"
|
primary: "ui-icon-locked"
|
||||||
}
|
}
|
||||||
}).next().button({
|
}).next().button({
|
||||||
icons: {
|
icons: {
|
||||||
primary: "ui-icon-gear",
|
primary: "ui-icon-gear",
|
||||||
secondary: "ui-icon-triangle-1-s"
|
secondary: "ui-icon-triangle-1-s"
|
||||||
}
|
}
|
||||||
}).next().button({
|
}).next().button({
|
||||||
icons: {
|
icons: {
|
||||||
primary: "ui-icon-gear",
|
primary: "ui-icon-gear",
|
||||||
secondary: "ui-icon-triangle-1-s"
|
secondary: "ui-icon-triangle-1-s"
|
||||||
},
|
},
|
||||||
text: false
|
text: false
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<button>Button with icon only</button>
|
<button>Button with icon only</button>
|
||||||
<button>Button with icon on the left</button>
|
<button>Button with icon on the left</button>
|
||||||
<button>Button with two icons</button>
|
<button>Button with two icons</button>
|
||||||
<button>Button with two icons and no text</button>
|
<button>Button with two icons and no text</button>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>Some buttons with various combinations of text and icons, here specified via metadata.</p>
|
<p>Some buttons with various combinations of text and icons, here specified via metadata.</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,23 +1,19 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>jQuery UI Button Demos</title>
|
<title>jQuery UI Button Demos</title>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demos-nav">
|
<ul>
|
||||||
<h4>Examples</h4>
|
<li><a href="default.html">Default functionality</a></li>
|
||||||
<ul>
|
<li><a href="radio.html">Radios</a></li>
|
||||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
<li><a href="checkbox.html">Checkboxes</a></li>
|
||||||
<li><a href="radio.html">Radios</a></li>
|
<li><a href="icons.html">Icons</a></li>
|
||||||
<li><a href="checkbox.html">Checkboxes</a></li>
|
<li><a href="toolbar.html">Toolbar</a></li>
|
||||||
<li><a href="icons.html">Icons</a></li>
|
<li><a href="splitbutton.html">Split Button</a></li>
|
||||||
<li><a href="toolbar.html">Toolbar</a></li>
|
</ul>
|
||||||
<li><a href="splitbutton.html">Split Button</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -17,8 +17,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
<div id="radio">
|
<div id="radio">
|
||||||
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
|
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
|
||||||
@ -27,13 +25,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>A set of three radio buttons transformed into a button set.</p>
|
<p>A set of three radio buttons transformed into a button set.</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -49,30 +49,21 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
<div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<button id="rerun">Run last action</button>
|
||||||
<button id="rerun">Run last action</button>
|
<button id="select">Select an 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>
|
|
||||||
</div>
|
</div>
|
||||||
|
<ul>
|
||||||
</div><!-- End demo -->
|
<li><a href="#">Open...</a></li>
|
||||||
|
<li><a href="#">Save</a></li>
|
||||||
|
<li><a href="#">Delete</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="demo-description">
|
<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
|
<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>
|
and no text. Both are grouped together in a set.</p>
|
||||||
|
</div>
|
||||||
</div><!-- End demo-description -->
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -86,8 +86,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<span id="toolbar" class="ui-widget-header ui-corner-all">
|
<span id="toolbar" class="ui-widget-header ui-corner-all">
|
||||||
<button id="beginning">go to beginning</button>
|
<button id="beginning">go to beginning</button>
|
||||||
<button id="rewind">rewind</button>
|
<button id="rewind">rewind</button>
|
||||||
@ -95,9 +93,9 @@
|
|||||||
<button id="stop">stop</button>
|
<button id="stop">stop</button>
|
||||||
<button id="forward">fast forward</button>
|
<button id="forward">fast forward</button>
|
||||||
<button id="end">go to end</button>
|
<button id="end">go to end</button>
|
||||||
|
|
||||||
<input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
|
<input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
|
||||||
|
|
||||||
<span id="repeat">
|
<span id="repeat">
|
||||||
<input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
|
<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>
|
<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
|
||||||
@ -105,16 +103,11 @@
|
|||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>
|
<p>
|
||||||
A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
|
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.
|
an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
|
||||||
</p>
|
</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -20,17 +20,10 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<p>Date: <input type="text" id="datepicker"> <input type="text" id="alternate" size="30"/></p>
|
<p>Date: <input type="text" id="datepicker"> <input type="text" id="alternate" size="30"/></p>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -27,8 +27,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<p>Date: <input type="text" id="datepicker" size="30"/></p>
|
<p>Date: <input type="text" id="datepicker" size="30"/></p>
|
||||||
|
|
||||||
<p>Animations:<br />
|
<p>Animations:<br />
|
||||||
@ -46,13 +44,8 @@
|
|||||||
</select>
|
</select>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -19,17 +19,10 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<p>Date: <input type="text" id="datepicker"></p>
|
<p>Date: <input type="text" id="datepicker"></p>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -20,8 +20,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<p>Date: <input type="text" id="datepicker" size="30"/></p>
|
<p>Date: <input type="text" id="datepicker" size="30"/></p>
|
||||||
|
|
||||||
<p>Format options:<br />
|
<p>Format options:<br />
|
||||||
@ -35,13 +33,8 @@
|
|||||||
</select>
|
</select>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -32,20 +32,13 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<label for="from">From</label>
|
<label for="from">From</label>
|
||||||
<input type="text" id="from" name="from"/>
|
<input type="text" id="from" name="from"/>
|
||||||
<label for="to">to</label>
|
<label for="to">to</label>
|
||||||
<input type="text" id="to" name="to"/>
|
<input type="text" id="to" name="to"/>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>Select the date range to search for.</p>
|
<p>Select the date range to search for.</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -17,17 +17,10 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<p>Date: <input type="text" id="datepicker"></p>
|
<p>Date: <input type="text" id="datepicker"></p>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -20,17 +20,10 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<p>Date: <input type="text" id="datepicker"></p>
|
<p>Date: <input type="text" id="datepicker"></p>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -21,17 +21,10 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<p>Date: <input type="text" id="datepicker"></p>
|
<p>Date: <input type="text" id="datepicker"></p>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,31 +1,27 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>jQuery UI Datepicker Demos</title>
|
<title>jQuery UI Datepicker Demos</title>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demos-nav">
|
<ul>
|
||||||
<h4>Examples</h4>
|
<li><a href="default.html">Default functionality</a></li>
|
||||||
<ul>
|
<li><a href="date-formats.html">Format date</a></li>
|
||||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
<li><a href="min-max.html">Restrict date range</a></li>
|
||||||
<li><a href="date-formats.html">Format date</a></li>
|
<li><a href="localization.html">Localize calendar</a></li>
|
||||||
<li><a href="min-max.html">Restrict date range</a></li>
|
<li><a href="alt-field.html">Populate alternate field</a></li>
|
||||||
<li><a href="localization.html">Localize calendar</a></li>
|
<li><a href="inline.html">Display inline</a></li>
|
||||||
<li><a href="alt-field.html">Populate alternate field</a></li>
|
<li><a href="buttonbar.html">Display button bar</a></li>
|
||||||
<li><a href="inline.html">Display inline</a></li>
|
<li><a href="dropdown-month-year.html">Display month & year menus</a></li>
|
||||||
<li><a href="buttonbar.html">Display button bar</a></li>
|
<li><a href="other-months.html">Dates in other months</a></li>
|
||||||
<li><a href="dropdown-month-year.html">Display month & year menus</a></li>
|
<li><a href="show-week.html">Show week of the year</a></li>
|
||||||
<li><a href="other-months.html">Dates in other months</a></li>
|
<li><a href="multiple-calendars.html">Display multiple months</a></li>
|
||||||
<li><a href="show-week.html">Show week of the year</a></li>
|
<li><a href="icon-trigger.html">Icon trigger</a></li>
|
||||||
<li><a href="multiple-calendars.html">Display multiple months</a></li>
|
<li><a href="animation.html">Animations</a></li>
|
||||||
<li><a href="icon-trigger.html">Icon trigger</a></li>
|
<li><a href="date-range.html">Date Range</a></li>
|
||||||
<li><a href="animation.html">Animations</a></li>
|
</ul>
|
||||||
<li><a href="date-range.html">Date Range</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -17,17 +17,10 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
Date: <div id="datepicker"></div>
|
Date: <div id="datepicker"></div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -90,8 +90,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<p>Date: <input type="text" id="datepicker"/>
|
<p>Date: <input type="text" id="datepicker"/>
|
||||||
<select id="locale">
|
<select id="locale">
|
||||||
<option value="af">Afrikaans</option>
|
<option value="af">Afrikaans</option>
|
||||||
@ -164,13 +162,8 @@
|
|||||||
<option value="cy-GB">Welsh/UK (Cymraeg)</option>
|
<option value="cy-GB">Welsh/UK (Cymraeg)</option>
|
||||||
</select></p>
|
</select></p>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -17,17 +17,10 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<p>Date: <input type="text" id="datepicker"></p>
|
<p>Date: <input type="text" id="datepicker"></p>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -20,17 +20,10 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<p>Date: <input type="text" id="datepicker"></p>
|
<p>Date: <input type="text" id="datepicker"></p>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -20,18 +20,11 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<p>Date: <input type="text" id="datepicker"></p>
|
<p>Date: <input type="text" id="datepicker"></p>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>The datepicker can show dates that come from other than the main month
|
<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>
|
being displayed. These other dates can also be made selectable.</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -20,20 +20,13 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<p>Date: <input type="text" id="datepicker"></p>
|
<p>Date: <input type="text" id="datepicker"></p>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>The datepicker can show the week of the year. The default calculation follows
|
<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
|
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
|
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>
|
year may be placed into weeks 'belonging' to another year.</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
324
demos/demos.css
324
demos/demos.css
@ -1,335 +1,19 @@
|
|||||||
body {
|
body {
|
||||||
font-size: 62.5%;
|
font-size: 62.5%;
|
||||||
|
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Site
|
.demo-description {
|
||||||
-------------------------------- */
|
|
||||||
|
|
||||||
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 {
|
|
||||||
clear: both;
|
clear: both;
|
||||||
padding: 20px 0 0;
|
padding: 12px;
|
||||||
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";
|
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
line-height: 1.4em;
|
line-height: 1.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-draggable, .ui-droppable {
|
.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">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -36,21 +36,14 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="dialog" title="Basic dialog">
|
<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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button id="opener">Open Dialog</button>
|
<button id="opener">Open Dialog</button>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -22,33 +22,12 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="dialog" title="Basic dialog">
|
<div id="dialog" title="Basic dialog">
|
||||||
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
|
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Sample page content to illustrate the layering of the dialog -->
|
|
||||||
<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">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,23 +1,19 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>jQuery UI Dialog Demos</title>
|
<title>jQuery UI Dialog Demos</title>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demos-nav">
|
<ul>
|
||||||
<h4>Examples</h4>
|
<li><a href="default.html">Default functionality</a></li>
|
||||||
<ul>
|
<li><a href="animated.html">Animated dialog</a></li>
|
||||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
<li><a href="modal.html">Modal dialog</a></li>
|
||||||
<li><a href="animated.html">Animated dialog</a></li>
|
<li><a href="modal-message.html">Modal message</a></li>
|
||||||
<li><a href="modal.html">Modal dialog</a></li>
|
<li><a href="modal-confirmation.html">Modal confirmation</a></li>
|
||||||
<li><a href="modal-message.html">Modal message</a></li>
|
<li><a href="modal-form.html">Modal form</a></li>
|
||||||
<li><a href="modal-confirmation.html">Modal confirmation</a></li>
|
</ul>
|
||||||
<li><a href="modal-form.html">Modal form</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -16,9 +16,6 @@
|
|||||||
<link rel="stylesheet" href="../demos.css">
|
<link rel="stylesheet" href="../demos.css">
|
||||||
<script>
|
<script>
|
||||||
$(function() {
|
$(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({
|
$( "#dialog-confirm" ).dialog({
|
||||||
resizable: false,
|
resizable: false,
|
||||||
height:140,
|
height:140,
|
||||||
@ -37,33 +34,14 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="dialog-confirm" title="Empty the recycle bin?">
|
<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>
|
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Sample page content to illustrate the layering of the dialog -->
|
<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="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">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -30,9 +30,6 @@
|
|||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
$(function() {
|
$(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" ),
|
var name = $( "#name" ),
|
||||||
email = $( "#email" ),
|
email = $( "#email" ),
|
||||||
password = $( "#password" ),
|
password = $( "#password" ),
|
||||||
@ -68,7 +65,7 @@
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$( "#dialog-form" ).dialog({
|
$( "#dialog-form" ).dialog({
|
||||||
autoOpen: false,
|
autoOpen: false,
|
||||||
height: 300,
|
height: 300,
|
||||||
@ -116,8 +113,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="dialog-form" title="Create new user">
|
<div id="dialog-form" title="Create new user">
|
||||||
<p class="validateTips">All form fields are required.</p>
|
<p class="validateTips">All form fields are required.</p>
|
||||||
|
|
||||||
@ -155,13 +150,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<button id="create-user">Create new user</button>
|
<button id="create-user">Create new user</button>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -17,9 +17,6 @@
|
|||||||
<link rel="stylesheet" href="../demos.css">
|
<link rel="stylesheet" href="../demos.css">
|
||||||
<script>
|
<script>
|
||||||
$(function() {
|
$(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({
|
$( "#dialog-message" ).dialog({
|
||||||
modal: true,
|
modal: true,
|
||||||
buttons: {
|
buttons: {
|
||||||
@ -33,8 +30,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="dialog-message" title="Download complete">
|
<div id="dialog-message" title="Download complete">
|
||||||
<p>
|
<p>
|
||||||
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
|
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
|
||||||
@ -45,27 +40,10 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Sample page content to illustrate the layering of the dialog -->
|
<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="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">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -16,9 +16,6 @@
|
|||||||
<link rel="stylesheet" href="../demos.css">
|
<link rel="stylesheet" href="../demos.css">
|
||||||
<script>
|
<script>
|
||||||
$(function() {
|
$(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({
|
$( "#dialog-modal" ).dialog({
|
||||||
height: 140,
|
height: 140,
|
||||||
modal: true
|
modal: true
|
||||||
@ -28,33 +25,14 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="dialog-modal" title="Basic modal dialog">
|
<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>
|
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Sample page content to illustrate the layering of the dialog -->
|
<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="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">
|
<div class="demo-description">
|
||||||
<p>A modal dialog prevents the user from interacting with the rest of the page until it is closed.</p>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -16,6 +16,7 @@
|
|||||||
#draggable { cursor: n-resize; }
|
#draggable { cursor: n-resize; }
|
||||||
#draggable2 { cursor: e-resize; }
|
#draggable2 { cursor: e-resize; }
|
||||||
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
|
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
|
||||||
|
h3 { clear: left; }
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
$(function() {
|
$(function() {
|
||||||
@ -23,17 +24,14 @@
|
|||||||
$( "#draggable2" ).draggable({ axis: "x" });
|
$( "#draggable2" ).draggable({ axis: "x" });
|
||||||
|
|
||||||
$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
|
$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
|
||||||
$( "#draggable4" ).draggable({ containment: "#demo-frame" });
|
|
||||||
$( "#draggable5" ).draggable({ containment: "parent" });
|
$( "#draggable5" ).draggable({ containment: "parent" });
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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">
|
<div id="draggable" class="draggable ui-widget-content">
|
||||||
<p>I can be dragged only vertically</p>
|
<p>I can be dragged only vertically</p>
|
||||||
</div>
|
</div>
|
||||||
@ -42,28 +40,19 @@
|
|||||||
<p>I can be dragged only horizontally</p>
|
<p>I can be dragged only horizontally</p>
|
||||||
</div>
|
</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="containment-wrapper">
|
||||||
<div id="draggable3" class="draggable ui-widget-content">
|
<div id="draggable3" class="draggable ui-widget-content">
|
||||||
<p>I'm contained within the box</p>
|
<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>
|
||||||
|
|
||||||
<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">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -23,8 +23,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="draggable" class="ui-widget-content">
|
<div id="draggable" class="ui-widget-content">
|
||||||
<p>I will always stick to the center (relative to the mouse)</p>
|
<p>I will always stick to the center (relative to the mouse)</p>
|
||||||
</div>
|
</div>
|
||||||
@ -37,13 +35,8 @@
|
|||||||
<p>My cursor position is only controlled for the 'bottom' value</p>
|
<p>My cursor position is only controlled for the 'bottom' value</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -21,19 +21,12 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="draggable" class="ui-widget-content">
|
<div id="draggable" class="ui-widget-content">
|
||||||
<p>Drag me around</p>
|
<p>Drag me around</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -23,8 +23,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="draggable" class="ui-widget-content">
|
<div id="draggable" class="ui-widget-content">
|
||||||
<p>Only if you drag me by 20 pixels, the dragging will start</p>
|
<p>Only if you drag me by 20 pixels, the dragging will start</p>
|
||||||
</div>
|
</div>
|
||||||
@ -33,13 +31,8 @@
|
|||||||
<p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>
|
<p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -52,8 +52,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="draggable" class="ui-widget ui-widget-content">
|
<div id="draggable" class="ui-widget ui-widget-content">
|
||||||
|
|
||||||
<p>Drag me to trigger the chain of events.</p>
|
<p>Drag me to trigger the chain of events.</p>
|
||||||
@ -65,13 +63,8 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -24,8 +24,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="draggable" class="ui-widget-content">
|
<div id="draggable" class="ui-widget-content">
|
||||||
<p class="ui-widget-header">I can be dragged only by this handle</p>
|
<p class="ui-widget-header">I can be dragged only by this handle</p>
|
||||||
</div>
|
</div>
|
||||||
@ -35,16 +33,9 @@
|
|||||||
<p class="ui-widget-header">…but you can't drag me by this handle.</p>
|
<p class="ui-widget-header">…but you can't drag me by this handle.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ADD CANCEL DEMO -->
|
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,28 +1,24 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>jQuery UI Draggable Demos</title>
|
<title>jQuery UI Draggable Demos</title>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demos-nav">
|
<ul>
|
||||||
<h4>Examples</h4>
|
<li><a href="default.html">Default functionality</a></li>
|
||||||
<ul>
|
<li><a href="events.html">Events</a></li>
|
||||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
<li><a href="constrain-movement.html">Constrain movement</a></li>
|
||||||
<li><a href="events.html">Events</a></li>
|
<li><a href="delay-start.html">Delay start</a></li>
|
||||||
<li><a href="constrain-movement.html">Constrain movement</a></li>
|
<li><a href="snap-to.html">Snap to element or grid</a></li>
|
||||||
<li><a href="delay-start.html">Delay start</a></li>
|
<li><a href="scroll.html">Auto-scroll</a></li>
|
||||||
<li><a href="snap-to.html">Snap to element or grid</a></li>
|
<li><a href="revert.html">Revert position</a></li>
|
||||||
<li><a href="scroll.html">Auto-scroll</a></li>
|
<li><a href="visual-feedback.html">Visual feedback</a></li>
|
||||||
<li><a href="revert.html">Revert position</a></li>
|
<li><a href="handle.html">Drag handle</a></li>
|
||||||
<li><a href="visual-feedback.html">Visual feedback</a></li>
|
<li><a href="cursor-style.html">Cursor style</a></li>
|
||||||
<li><a href="handle.html">Drag handle</a></li>
|
<li><a href="sortable.html">Draggable + Sortable</a></li>
|
||||||
<li><a href="cursor-style.html">Cursor style</a></li>
|
</ul>
|
||||||
<li><a href="sortable.html">Draggable + Sortable</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -22,8 +22,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="draggable" class="ui-widget-content">
|
<div id="draggable" class="ui-widget-content">
|
||||||
<p>Revert the original</p>
|
<p>Revert the original</p>
|
||||||
</div>
|
</div>
|
||||||
@ -32,13 +30,8 @@
|
|||||||
<p>Revert the helper</p>
|
<p>Revert the helper</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -23,8 +23,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="draggable" class="ui-widget-content">
|
<div id="draggable" class="ui-widget-content">
|
||||||
<p>Scroll set to true, default settings</p>
|
<p>Scroll set to true, default settings</p>
|
||||||
</div>
|
</div>
|
||||||
@ -39,13 +37,8 @@
|
|||||||
|
|
||||||
<div style='height: 5000px; width: 1px;'></div>
|
<div style='height: 5000px; width: 1px;'></div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -27,8 +27,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="snaptarget" class="ui-widget-header">
|
<div id="snaptarget" class="ui-widget-header">
|
||||||
<p>I'm a snap target</p>
|
<p>I'm a snap target</p>
|
||||||
</div>
|
</div>
|
||||||
@ -55,14 +53,9 @@
|
|||||||
<p>I snap to a 80 x 80 grid</p>
|
<p>I snap to a 80 x 80 grid</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -12,8 +12,8 @@
|
|||||||
<script src="../../ui/jquery.ui.sortable.js"></script>
|
<script src="../../ui/jquery.ui.sortable.js"></script>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
<link rel="stylesheet" href="../demos.css">
|
||||||
<style>
|
<style>
|
||||||
.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
|
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
|
||||||
.demo li { margin: 5px; padding: 5px; width: 150px; }
|
li { margin: 5px; padding: 5px; width: 150px; }
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
$(function() {
|
$(function() {
|
||||||
@ -31,8 +31,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li id="draggable" class="ui-state-highlight">Drag me down</li>
|
<li id="draggable" class="ui-state-highlight">Drag me down</li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -45,13 +43,8 @@
|
|||||||
<li class="ui-state-default">Item 5</li>
|
<li class="ui-state-default">Item 5</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>Draggables are built to interact seamlessly with <a href="#">sortables</a>.</p>
|
<p>Draggables are built to interact seamlessly with <a href="http://jqueryui.com/sortable">sortables</a>.</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -33,8 +33,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<h3 class="docs">With helpers:</h3>
|
<h3 class="docs">With helpers:</h3>
|
||||||
|
|
||||||
<div id="draggable" class="ui-widget-content">
|
<div id="draggable" class="ui-widget-content">
|
||||||
@ -64,14 +62,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -34,8 +34,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="draggable-nonvalid" class="ui-widget-content">
|
<div id="draggable-nonvalid" class="ui-widget-content">
|
||||||
<p>I'm draggable but can't be dropped</p>
|
<p>I'm draggable but can't be dropped</p>
|
||||||
</div>
|
</div>
|
||||||
@ -48,13 +46,8 @@
|
|||||||
<p>accept: '#draggable'</p>
|
<p>accept: '#draggable'</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -31,8 +31,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="draggable" class="ui-widget-content">
|
<div id="draggable" class="ui-widget-content">
|
||||||
<p>Drag me to my target</p>
|
<p>Drag me to my target</p>
|
||||||
</div>
|
</div>
|
||||||
@ -41,13 +39,8 @@
|
|||||||
<p>Drop here</p>
|
<p>Drop here</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
|
<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,24 +1,20 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>jQuery UI Droppable Demos</title>
|
<title>jQuery UI Droppable Demos</title>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demos-nav">
|
<ul>
|
||||||
<h4>Examples</h4>
|
<li><a href="default.html">Default functionality</a></li>
|
||||||
<ul>
|
<li><a href="accepted-elements.html">Accepted elements</a></li>
|
||||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
<li><a href="propagation.html">Prevent propagation</a></li>
|
||||||
<li><a href="accepted-elements.html">Accepted elements</a></li>
|
<li><a href="visual-feedback.html">Visual feedback</a></li>
|
||||||
<li><a href="propagation.html">Prevent propagation</a></li>
|
<li><a href="revert.html">Revert draggable position</a></li>
|
||||||
<li><a href="visual-feedback.html">Visual feedback</a></li>
|
<li><a href="shopping-cart.html">Shopping Cart</a></li>
|
||||||
<li><a href="revert.html">Revert draggable position</a></li>
|
<li><a href="photo-manager.html">Simple photo manager</a></li>
|
||||||
<li><a href="shopping-cart.html">Shopping Cart</a></li>
|
</ul>
|
||||||
<li><a href="photo-manager.html">Simple photo manager</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -38,7 +38,7 @@
|
|||||||
$( "li", $gallery ).draggable({
|
$( "li", $gallery ).draggable({
|
||||||
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
|
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
|
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",
|
helper: "clone",
|
||||||
cursor: "move"
|
cursor: "move"
|
||||||
});
|
});
|
||||||
@ -138,7 +138,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<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">
|
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
|
||||||
<li class="ui-widget-content ui-corner-tr">
|
<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>
|
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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 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 "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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -48,8 +48,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="draggable" class="ui-widget-content">
|
<div id="draggable" class="ui-widget-content">
|
||||||
<p>Drag me to my target</p>
|
<p>Drag me to my target</p>
|
||||||
</div>
|
</div>
|
||||||
@ -68,13 +66,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -35,8 +35,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="draggable" class="ui-widget-content">
|
<div id="draggable" class="ui-widget-content">
|
||||||
<p>I revert when I'm dropped</p>
|
<p>I revert when I'm dropped</p>
|
||||||
</div>
|
</div>
|
||||||
@ -49,13 +47,8 @@
|
|||||||
<p>Drop me here</p>
|
<p>Drop me here</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -48,8 +48,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="products">
|
<div id="products">
|
||||||
<h1 class="ui-widget-header">Products</h1>
|
<h1 class="ui-widget-header">Products</h1>
|
||||||
<div id="catalog">
|
<div id="catalog">
|
||||||
@ -89,13 +87,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -14,6 +14,7 @@
|
|||||||
<style>
|
<style>
|
||||||
#draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
#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; }
|
#droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
|
||||||
|
h3 { clear: left; }
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
$(function() {
|
$(function() {
|
||||||
@ -44,10 +45,8 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
<h3>Feedback on hover:</h3>
|
||||||
|
|
||||||
<h3 class="docs">Feedback on hover:</h3>
|
|
||||||
|
|
||||||
<div id="draggable" class="ui-widget-content">
|
<div id="draggable" class="ui-widget-content">
|
||||||
<p>Drag me to my target</p>
|
<p>Drag me to my target</p>
|
||||||
</div>
|
</div>
|
||||||
@ -56,7 +55,7 @@
|
|||||||
<p>Drop here</p>
|
<p>Drop here</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3 class="docs">Feedback on activating draggable:</h3>
|
<h3>Feedback on activating draggable:</h3>
|
||||||
|
|
||||||
<div id="draggable2" class="ui-widget-content">
|
<div id="draggable2" class="ui-widget-content">
|
||||||
<p>Drag me to my target</p>
|
<p>Drag me to my target</p>
|
||||||
@ -66,13 +65,8 @@
|
|||||||
<p>Drop here</p>
|
<p>Drop here</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -25,15 +25,15 @@
|
|||||||
#button { padding: .5em 1em; text-decoration: none; }
|
#button { padding: .5em 1em; text-decoration: none; }
|
||||||
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
|
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
|
||||||
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
|
#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>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
$(function() {
|
$(function() {
|
||||||
// run the currently selected effect
|
// run the currently selected effect
|
||||||
function runEffect() {
|
function runEffect() {
|
||||||
// get effect type from
|
// get effect type from
|
||||||
var selectedEffect = $( "#effectTypes" ).val();
|
var selectedEffect = $( "#effectTypes" ).val();
|
||||||
|
|
||||||
// most effect types need no options passed by default
|
// most effect types need no options passed by default
|
||||||
var options = {};
|
var options = {};
|
||||||
// some effects have required parameters
|
// some effects have required parameters
|
||||||
@ -66,8 +66,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div class="toggler">
|
<div class="toggler">
|
||||||
<div id="effect" class="ui-widget-content ui-corner-all">
|
<div id="effect" class="ui-widget-content ui-corner-all">
|
||||||
<h3 class="ui-widget-header ui-corner-all">Effect</h3>
|
<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>
|
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>Click the button above to show the effect.</p>
|
<p>Click the button above to show the effect.</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -93,17 +93,10 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="graphs"></div>
|
<div id="graphs"></div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,19 +1,15 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>jQuery UI Effects Demos</title>
|
<title>jQuery UI Effects Demos</title>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demos-nav">
|
<ul>
|
||||||
<h4>Examples</h4>
|
<li><a href="default.html">Effect showcase</a></li>
|
||||||
<ul>
|
<li><a href="easing.html">Easing showcase</a></li>
|
||||||
<li class="demo-config-on"><a href="default.html">Effect showcase</a></li>
|
</ul>
|
||||||
<li><a href="easing.html">Easing showcase</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -61,8 +61,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div class="toggler">
|
<div class="toggler">
|
||||||
<div id="effect" class="ui-widget-content ui-corner-all">
|
<div id="effect" class="ui-widget-content ui-corner-all">
|
||||||
<h3 class="ui-widget-header ui-corner-all">Hide</h3>
|
<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>
|
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>Click the button above to preview the effect.</p>
|
<p>Click the button above to preview the effect.</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,18 +1,14 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>jQuery UI Effects Demos</title>
|
<title>jQuery UI Effects Demos</title>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demos-nav">
|
<ul>
|
||||||
<h4>Examples</h4>
|
<li><a href="default.html">Default functionality</a></li>
|
||||||
<ul>
|
</ul>
|
||||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
357
demos/index.html
357
demos/index.html
@ -1,337 +1,40 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>jQuery UI Demos</title>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<table class="layout-grid">
|
<ul>
|
||||||
<tr>
|
<li><a href="accordion/">accordion</a></li>
|
||||||
<td class="left-nav">
|
<li><a href="addClass/">addClass</a></li>
|
||||||
<dl class="demos-nav">
|
<li><a href="animate/">animate</a></li>
|
||||||
<dt>Interactions</dt>
|
<li><a href="autocomplete/">autocomplete</a></li>
|
||||||
<dd><a href="draggable/index.html">Draggable</a></dd>
|
<li><a href="button/">button</a></li>
|
||||||
<dd><a href="droppable/index.html">Droppable</a></dd>
|
<li><a href="datepicker/">datepicker</a></li>
|
||||||
<dd><a href="resizable/index.html">Resizable</a></dd>
|
<li><a href="dialog/">dialog</a></li>
|
||||||
<dd><a href="selectable/index.html">Selectable</a></dd>
|
<li><a href="draggable/">draggable</a></li>
|
||||||
<dd><a href="sortable/index.html">Sortable</a></dd>
|
<li><a href="droppable/">droppable</a></li>
|
||||||
<dt>Widgets</dt>
|
<li><a href="effect/">effect</a></li>
|
||||||
<dd><a href="accordion/index.html">Accordion</a></dd>
|
<li><a href="hide/">hide</a></li>
|
||||||
<dd><a href="autocomplete/index.html">Autocomplete</a></dd>
|
<li><a href="menu/">menu</a></li>
|
||||||
<dd><a href="button/index.html">Button</a></dd>
|
<li><a href="position/">position</a></li>
|
||||||
<dd><a href="datepicker/index.html">Datepicker</a></dd>
|
<li><a href="progressbar/">progressbar</a></li>
|
||||||
<dd><a href="dialog/index.html">Dialog</a></dd>
|
<li><a href="removeClass/">removeClass</a></li>
|
||||||
<dd><a href="menu/index.html">Menu</a></dd>
|
<li><a href="resizable/">resizable</a></li>
|
||||||
<dd><a href="progressbar/index.html">Progressbar</a></dd>
|
<li><a href="selectable/">selectable</a></li>
|
||||||
<dd><a href="slider/index.html">Slider</a></dd>
|
<li><a href="show/">show</a></li>
|
||||||
<dd><a href="spinner/index.html">Spinner</a></dd>
|
<li><a href="slider/">slider</a></li>
|
||||||
<dd><a href="tabs/index.html">Tabs</a></dd>
|
<li><a href="sortable/">sortable</a></li>
|
||||||
<dd><a href="tooltip/index.html">Tooltip</a></dd>
|
<li><a href="spinner/">spinner</a></li>
|
||||||
<dt>Effects</dt>
|
<li><a href="switchClass/">switchClass</a></li>
|
||||||
<dd><a href="animate/index.html">Color Animation</a></dd>
|
<li><a href="tabs/">tabs</a></li>
|
||||||
<dd><a href="toggleClass/index.html">Toggle Class</a></dd>
|
<li><a href="toggle/">toggle</a></li>
|
||||||
<dd><a href="addClass/index.html">Add Class</a></dd>
|
<li><a href="toggleClass/">toggleClass</a></li>
|
||||||
<dd><a href="removeClass/index.html">Remove Class</a></dd>
|
<li><a href="tooltip/">tooltip</a></li>
|
||||||
<dd><a href="switchClass/index.html">Switch Class</a></dd>
|
<li><a href="widget/">widget</a></li>
|
||||||
<dd><a href="effect/index.html">Effect</a></dd>
|
</ul>
|
||||||
<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>
|
|
||||||
|
|
||||||
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -17,33 +17,26 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
<ul id="menu">
|
||||||
|
<li><a href="#Aberdeen">Aberdeen</a></li>
|
||||||
<ul id="menu">
|
<li><a href="#Ada">Ada</a></li>
|
||||||
<li><a href="#Aberdeen">Aberdeen</a></li>
|
<li><a href="#Adamsville">Adamsville</a></li>
|
||||||
<li><a href="#Ada">Ada</a></li>
|
<li><a href="#Addyston">Addyston</a></li>
|
||||||
<li><a href="#Adamsville">Adamsville</a></li>
|
<li><a href="#Adelphi">Adelphi</a></li>
|
||||||
<li><a href="#Addyston">Addyston</a></li>
|
<li><a href="#Adena">Adena</a></li>
|
||||||
<li><a href="#Adelphi">Adelphi</a></li>
|
<li><a href="#Adrian">Adrian</a></li>
|
||||||
<li><a href="#Adena">Adena</a></li>
|
<li><a href="#Akron">Akron</a></li>
|
||||||
<li><a href="#Adrian">Adrian</a></li>
|
<li><a href="#Albany">Albany</a></li>
|
||||||
<li><a href="#Akron">Akron</a></li>
|
<li><a href="#Alexandria">Alexandria</a></li>
|
||||||
<li><a href="#Albany">Albany</a></li>
|
<li><a href="#Alger">Alger</a></li>
|
||||||
<li><a href="#Alexandria">Alexandria</a></li>
|
<li><a href="#Alledonia">Alledonia</a></li>
|
||||||
<li><a href="#Alger">Alger</a></li>
|
<li><a href="#Alliance">Alliance</a></li>
|
||||||
<li><a href="#Alledonia">Alledonia</a></li>
|
<li><a href="#Alpha">Alpha</a></li>
|
||||||
<li><a href="#Alliance">Alliance</a></li>
|
<li><a href="#Alvada">Alvada</a></li>
|
||||||
<li><a href="#Alpha">Alpha</a></li>
|
</ul>
|
||||||
<li><a href="#Alvada">Alvada</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
||||||
</div><!-- End demo-description -->
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -3,16 +3,14 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>jQuery UI Menu Demos</title>
|
<title>jQuery UI Menu Demos</title>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="demos-nav">
|
|
||||||
<h4>Examples</h4>
|
<ul>
|
||||||
<ul>
|
<li><a href="default.html">Default functionality</a></li>
|
||||||
<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="topalignmenu.html">Top-aligned sub menus</a></li>
|
<li><a href="navigationmenu.html">Navigation menu</a></li>
|
||||||
<li><a href="navigationmenu.html">Navigation menu</a></li>
|
</ul>
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -29,53 +29,46 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
<ul id="menu">
|
||||||
|
<li><a href="?Aberdeen">Aberdeen</a></li>
|
||||||
<ul id="menu">
|
<li><a href="?Ada">Ada</a></li>
|
||||||
<li><a href="?Aberdeen">Aberdeen</a></li>
|
<li><a href="?Adamsville">Adamsville</a></li>
|
||||||
<li><a href="?Ada">Ada</a></li>
|
<li><a href="?Addyston">Addyston</a></li>
|
||||||
<li><a href="?Adamsville">Adamsville</a></li>
|
<li>
|
||||||
<li><a href="?Addyston">Addyston</a></li>
|
<a href="?Delphi">Delphi</a>
|
||||||
<li>
|
<ul>
|
||||||
<a href="?Delphi">Delphi</a>
|
<li><a href="?Ada">Ada</a></li>
|
||||||
<ul>
|
<li><a href="?Saarland">Saarland</a></li>
|
||||||
<li><a href="?Ada">Ada</a></li>
|
<li><a href="?Salzburg">Salzburg</a></li>
|
||||||
<li><a href="?Saarland">Saarland</a></li>
|
</ul>
|
||||||
<li><a href="?Salzburg">Salzburg</a></li>
|
</li>
|
||||||
</ul>
|
<li><a href="?Saarland">Saarland</a></li>
|
||||||
</li>
|
<li>
|
||||||
<li><a href="?Saarland">Saarland</a></li>
|
<a href="?Salzburg">Salzburg</a>
|
||||||
<li>
|
<ul>
|
||||||
<a href="?Salzburg">Salzburg</a>
|
<li>
|
||||||
<ul>
|
<a href="?Delphi">Delphi</a>
|
||||||
<li>
|
<ul>
|
||||||
<a href="?Delphi">Delphi</a>
|
<li><a href="?Ada">Ada</a></li>
|
||||||
<ul>
|
<li><a href="?Saarland">Saarland</a></li>
|
||||||
<li><a href="?Ada">Ada</a></li>
|
<li><a href="?Salzburg">Salzburg</a></li>
|
||||||
<li><a href="?Saarland">Saarland</a></li>
|
</ul>
|
||||||
<li><a href="?Salzburg">Salzburg</a></li>
|
</li>
|
||||||
</ul>
|
<li>
|
||||||
</li>
|
<a href="?Delphi">Delphi</a>
|
||||||
<li>
|
<ul>
|
||||||
<a href="?Delphi">Delphi</a>
|
<li><a href="?Ada">Ada</a></li>
|
||||||
<ul>
|
<li><a href="?Saarland">Saarland</a></li>
|
||||||
<li><a href="?Ada">Ada</a></li>
|
<li><a href="?Salzburg">Salzburg</a></li>
|
||||||
<li><a href="?Saarland">Saarland</a></li>
|
</ul>
|
||||||
<li><a href="?Salzburg">Salzburg</a></li>
|
</li>
|
||||||
</ul>
|
<li><a href="?Perch">Perch</a></li>
|
||||||
</li>
|
</ul>
|
||||||
<li><a href="?Perch">Perch</a></li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
||||||
</div><!-- End demo-description -->
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -26,8 +26,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<ul id="menu">
|
<ul id="menu">
|
||||||
<li><a href="#">Aberdeen</a></li>
|
<li><a href="#">Aberdeen</a></li>
|
||||||
<li><a href="#">Ada</a></li>
|
<li><a href="#">Ada</a></li>
|
||||||
@ -82,11 +80,8 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -9,6 +9,17 @@
|
|||||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||||
<script src="../../ui/jquery.ui.position.js"></script>
|
<script src="../../ui/jquery.ui.position.js"></script>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
<link rel="stylesheet" href="../demos.css">
|
||||||
|
<style>
|
||||||
|
#container {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<script>
|
<script>
|
||||||
$(function() {
|
$(function() {
|
||||||
// TODO refactor into a widget and get rid of these plugin methods
|
// TODO refactor into a widget and get rid of these plugin methods
|
||||||
@ -16,7 +27,7 @@
|
|||||||
return this.position({
|
return this.position({
|
||||||
my: "right middle",
|
my: "right middle",
|
||||||
at: "left+25 middle",
|
at: "left+25 middle",
|
||||||
of: window,
|
of: "#container",
|
||||||
collision: "none",
|
collision: "none",
|
||||||
using: using
|
using: using
|
||||||
});
|
});
|
||||||
@ -25,7 +36,7 @@
|
|||||||
return this.position({
|
return this.position({
|
||||||
my: "left middle",
|
my: "left middle",
|
||||||
at: "right-25 middle",
|
at: "right-25 middle",
|
||||||
of: window,
|
of: "#container",
|
||||||
collision: "none",
|
collision: "none",
|
||||||
using: using
|
using: using
|
||||||
});
|
});
|
||||||
@ -34,21 +45,11 @@
|
|||||||
return this.position({
|
return this.position({
|
||||||
my: "center middle",
|
my: "center middle",
|
||||||
at: "center middle",
|
at: "center middle",
|
||||||
of: window,
|
of: "#container",
|
||||||
using: using
|
using: using
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
$( "body" ).css({
|
|
||||||
overflow: "hidden"
|
|
||||||
})
|
|
||||||
$( ".demo" ).css({
|
|
||||||
position: "relative",
|
|
||||||
});
|
|
||||||
$( ".demo img" ).css({
|
|
||||||
position: "absolute",
|
|
||||||
});
|
|
||||||
|
|
||||||
$( "img:eq(0)" ).left();
|
$( "img:eq(0)" ).left();
|
||||||
$( "img:eq(1)" ).center();
|
$( "img:eq(1)" ).center();
|
||||||
$( "img:eq(2)" ).right();
|
$( "img:eq(2)" ).right();
|
||||||
@ -60,19 +61,19 @@
|
|||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
$( "img:eq(2)" ).center( animate );
|
$( "img:eq(2)" ).center( animate );
|
||||||
$( "img:eq(1)" ).left( animate )
|
$( "img:eq(1)" ).left( animate )
|
||||||
$( "img:eq(0)" ).right().appendTo( ".demo" );
|
$( "img:eq(0)" ).right().appendTo( "#container" );
|
||||||
}
|
}
|
||||||
function previous( event ) {
|
function previous( event ) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
$( "img:eq(0)" ).center( animate );
|
$( "img:eq(0)" ).center( animate );
|
||||||
$( "img:eq(1)" ).right( animate );
|
$( "img:eq(1)" ).right( animate );
|
||||||
$( "img:eq(2)" ).left().prependTo( ".demo" );
|
$( "img:eq(2)" ).left().prependTo( "#container" );
|
||||||
}
|
}
|
||||||
$( "#previous" ).click( previous );
|
$( "#previous" ).click( previous );
|
||||||
$( "#next" ).click( next );
|
$( "#next" ).click( next );
|
||||||
|
|
||||||
$( ".demo img" ).click(function( event ) {
|
$( "img" ).click(function( event ) {
|
||||||
$( ".demo img" ).index( this ) === 0 ? previous( event ) : next( event );
|
$( "img" ).index( this ) === 0 ? previous( event ) : next( event );
|
||||||
});
|
});
|
||||||
|
|
||||||
$( window ).resize(function() {
|
$( window ).resize(function() {
|
||||||
@ -85,25 +86,20 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
<div id="container">
|
||||||
|
<img src="images/earth.jpg" width="458" height="308" alt="earth">
|
||||||
<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/flight.jpg" width="512" height="307" alt="flight" />
|
<img src="images/rocket.jpg" width="300" height="353" alt="rocket">
|
||||||
<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 -->
|
|
||||||
|
|
||||||
|
|
||||||
|
<a id="previous" href="#">Previous</a>
|
||||||
|
<a id="next" href="#">Next</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="demo-description">
|
<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.
|
<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>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>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>
|
<br>Warning: Doesn't currently work inside the demo viewer; open in a new window instead!</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -67,8 +67,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="parent">
|
<div id="parent">
|
||||||
<p>
|
<p>
|
||||||
This is the position parent element.
|
This is the position parent element.
|
||||||
@ -136,14 +134,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
|
<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>
|
<br>Drag around the parent element to see collision detection in action.</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,19 +1,15 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>jQuery UI Position Demo</title>
|
<title>jQuery UI Position Demo</title>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demos-nav">
|
<ul>
|
||||||
<h4>Examples</h4>
|
<li><a href="default.html">Default functionality</a></li>
|
||||||
<ul>
|
<li><a href="cycler.html">Cycling images</a></li>
|
||||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
</ul>
|
||||||
<li><a href="cycler.html">Cycling images</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -22,14 +22,8 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="progressbar"></div>
|
<div id="progressbar"></div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>
|
<p>
|
||||||
This progressbar has an animated fill by setting the
|
This progressbar has an animated fill by setting the
|
||||||
@ -38,7 +32,6 @@ on the
|
|||||||
<code>.ui-progressbar-value</code>
|
<code>.ui-progressbar-value</code>
|
||||||
element, using css.
|
element, using css.
|
||||||
</p>
|
</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -19,17 +19,10 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="progressbar"></div>
|
<div id="progressbar"></div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>Default determinate progress bar.</p>
|
<p>Default determinate progress bar.</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,20 +1,16 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>jQuery UI Progressbar Demos</title>
|
<title>jQuery UI Progressbar Demos</title>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demos-nav">
|
<ul>
|
||||||
<h4>Examples</h4>
|
<li><a href="default.html">Default functionality</a></li>
|
||||||
<ul>
|
<li><a href="animated.html">Animated</a></li>
|
||||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
<li><a href="resize.html">Resizable progressbar</a></li>
|
||||||
<li><a href="animated.html">Animated</a></li>
|
</ul>
|
||||||
<li><a href="resize.html">Resizable progressbar</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -22,19 +22,12 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="progressbarWrapper" style="height:30px; " class="ui-widget-default">
|
<div id="progressbarWrapper" style="height:30px; " class="ui-widget-default">
|
||||||
<div id="progressbar" style="height:100%;"></div>
|
<div id="progressbar" style="height:100%;"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -30,8 +30,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div class="toggler">
|
<div class="toggler">
|
||||||
<div id="effect" class="newClass ui-corner-all">
|
<div id="effect" class="newClass ui-corner-all">
|
||||||
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
|
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>
|
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<div class="demo-description">
|
||||||
<p>Click the button above to preview the effect.</p>
|
<p>Click the button above to preview the effect.</p>
|
||||||
</div><!-- End demo-description -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,18 +1,14 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>jQuery UI Effects Demos</title>
|
<title>jQuery UI Effects Demos</title>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demos-nav">
|
<ul>
|
||||||
<h4>Examples</h4>
|
<li><a href="default.html">Default functionality</a></li>
|
||||||
<ul>
|
</ul>
|
||||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -25,19 +25,12 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="resizable" class="ui-widget-content">
|
<div id="resizable" class="ui-widget-content">
|
||||||
<h3 class="ui-widget-header">Animate</h3>
|
<h3 class="ui-widget-header">Animate</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -24,19 +24,12 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="resizable" class="ui-widget-content">
|
<div id="resizable" class="ui-widget-content">
|
||||||
<h3 class="ui-widget-header">Preserve aspect ratio</h3>
|
<h3 class="ui-widget-header">Preserve aspect ratio</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -26,8 +26,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="container" class="ui-widget-content">
|
<div id="container" class="ui-widget-content">
|
||||||
<h3 class="ui-widget-header">Containment</h3>
|
<h3 class="ui-widget-header">Containment</h3>
|
||||||
<div id="resizable" class="ui-state-active">
|
<div id="resizable" class="ui-state-active">
|
||||||
@ -35,13 +33,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -22,19 +22,12 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="resizable" class="ui-widget-content">
|
<div id="resizable" class="ui-widget-content">
|
||||||
<h3 class="ui-widget-header">Resizable</h3>
|
<h3 class="ui-widget-header">Resizable</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -19,7 +19,7 @@
|
|||||||
$( "#resizable" ).resizable({
|
$( "#resizable" ).resizable({
|
||||||
delay: 1000
|
delay: 1000
|
||||||
});
|
});
|
||||||
|
|
||||||
$( "#resizable2" ).resizable({
|
$( "#resizable2" ).resizable({
|
||||||
distance: 40
|
distance: 40
|
||||||
});
|
});
|
||||||
@ -28,8 +28,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<h3 class="docs">Time delay (ms):</h3>
|
<h3 class="docs">Time delay (ms):</h3>
|
||||||
<div id="resizable" class="ui-widget-content">
|
<div id="resizable" class="ui-widget-content">
|
||||||
<h3 class="ui-widget-header">Time</h3>
|
<h3 class="ui-widget-header">Time</h3>
|
||||||
@ -40,13 +38,8 @@
|
|||||||
<h3 class="ui-widget-header">Distance</h3>
|
<h3 class="ui-widget-header">Distance</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -25,19 +25,12 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="resizable" class="ui-widget-content">
|
<div id="resizable" class="ui-widget-content">
|
||||||
<h3 class="ui-widget-header">Helper</h3>
|
<h3 class="ui-widget-header">Helper</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="demo-description">
|
<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>
|
<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>
|
</body>
|
||||||
</html>
|
</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