aboutsummaryrefslogtreecommitdiffstats
path: root/demos/accordion
diff options
context:
space:
mode:
authorScott González <scott.gonzalez@gmail.com>2010-09-09 21:35:00 -0400
committerScott González <scott.gonzalez@gmail.com>2010-09-09 22:33:28 -0400
commitb79e92818fa027bbd3daec17d6417940e2b156ed (patch)
treea27caa10de418e37b7e3ca61b249182a7b17f1ae /demos/accordion
parent590e03cc328879f67b2350b76b50ec34d559739e (diff)
downloadjquery-ui-b79e92818fa027bbd3daec17d6417940e2b156ed.tar.gz
jquery-ui-b79e92818fa027bbd3daec17d6417940e2b156ed.zip
Accordion demos: Coding standards.
Diffstat (limited to 'demos/accordion')
-rw-r--r--demos/accordion/collapsible.html21
-rw-r--r--demos/accordion/custom-icons.html28
-rw-r--r--demos/accordion/default.html18
-rw-r--r--demos/accordion/fillspace.html33
-rw-r--r--demos/accordion/hoverintent.html63
-rw-r--r--demos/accordion/index.html32
-rw-r--r--demos/accordion/mouseover.html20
-rw-r--r--demos/accordion/no-auto-height.html21
-rw-r--r--demos/accordion/sortable.html46
9 files changed, 136 insertions, 146 deletions
diff --git a/demos/accordion/collapsible.html b/demos/accordion/collapsible.html
index 6618baff2..4adc144d1 100644
--- a/demos/accordion/collapsible.html
+++ b/demos/accordion/collapsible.html
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
+ <meta charset="utf-8">
<title>jQuery UI Accordion - Collapse content</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.2.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.accordion.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
$(function() {
- $("#accordion").accordion({
+ $( "#accordion" ).accordion({
collapsible: true
});
});
@@ -50,10 +50,7 @@
<div class="demo-description">
-
<p>By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the <code>collapsible</code> option to true. Click on the currently open section to collapse its content pane.</p>
-
-
</div><!-- End demo-description -->
</body>
diff --git a/demos/accordion/custom-icons.html b/demos/accordion/custom-icons.html
index c81fb3120..6ad35ddbb 100644
--- a/demos/accordion/custom-icons.html
+++ b/demos/accordion/custom-icons.html
@@ -1,28 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
+ <meta charset="utf-8">
<title>jQuery UI Accordion - Customize icons</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.2.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.accordion.js"></script>
+ <script src="../../ui/jquery.ui.button.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
$(function() {
var icons = {
header: "ui-icon-circle-arrow-e",
headerSelected: "ui-icon-circle-arrow-s"
};
- $("#accordion").accordion({
+ $( "#accordion" ).accordion({
icons: icons
});
- $("#toggle").button().toggle(function() {
- $("#accordion").accordion("option", "icons", false);
+ $( "#toggle" ).button().toggle(function() {
+ $( "#accordion" ).accordion( "option", "icons", false );
}, function() {
- $("#accordion").accordion("option", "icons", icons);
+ $( "#accordion" ).accordion( "option", "icons", icons );
});
});
</script>
@@ -62,9 +62,7 @@
<div class="demo-description">
-
<p>Customize the header icons with the <code>icons</code> option, which accepts classes for the header's default and selected (open) state. Use any class from the UI CSS framework, or create custom classes with background images.</p>
-
</div><!-- End demo-description -->
</body>
diff --git a/demos/accordion/default.html b/demos/accordion/default.html
index 2eb93dd7a..87e430b71 100644
--- a/demos/accordion/default.html
+++ b/demos/accordion/default.html
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
+ <meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.2.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.accordion.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
$(function() {
- $("#accordion").accordion();
+ $( "#accordion" ).accordion();
});
</script>
</head>
diff --git a/demos/accordion/fillspace.html b/demos/accordion/fillspace.html
index 77507821c..e6c0ffb3e 100644
--- a/demos/accordion/fillspace.html
+++ b/demos/accordion/fillspace.html
@@ -1,28 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
+ <meta charset="utf-8"">
<title>jQuery UI Accordion - Fill space</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.2.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.mouse.js"></script>
+ <script src="../../ui/jquery.ui.resizable.js"></script>
+ <script src="../../ui/jquery.ui.accordion.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
$(function() {
- $("#accordion").accordion({
+ $( "#accordion" ).accordion({
fillSpace: true
});
});
$(function() {
- $("#accordionResizer").resizable({
+ $( "#accordionResizer" ).resizable({
+ minHeight: 140,
resize: function() {
- $("#accordion").accordion("resize");
- },
- minHeight: 140
+ $( "#accordion" ).accordion( "resize" );
+ }
});
});
</script>
@@ -69,11 +69,8 @@
<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 boolean <code>fillSpace</code> option to true, and the script will automatically set the dimensions of the accordion to the height of its parent container. The accordion will also resize with its container if the container is <code>resizable</code>.</p>
-
</div><!-- End demo-description -->
-
</body>
</html>
diff --git a/demos/accordion/hoverintent.html b/demos/accordion/hoverintent.html
index e0f2d742f..f74147e3f 100644
--- a/demos/accordion/hoverintent.html
+++ b/demos/accordion/hoverintent.html
@@ -1,66 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
+ <meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
-
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.2.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.accordion.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $("#accordion").accordion({
+ event: "click hoverintent"
+ });
+ });
+
var cfg = ($.hoverintent = {
sensitivity: 7,
interval: 100
});
-
+
$.event.special.hoverintent = {
setup: function() {
- $(this).bind("mouseover", jQuery.event.special.hoverintent.handler);
+ $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
},
teardown: function() {
- $(this).unbind("mouseover", jQuery.event.special.hoverintent.handler);
+ $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
},
- handler: function(event) {
+ handler: function( event ) {
event.type = "hoverintent";
var self = this,
args = arguments,
- target = $(event.target),
+ target = $( event.target ),
cX, cY, pX, pY;
-
- function track(event) {
+
+ function track( event ) {
cX = event.pageX;
cY = event.pageY;
};
pX = event.pageX;
pY = event.pageY;
function clear() {
- target.unbind("mousemove", track).unbind("mouseout", arguments.callee);
- clearTimeout(timeout);
+ target
+ .unbind( "mousemove", track )
+ .unbind( "mouseout", arguments.callee );
+ clearTimeout( timeout );
}
function handler() {
- if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
+ if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
clear();
- jQuery.event.handle.apply(self, args);
+ jQuery.event.handle.apply( self, args );
} else {
- pX = cX; pY = cY;
- timeout = setTimeout(handler, cfg.interval);
+ pX = cX;
+ pY = cY;
+ timeout = setTimeout( handler, cfg.interval );
}
}
- var timeout = setTimeout(handler, cfg.interval);
- target.mousemove(track).mouseout(clear);
+ var timeout = setTimeout( handler, cfg.interval );
+ target.mousemove( track ).mouseout( clear );
return true;
}
};
-
-
- $(function() {
- $("#accordion").accordion({
- event: "click hoverintent"
- });
- });
</script>
</head>
<body>
diff --git a/demos/accordion/index.html b/demos/accordion/index.html
index 70f0d9dee..d107dd881 100644
--- a/demos/accordion/index.html
+++ b/demos/accordion/index.html
@@ -1,23 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
+ <meta charset="utf-8">
<title>jQuery UI Accordion Demos</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link rel="stylesheet" href="../demos.css">
</head>
<body>
- <div class="demos-nav">
- <h4>Examples</h4>
- <ul>
- <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
- <li><a href="fillspace.html">Fill space</a></li>
- <li><a href="no-auto-height.html">No auto height</a></li>
- <li><a href="collapsible.html">Collapse content</a></li>
- <li><a href="mouseover.html">Open on mouseover</a></li>
- <li><a href="hoverintent.html">Open on hoverintent</a></li>
- <li><a href="custom-icons.html">Customize icons</a></li>
- <li><a href="sortable.html">Sortable</a></li>
- </ul>
- </div>
+
+<div class="demos-nav">
+ <h4>Examples</h4>
+ <ul>
+ <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
+ <li><a href="fillspace.html">Fill space</a></li>
+ <li><a href="no-auto-height.html">No auto height</a></li>
+ <li><a href="collapsible.html">Collapse content</a></li>
+ <li><a href="mouseover.html">Open on mouseover</a></li>
+ <li><a href="hoverintent.html">Open on hoverintent</a></li>
+ <li><a href="custom-icons.html">Customize icons</a></li>
+ <li><a href="sortable.html">Sortable</a></li>
+ </ul>
+</div>
+
</body>
</html>
diff --git a/demos/accordion/mouseover.html b/demos/accordion/mouseover.html
index 374fc7536..59db7f9e2 100644
--- a/demos/accordion/mouseover.html
+++ b/demos/accordion/mouseover.html
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
+ <meta charset="utf-8">
<title>jQuery UI Accordion - Open on mouseover</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.2.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.accordion.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
$(function() {
- $("#accordion").accordion({
+ $( "#accordion" ).accordion({
event: "mouseover"
});
});
@@ -50,9 +50,7 @@
<div class="demo-description">
-
<p>Toggle sections open/closed on mouseover with the <code>event</code> option. The default value for event is "click."</p>
-
</div><!-- End demo-description -->
</body>
diff --git a/demos/accordion/no-auto-height.html b/demos/accordion/no-auto-height.html
index 5cd89c61c..d55b5caac 100644
--- a/demos/accordion/no-auto-height.html
+++ b/demos/accordion/no-auto-height.html
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
+ <meta charset="utf-8"">
<title>jQuery UI Accordion - No Auto Height</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.2.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.accordion.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
$(function() {
- $("#accordion").accordion({
+ $( "#accordion" ).accordion({
autoHeight: false,
navigation: true
});
@@ -52,11 +52,8 @@
<div class="demo-description">
-
<p>Setting <code>autoHeight: false</code> allows to accordion panels to keep their native height.</p>
-
<p>In addition, the <code>navigation</code> option is enabled, opening the panel based on the current location, eg. no-auto-height.html#panel2 would open the second panel on page load. It also finds anchors within the content, so #othercontent will open the third section, as it contains a link with that href.</p>
-
</div><!-- End demo-description -->
</body>
diff --git a/demos/accordion/sortable.html b/demos/accordion/sortable.html
index 80487290f..c99c52c80 100644
--- a/demos/accordion/sortable.html
+++ b/demos/accordion/sortable.html
@@ -1,35 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
+ <meta charset="utf-8">
<title>jQuery UI Accordion - Sortable</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.2.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.mouse.js"></script>
+ <script src="../../ui/jquery.ui.sortable.js"></script>
+ <script src="../../ui/jquery.ui.accordion.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
$(function() {
var stop = false;
- $("#accordion h3").click(function(event) {
- if (stop) {
+ $( "#accordion h3" ).click(function( event ) {
+ if ( stop ) {
event.stopImmediatePropagation();
event.preventDefault();
stop = false;
}
});
- $("#accordion").accordion({
- header: "> div > h3"
- }).sortable({
- axis: "y",
- handle: "h3",
- stop: function(event, ui) {
- stop = true;
- }
- });
+ $( "#accordion" )
+ .accordion({
+ header: "> div > h3"
+ })
+ .sortable({
+ axis: "y",
+ handle: "h3",
+ stop: function() {
+ stop = true;
+ }
+ });
});
</script>
</head>
@@ -74,9 +76,7 @@
<div class="demo-description">
-
<p>Drag the header to re-order panels.</p>
-
</div><!-- End demo-description -->
</body>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-25 19:35:19 +0000