Author: joern.zaefferer
Date: Fri Dec 12 05:20:34 2008
New Revision: 1110
Added:
trunk/tests/visual/accordion.html (contents, props changed)
Modified:
trunk/tests/accordion.html
trunk/tests/accordion.js
trunk/ui/ui.accordion.js
Log:
Accordion: Fixed #3646 - Update markup to new UI CSS Framework specs; Added
visual test and updated tests to markup changes
Modified: trunk/tests/accordion.html
==============================================================================
--- trunk/tests/accordion.html (original)
+++ trunk/tests/accordion.html Fri Dec 12 05:20:34 2008
@@ -19,38 +19,47 @@
<div id="main">
<div id="list1">
- <a>There is one obvious advantage:</a>
- <div>
-
- You've seen it coming!<br/>
- Buy now and get nothing for free!<br/>
- Well, at least no free beer. Perhaps a bear, if you can afford it.
-
- </div>
- <a>Now that you've got...</a>
- <div>
-
- your bear, you have to admit it!<br/>
- No, we aren't selling bears.
-
-
- We could talk about renting one.
-
- </div>
- <a>Rent one bear, ...</a>
- <div>
-
- get two for three beer.
-
-
- And now, for something completely different.
-
- </div>
+ <div>
+ <a>There is one obvious advantage:</a>
+ <div>
+
+ You've seen it coming!
+ <br/>
+ Buy now and get nothing for free!
+ <br/>
+ Well, at least no free beer. Perhaps a bear, if you can
afford it.
+
+ </div>
+ </div>
+ <div>
+ <a>Now that you've got...</a>
+ <div>
+
+ your bear, you have to admit it!
+ <br/>
+ No, we aren't selling bears.
+
+
+ We could talk about renting one.
+
+ </div>
+ </div>
+ <div>
+ <a>Rent one bear, ...</a>
+ <div>
+
+ get two for three beer.
+
+
+ And now, for something completely different.
+
+ </div>
+ </div>
</div>
<ul id="navigation">
<li>
- <a class="head" href="?p=1.1.1">Guitar</a>
+ <a href="?p=1.1.1">Guitar</a>
<ul>
<li><a href="?p=1.1.1.1">Electric</a></li>
<li><a href="?p=1.1.1.2">Acoustic</a></li>
@@ -60,7 +69,7 @@
</ul>
</li>
<li>
- <a class="head" href="?p=1.1.2"><span>Bass</span></a>
+ <a href="?p=1.1.2"><span>Bass</span></a>
<ul>
<li><a href="?p=1.1.2.1">Electric</a></li>
<li><a href="?p=1.1.2.2">Acoustic</a></li>
@@ -72,7 +81,7 @@
</ul>
</li>
<li>
- <a class="head" href="?p=1.1.3">Drums</a>
+ <a href="?p=1.1.3">Drums</a>
<ul>
<li><a href="?p=1.1.3.2">Acoustic Drums</a></li>
<li><a href="?p=1.1.3.3">Electronic Drums</a></li>
@@ -80,45 +89,6 @@
</ul>
</li>
</ul>
- <dl id="list2">
- <dt class="red">Red</dt>
- <dd>
- Fancy stuff about red thingies.
- </dd>
- <dt class="green selected">Green</dt>
- <dd>
- Green! Green! Green!
- </dd>
- <dt class="blue">Blue</dt>
- <dd>
- Cool kids are blue.
- </dd>
- </dl>
-
- <div id="list3">
- <div>
- <div class="title">Tennis</div>
- <div>
- One ball, two players. Lots of fun.
- </div>
- </div>
- <div>
- <div class="title">Soccer</div>
- <div>
- One ball, 22 players. Lots of fun.
- </div>
- </div>
- <div>
- <div class="title">Baseball</div>
- <div>
- Well, one ball, some guys running around, some guys hitting others
with a stick.<br/>
- Sounds like fun, doesn't it?
- </div>
- <div>
- Well, apart from the running part.
- </div>
- </div>
- </div>
</div>
Modified: trunk/tests/accordion.js
==============================================================================
--- trunk/tests/accordion.js (original)
+++ trunk/tests/accordion.js Fri Dec 12 05:20:34 2008
@@ -10,7 +10,7 @@
function state(accordion) {
var args = $.makeArray(arguments).slice(1);
$.each(args, function(i, n) {
- equals(accordion.find("div").eq(i).is(":visible"), n);
+ equals(accordion.find(".ui-accordion-content").eq(i).is(":visible"), n);
});
}
@@ -23,11 +23,11 @@
});
test("autoheight", function() {
- $('#navigation').accordion({ header: '.head', autoHeight: false });
+ $('#navigation').accordion({ autoHeight: false });
equals( 90, $('#navigation ul:first').height() );
equals( 126, $('#navigation ul:eq(1)').height() );
equals( 54, $('#navigation ul:last').height() );
- $('#navigation').accordion("destroy").accordion({ header: '.head',
autoHeight: true });
+ $('#navigation').accordion("destroy").accordion({ autoHeight: true });
equals( 126, $('#navigation ul:first').height() );
equals( 126, $('#navigation ul:eq(1)').height() );
equals( 126, $('#navigation ul:last').height() );
@@ -67,7 +67,7 @@
});
test("activate, string expression", function() {
- var ac = $('#list1').accordion({ active: ":last" });
+ var ac = $('#list1').accordion({ active: "a:last" });
state(ac, 0, 0, 1);
ac.accordion("activate", ":first");
state(ac, 1, 0, 0);
@@ -94,7 +94,7 @@
}
test("handle click on header-descendant", function() {
- var ac = $('#navigation').accordion({ header: '.head', autoHeight: false
})
+ var ac = $('#navigation').accordion({ autoHeight: false })
ac.triggerEvent("click", $('#navigation span:contains(Bass)')[0]);
state2(ac, 0, 1, 0);
});
Added: trunk/tests/visual/accordion.html
==============================================================================
--- (empty file)
+++ trunk/tests/visual/accordion.html Fri Dec 12 05:20:34 2008
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Accordion Visual Test</title>
+
+ <link rel="stylesheet" href="../../themes/base/ui.core.css"
type="text/css">
+ <link rel="stylesheet" href="../../themes/base/ui.theme.css"
type="text/css">
+ <link rel="stylesheet" href="../../themes/base/ui.accordion.css"
type="text/css">
+
+ <script type="text/javascript" src="../../jquery-1.2.6.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() {
+ function enable() {
+ $("#myAccordion").accordion({
+ header: "h3"
+ });
+ }
+ function disable() {
+ $("#myAccordion").accordion("destroy");
+ }
+ $("#toggle").toggle(enable, disable);
+ //enable();
+ })
+ </script>
+</head>
+<body style="font-size: 62.5%;">
+
+ <div id="myAccordion">
+ <div>
+ <h3><a href="#">Test 1</a></h3>
+ <div>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit
+ </div>
+ </div>
+ <div>
+ <h3><a href="#">Test 2</a></h3>
+ <div>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit
+ </div>
+ </div>
+ <div>
+ <h3><a href="#">Test 3</a></h3>
+ <div>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit
+ </div>
+ </div>
+ </div>
+
+ <button id="toggle">Toggle</button>
+
+</body>
+</html>
Modified: trunk/ui/ui.accordion.js
==============================================================================
--- trunk/ui/ui.accordion.js (original)
+++ trunk/ui/ui.accordion.js Fri Dec 12 05:20:34 2008
@@ -28,23 +28,22 @@
}
}
}
-
- // calculate active if not specified, using the first header
- options.headers = this.element.find(options.header);
- options.active = findActive(options.headers, options.active);
+
+ this.element.addClass("ui-accordion ui-widget ui-helper-reset");
+ var groups = this.element.children().addClass("ui-accordion-group");
+ var headers = options.headers =
groups.find("> :first-child").addClass("ui-accordion-header ui-helper-reset
ui-state-default ui-corner-all");
+ headers.next().addClass("ui-accordion-content ui-helper-reset
ui-widget-content ui-corner-bottom");
+
+ var active = options.active = findActive(headers,
options.active).toggleClass("ui-state-default").toggleClass("ui-state-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top");
+ active.parent().addClass("selected");
+ $("<span/>").addClass("ui-icon ui-icon-circle-plus").prependTo(headers);
+
active.find(".ui-icon").toggleClass("ui-icon-circle-plus").toggleClass("ui-icon-circle-minus");
// IE7-/Win - Extra vertical space in Lists fixed
if ($.browser.msie) {
this.element.find('a').css('zoom', '1');
}
- if (!this.element.hasClass("ui-accordion")) {
- this.element.addClass("ui-accordion");
- $('<span class="ui-accordion-left"/>').insertBefore(options.headers);
- $('<span class="ui-accordion-right"/>').appendTo(options.headers);
- options.headers.addClass("ui-accordion-header");
- }
-
var maxHeight;
if ( options.fillSpace ) {
maxHeight = this.element.parent().height();
@@ -84,8 +83,7 @@
} else {
options.active
.attr('aria-expanded','true')
- .attr("tabIndex", "0")
- .parent().andSelf().addClass(options.selectedClass);
+ .attr("tabIndex", "0");
}
// only need links in taborder for Safari
@@ -98,16 +96,15 @@
},
destroy: function() {
-
this.options.headers.parent().andSelf().removeClass(this.options.selectedClass);
- this.options.headers.prev(".ui-accordion-left").remove();
- this.options.headers.children(".ui-accordion-right").remove();
- this.options.headers.next().css("display", "");
- if ( this.options.fillSpace || this.options.autoHeight ) {
- this.options.headers.next().css("height", "");
- }
+ this.element.removeClass("ui-accordion ui-widget
ui-helper-reset").removeAttr("role").unbind(".accordion");
$.removeData(this.element[0], "accordion");
-
- this.element.removeClass("ui-accordion").unbind(".accordion");
+ var groups = this.element.children().removeClass("ui-accordion-group
selected");
+ var headers = this.options.headers.removeClass("ui-accordion-header
ui-helper-reset ui-state-default ui-corner-all ui-state-active
ui-corner-top")
+ .removeAttr("role").removeAttr("aria-expanded").removeAttr("tabindex");
+ headers.find("a").removeAttr("tabindex");
+ headers.next().removeClass("ui-accordion-content ui-helper-reset
ui-widget-content ui-corner-bottom")
+ .removeAttr("role").css({display: "", height: "", overflow: "",
marginTop:"", marginBottom:""});
+ headers.children(".ui-icon").remove();
},
_keydown: function(event) {
@@ -260,10 +257,9 @@
if (options.disabled) {
return false;
}
-
// called only when using activate(false) to close all parts
programmatically
if ( !event.target && !options.alwaysOpen ) {
- options.active.parent().andSelf().toggleClass(options.selectedClass);
+ options.active.parent().toggleClass(options.selectedClass);
var toHide = options.active.next(),
data = {
options: options,
@@ -295,9 +291,13 @@
}
// switch classes
- options.active.parent().andSelf().toggleClass(options.selectedClass);
+ options.active.parent().toggleClass(options.selectedClass);
+ options.active.removeClass("ui-state-active
ui-corner-top").addClass("ui-state-default ui-corner-all")
+
.find(".ui-icon").removeClass("ui-icon-circle-minus").addClass("ui-icon-circle-plus");
if ( !clickedActive ) {
- clicked.parent().andSelf().addClass(options.selectedClass);
+ clicked.parent().addClass(options.selectedClass);
+ clicked.removeClass("ui-state-default
ui-corner-all").addClass("ui-state-active ui-corner-top")
+
.find(".ui-icon").removeClass("ui-icon-circle-plus").addClass("ui-icon-circle-minus");
}
// find elements to show and hide