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.
+
+
+
@@ -50,7 +59,7 @@
-
- Guitar
+
Guitar
-
- Bass
+
Bass
-
- Drums
+
Drums
- Acoustic Drums
- Electronic Drums
@@ -80,45 +89,6 @@
-
- - Red
- -
- Fancy stuff about red thingies.
-
- - Green
- -
- Green! Green! Green!
-
- - Blue
- -
- Cool kids are blue.
-
-
-
-
-
- Tennis
-
- One ball, two players. Lots of fun.
-
-
-
- Soccer
-
- One ball, 22 players. Lots of fun.
-
-
-
- Baseball
-
- Well, one ball, some guys running around, some guys hitting others with a stick.
- Sounds like fun, doesn't it?
-
-
- Well, apart from the running part.
-
-
-
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
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.
+
+
+
@@ -50,7 +59,7 @@
-
- Guitar
+
Guitar
-
- Bass
+
Bass
-
- Drums
+
Drums
- Acoustic Drums
- Electronic Drums
@@ -80,45 +89,6 @@
-
- - Red
- -
- Fancy stuff about red thingies.
-
- - Green
- -
- Green! Green! Green!
-
- - Blue
- -
- Cool kids are blue.
-
-
-
-
-
- Tennis
-
- One ball, two players. Lots of fun.
-
-
-
- Soccer
-
- One ball, 22 players. Lots of fun.
-
-
-
- Baseball
-
- Well, one ball, some guys running around, some guys hitting others with a stick.
- Sounds like fun, doesn't it?
-
-
- Well, apart from the running part.
-
-
-
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