Skip to main content

Search and Top Navigation

Ticket #3646: jquery-ui-trunk-accordion.patch
File jquery-ui-trunk-accordion.patch, 12.2 KB (added by jzaefferer, December 09, 2008 02:41PM UTC)
Index: tests/accordion.html
===================================================================
--- tests/accordion.html	(revision 1063)
+++ tests/accordion.html	(working copy)
@@ -19,33 +19,42 @@
 
- There is one obvious advantage: -
-

- You've seen it coming!
- Buy now and get nothing for free!
- Well, at least no free beer. Perhaps a bear, if you can afford it. -

-
- Now that you've got... -
-

- your bear, you have to admit it!
- No, we aren't selling bears. -

-

- We could talk about renting one. -

-
- Rent one bear, ... -
-

- get two for three beer. -

-

- And now, for something completely different. -

-
+
+

There is one obvious advantage:

+
+

+ You've seen it coming! +
+ Buy now and get nothing for free! +
+ Well, at least no free beer. Perhaps a bear, if you can afford it. +

+
+
+
+

Now that you've got...

+
+

+ your bear, you have to admit it! +
+ No, we aren't selling bears. +

+

+ We could talk about renting one. +

+
+
+
+

Rent one bear, ...

+
+

+ get two for three beer. +

+

+ And now, for something completely different. +

+
+
Index: tests/accordion.js =================================================================== --- tests/accordion.js (revision 1063) +++ tests/accordion.js (working copy) @@ -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); }); } @@ -19,15 +19,15 @@ } test("basics", function() { - state($('#list1').accordion(), 1, 0, 0); + state($('#list1').accordion({header:"h3"}), 1, 0, 0); }); test("autoheight", function() { - $('#navigation').accordion({ header: '.head', autoHeight: false }); + $('#navigation').accordion({ header: 'h3', 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({ header: 'h3', autoHeight: true }); equals( 126, $('#navigation ul:first').height() ); equals( 126, $('#navigation ul:eq(1)').height() ); equals( 126, $('#navigation ul:last').height() ); @@ -34,7 +34,7 @@ }); test("activate, numeric", function() { - var ac = $('#list1').accordion({ active: 1 }); + var ac = $('#list1').accordion({ header: "h3", active: 1 }); state(ac, 0, 1, 0); ac.accordion("activate", 2); state(ac, 0, 0, 1); @@ -49,7 +49,7 @@ }); test("activate, boolean and numeric, alwaysOpen:false", function() { - var ac = $('#list1').accordion({alwaysOpen: false}).accordion("activate", 2); + var ac = $('#list1').accordion({header: "h3", alwaysOpen: false}).accordion("activate", 2); state(ac, 0, 0, 1); ok("x", "----"); ac.accordion("activate", 0); @@ -60,7 +60,7 @@ }); test("activate, boolean, alwaysOpen:true", function() { - var ac = $('#list1').accordion().accordion("activate", 2); + var ac = $('#list1').accordion({header:"h3"}).accordion("activate", 2); state(ac, 0, 0, 1); ac.accordion("activate", -1); state(ac, 0, 0, 1); @@ -67,7 +67,7 @@ }); test("activate, string expression", function() { - var ac = $('#list1').accordion({ active: ":last" }); + var ac = $('#list1').accordion({ header: "h3", active: "h3:last" }); state(ac, 0, 0, 1); ac.accordion("activate", ":first"); state(ac, 1, 0, 0); @@ -78,11 +78,11 @@ }); test("activate, jQuery or DOM element", function() { - var ac = $('#list1').accordion({ active: $("#list1 a:last") }); + var ac = $('#list1').accordion({ header: "h3", active: $("#list1 h3:last") }); state(ac, 0, 0, 1); - ac.accordion("activate", $("#list1 a:first")); + ac.accordion("activate", $("#list1 h3:first")); state(ac, 1, 0, 0); - ac.accordion("activate", $("#list1 a")[1]); + ac.accordion("activate", $("#list1 h3")[1]); state(ac, 0, 1, 0); }); @@ -94,7 +94,7 @@ } test("handle click on header-descendant", function() { - var ac = $('#navigation').accordion({ header: '.head', autoHeight: false }) + var ac = $('#navigation').accordion({ header: 'h3', autoHeight: false }) ac.triggerEvent("click", $('#navigation span:contains(Bass)')[0]); state2(ac, 0, 1, 0); }); @@ -101,6 +101,7 @@ test("active:false", function() { $("#list1").accordion({ + header: 'h3', active: false, alwaysOpen: false }); @@ -110,6 +111,7 @@ test("accordionchange event, open closed and close again", function() { expect(8); $("#list1").accordion({ + header: 'h3', active: false, alwaysOpen: false }) @@ -131,7 +133,7 @@ test("accessibility", function () { expect(9); - var ac = $('#list1').accordion().accordion("activate", 1); + var ac = $('#list1').accordion({header: 'h3'}).accordion("activate", 1); var headers = $(".ui-accordion-header"); equals( headers.eq(1).attr("tabindex"), "0", "active header should have tabindex=0"); Index: tests/visual/accordion.html =================================================================== --- tests/visual/accordion.html (revision 0) +++ tests/visual/accordion.html (revision 0) @@ -0,0 +1,45 @@ + + + + jQuery UI Accordion Visual Test + + + + + + + + + + + + +
+
+

Test 1

+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit +
+
+
+

Test 2

+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit +
+
+
+

Test 3

+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit +
+
+
+ + + Index: ui/ui.accordion.js =================================================================== --- ui/ui.accordion.js (revision 1063) +++ ui/ui.accordion.js (working copy) @@ -28,10 +28,16 @@ } } } - - // 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"); + $("").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) { @@ -38,13 +44,6 @@ this.element.find('a').css('zoom', '1'); } - if (!this.element.hasClass("ui-accordion")) { - this.element.addClass("ui-accordion"); - $('').insertBefore(options.headers); - $('').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,6 +96,7 @@ }, destroy: function() { + // TODO update 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(); @@ -260,10 +259,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 +293,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

Download in other formats:

Original Format