<!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
});
});
<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>
<!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>
<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>
<!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>
<!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>
<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>
<!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>
<!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>
<!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"
});
});
<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>
<!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
});
<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>
<!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>
<div class="demo-description">
-
<p>Drag the header to re-order panels.</p>
-
</div><!-- End demo-description -->
</body>
projects / jquery-ui.git / commitdiff