library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-12-07 06:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

accordion: added ul-visual-test; improved solution for fixing ul-accordions, no more potential scope issues

Browse Source
This commit is contained in:
Jörn Zaefferer 2009-01-30 20:42:03 +00:00
parent 1322a98df9
commit 5484aad005
4 changed files with 52 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
demos/accordion/noAutoHeight.html
View File

@ -30,9 +30,6 @@
</div> </div>
<h3><a href="#">Section 3</a></h3> <h3><a href="#">Section 3</a></h3>
<div> <div>
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
<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>
<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>
<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> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
<ul> <ul>
<li>List item</li> <li>List item</li>

45
tests/visual/accordion/ul.html Normal file
View File

@ -0,0 +1,45 @@
<!doctype html>
<html>
<head>
<title>Accordion Visual Test : UL</title>
<link rel="stylesheet" href="../../static/static.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.base.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" />
<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../../ui/ui.accordion.js"></script>
<script type="text/javascript">
$(function(){
$("#accordion").accordion()
});
</script>
</head>
<body>
<ul id="accordion">
<li>
<h2>
<a href="#">Accordion Header 1</a>
</h2>
<div>
Accordion Content 1
<ul>
<li>Some list item</li>
<li>Some list item</li>
</ul>
</div>
</li>
<li>
<h2>
<a href="#">Accordion Header 2</a>
</h2>
<div>Accordion Content 2</div>
</li>
<li>
<h2>
<a href="#">Accordion Header 3</a>
</h2>
<div>Accordion Content 2</div>
</li>
</ul>
</body>
</html>

3
themes/base/ui.accordion.css
View File

@ -1,8 +1,7 @@
/* Accordion /* Accordion
----------------------------------*/ ----------------------------------*/
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion li {display: inline;} .ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-content li {display: list-item;}
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } .ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; } .ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } .ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }

7
ui/ui.accordion.js
View File

@ -33,6 +33,11 @@ $.widget("ui.accordion", {
this.element.addClass("ui-accordion ui-widget ui-helper-reset"); this.element.addClass("ui-accordion ui-widget ui-helper-reset");
// in lack of child-selectors in CSS we need to mark top-LIs in a UL-accordion for some IE-fix
if (this.element[0].nodeName == "UL") {
this.element.children("li").addClass("ui-accordion-li-fix");
}
this.headers = this.element.find(o.header).addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all") this.headers = this.element.find(o.header).addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all")
.bind("mouseenter.accordion", function(){ $(this).addClass('ui-state-hover'); }) .bind("mouseenter.accordion", function(){ $(this).addClass('ui-state-hover'); })
.bind("mouseleave.accordion", function(){ $(this).removeClass('ui-state-hover'); }); .bind("mouseleave.accordion", function(){ $(this).removeClass('ui-state-hover'); });
@ -369,7 +374,7 @@ $.extend($.ui.accordion, {
clearStyle: false, clearStyle: false,
event: "click", event: "click",
fillSpace: false, fillSpace: false,
header: "> li :first,> :not(li):even", header: "> li > :first-child,> :not(li):even",
icons: { icons: {
header: "ui-icon-triangle-1-e", header: "ui-icon-triangle-1-e",
headerSelected: "ui-icon-triangle-1-s" headerSelected: "ui-icon-triangle-1-s"