Ticket #3646: jquery-ui-trunk-accordion.patch
File jquery-ui-trunk-accordion.patch, 12.2 KB (added by , 14 years ago) |
---|
-
tests/accordion.html
19 19 <div id="main"> 20 20 21 21 <div id="list1"> 22 <a>There is one obvious advantage:</a> 23 <div> 24 <p> 25 You've seen it coming!<br/> 26 Buy now and get nothing for free!<br/> 27 Well, at least no free beer. Perhaps a bear, if you can afford it. 28 </p> 29 </div> 30 <a>Now that you've got...</a> 31 <div> 32 <p> 33 your bear, you have to admit it!<br/> 34 No, we aren't selling bears. 35 </p> 36 <p> 37 We could talk about renting one. 38 </p> 39 </div> 40 <a>Rent one bear, ...</a> 41 <div> 42 <p> 43 get two for three beer. 44 </p> 45 <p> 46 And now, for something completely different. 47 </p> 48 </div> 22 <div> 23 <h3><a>There is one obvious advantage:</a></h3> 24 <div> 25 <p> 26 You've seen it coming! 27 <br/> 28 Buy now and get nothing for free! 29 <br/> 30 Well, at least no free beer. Perhaps a bear, if you can afford it. 31 </p> 32 </div> 33 </div> 34 <div> 35 <h3><a>Now that you've got...</a></h3> 36 <div> 37 <p> 38 your bear, you have to admit it! 39 <br/> 40 No, we aren't selling bears. 41 </p> 42 <p> 43 We could talk about renting one. 44 </p> 45 </div> 46 </div> 47 <div> 48 <h3><a>Rent one bear, ...</a></h3> 49 <div> 50 <p> 51 get two for three beer. 52 </p> 53 <p> 54 And now, for something completely different. 55 </p> 56 </div> 57 </div> 49 58 </div> 50 59 51 60 <ul id="navigation"> … … 50 59 51 60 <ul id="navigation"> 52 61 <li> 53 < a class="head" href="?p=1.1.1">Guitar</a>62 <h3><a href="?p=1.1.1">Guitar</a></h3> 54 63 <ul> 55 64 <li><a href="?p=1.1.1.1">Electric</a></li> 56 65 <li><a href="?p=1.1.1.2">Acoustic</a></li> … … 60 69 </ul> 61 70 </li> 62 71 <li> 63 < a class="head" href="?p=1.1.2"><span>Bass</span></a>72 <h3><a href="?p=1.1.2"><span>Bass</span></a></h3> 64 73 <ul> 65 74 <li><a href="?p=1.1.2.1">Electric</a></li> 66 75 <li><a href="?p=1.1.2.2">Acoustic</a></li> … … 72 81 </ul> 73 82 </li> 74 83 <li> 75 < a class="head" href="?p=1.1.3">Drums</a>84 <h3><a href="?p=1.1.3">Drums</a></h3> 76 85 <ul> 77 86 <li><a href="?p=1.1.3.2">Acoustic Drums</a></li> 78 87 <li><a href="?p=1.1.3.3">Electronic Drums</a></li> … … 80 89 </ul> 81 90 </li> 82 91 </ul> 83 <dl id="list2">84 <dt class="red">Red</dt>85 <dd>86 Fancy stuff about red thingies.87 </dd>88 <dt class="green selected">Green</dt>89 <dd>90 Green! Green! Green!91 </dd>92 <dt class="blue">Blue</dt>93 <dd>94 Cool kids are blue.95 </dd>96 </dl>97 98 <div id="list3">99 <div>100 <div class="title">Tennis</div>101 <div>102 One ball, two players. Lots of fun.103 </div>104 </div>105 <div>106 <div class="title">Soccer</div>107 <div>108 One ball, 22 players. Lots of fun.109 </div>110 </div>111 <div>112 <div class="title">Baseball</div>113 <div>114 Well, one ball, some guys running around, some guys hitting others with a stick.<br/>115 Sounds like fun, doesn't it?116 </div>117 <div>118 Well, apart from the running part.119 </div>120 </div>121 </div>122 92 123 93 </div> 124 94 -
tests/accordion.js
10 10 function state(accordion) { 11 11 var args = $.makeArray(arguments).slice(1); 12 12 $.each(args, function(i, n) { 13 equals(accordion.find(" div").eq(i).is(":visible"), n);13 equals(accordion.find(".ui-accordion-content").eq(i).is(":visible"), n); 14 14 }); 15 15 } 16 16 … … 19 19 } 20 20 21 21 test("basics", function() { 22 state($('#list1').accordion( ), 1, 0, 0);22 state($('#list1').accordion({header:"h3"}), 1, 0, 0); 23 23 }); 24 24 25 25 test("autoheight", function() { 26 $('#navigation').accordion({ header: ' .head', autoHeight: false });26 $('#navigation').accordion({ header: 'h3', autoHeight: false }); 27 27 equals( 90, $('#navigation ul:first').height() ); 28 28 equals( 126, $('#navigation ul:eq(1)').height() ); 29 29 equals( 54, $('#navigation ul:last').height() ); 30 $('#navigation').accordion("destroy").accordion({ header: ' .head', autoHeight: true });30 $('#navigation').accordion("destroy").accordion({ header: 'h3', autoHeight: true }); 31 31 equals( 126, $('#navigation ul:first').height() ); 32 32 equals( 126, $('#navigation ul:eq(1)').height() ); 33 33 equals( 126, $('#navigation ul:last').height() ); … … 34 34 }); 35 35 36 36 test("activate, numeric", function() { 37 var ac = $('#list1').accordion({ active: 1 });37 var ac = $('#list1').accordion({ header: "h3", active: 1 }); 38 38 state(ac, 0, 1, 0); 39 39 ac.accordion("activate", 2); 40 40 state(ac, 0, 0, 1); … … 49 49 }); 50 50 51 51 test("activate, boolean and numeric, alwaysOpen:false", function() { 52 var ac = $('#list1').accordion({ alwaysOpen: false}).accordion("activate", 2);52 var ac = $('#list1').accordion({header: "h3", alwaysOpen: false}).accordion("activate", 2); 53 53 state(ac, 0, 0, 1); 54 54 ok("x", "----"); 55 55 ac.accordion("activate", 0); … … 60 60 }); 61 61 62 62 test("activate, boolean, alwaysOpen:true", function() { 63 var ac = $('#list1').accordion( ).accordion("activate", 2);63 var ac = $('#list1').accordion({header:"h3"}).accordion("activate", 2); 64 64 state(ac, 0, 0, 1); 65 65 ac.accordion("activate", -1); 66 66 state(ac, 0, 0, 1); … … 67 67 }); 68 68 69 69 test("activate, string expression", function() { 70 var ac = $('#list1').accordion({ active: ":last" });70 var ac = $('#list1').accordion({ header: "h3", active: "h3:last" }); 71 71 state(ac, 0, 0, 1); 72 72 ac.accordion("activate", ":first"); 73 73 state(ac, 1, 0, 0); … … 78 78 }); 79 79 80 80 test("activate, jQuery or DOM element", function() { 81 var ac = $('#list1').accordion({ active: $("#list1 a:last") });81 var ac = $('#list1').accordion({ header: "h3", active: $("#list1 h3:last") }); 82 82 state(ac, 0, 0, 1); 83 ac.accordion("activate", $("#list1 a:first"));83 ac.accordion("activate", $("#list1 h3:first")); 84 84 state(ac, 1, 0, 0); 85 ac.accordion("activate", $("#list1 a")[1]);85 ac.accordion("activate", $("#list1 h3")[1]); 86 86 state(ac, 0, 1, 0); 87 87 }); 88 88 … … 94 94 } 95 95 96 96 test("handle click on header-descendant", function() { 97 var ac = $('#navigation').accordion({ header: ' .head', autoHeight: false })97 var ac = $('#navigation').accordion({ header: 'h3', autoHeight: false }) 98 98 ac.triggerEvent("click", $('#navigation span:contains(Bass)')[0]); 99 99 state2(ac, 0, 1, 0); 100 100 }); … … 101 101 102 102 test("active:false", function() { 103 103 $("#list1").accordion({ 104 header: 'h3', 104 105 active: false, 105 106 alwaysOpen: false 106 107 }); … … 110 111 test("accordionchange event, open closed and close again", function() { 111 112 expect(8); 112 113 $("#list1").accordion({ 114 header: 'h3', 113 115 active: false, 114 116 alwaysOpen: false 115 117 }) … … 131 133 132 134 test("accessibility", function () { 133 135 expect(9); 134 var ac = $('#list1').accordion( ).accordion("activate", 1);136 var ac = $('#list1').accordion({header: 'h3'}).accordion("activate", 1); 135 137 var headers = $(".ui-accordion-header"); 136 138 137 139 equals( headers.eq(1).attr("tabindex"), "0", "active header should have tabindex=0"); -
tests/visual/accordion.html
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <title>jQuery UI Accordion Visual Test</title> 5 6 <link rel="stylesheet" href="../../themes/base/ui.core.css" type="text/css"> 7 <link rel="stylesheet" href="../../themes/base/ui.accordion.css" type="text/css"> 8 9 <script type="text/javascript" src="../../jquery-1.2.6.js"></script> 10 <script type="text/javascript" src="../../ui/ui.core.js"></script> 11 <script type="text/javascript" src="../../ui/ui.accordion.js"></script> 12 13 <script type="text/javascript"> 14 $(function() { 15 $("#myAccordion").accordion({ 16 header: "h3" 17 }); 18 }) 19 </script> 20 </head> 21 <body style="font-size: 62.5%;"> 22 23 <div id="myAccordion"> 24 <div> 25 <h3><a href="#">Test 1</a></h3> 26 <div> 27 Lorem ipsum dolor sit amet, consectetur adipisicing elit 28 </div> 29 </div> 30 <div> 31 <h3><a href="#">Test 2</a></h3> 32 <div> 33 Lorem ipsum dolor sit amet, consectetur adipisicing elit 34 </div> 35 </div> 36 <div> 37 <h3><a href="#">Test 3</a></h3> 38 <div> 39 Lorem ipsum dolor sit amet, consectetur adipisicing elit 40 </div> 41 </div> 42 </div> 43 44 </body> 45 </html> -
ui/ui.accordion.js
28 28 } 29 29 } 30 30 } 31 32 // calculate active if not specified, using the first header 33 options.headers = this.element.find(options.header); 34 options.active = findActive(options.headers, options.active); 31 32 this.element.addClass("ui-accordion ui-widget ui-helper-reset"); 33 var groups = this.element.children().addClass("ui-accordion-group"); 34 var headers = options.headers = groups.find("> :first-child").addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"); 35 headers.next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"); 36 37 var active = options.active = findActive(headers, options.active).toggleClass("ui-state-default").toggleClass("ui-state-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top"); 38 active.parent().addClass("selected"); 39 $("<span/>").addClass("ui-icon ui-icon-circle-plus").prependTo(headers); 40 active.find(".ui-icon").toggleClass("ui-icon-circle-plus").toggleClass("ui-icon-circle-minus"); 35 41 36 42 // IE7-/Win - Extra vertical space in Lists fixed 37 43 if ($.browser.msie) { … … 38 44 this.element.find('a').css('zoom', '1'); 39 45 } 40 46 41 if (!this.element.hasClass("ui-accordion")) {42 this.element.addClass("ui-accordion");43 $('<span class="ui-accordion-left"/>').insertBefore(options.headers);44 $('<span class="ui-accordion-right"/>').appendTo(options.headers);45 options.headers.addClass("ui-accordion-header");46 }47 48 47 var maxHeight; 49 48 if ( options.fillSpace ) { 50 49 maxHeight = this.element.parent().height(); … … 84 83 } else { 85 84 options.active 86 85 .attr('aria-expanded','true') 87 .attr("tabIndex", "0") 88 .parent().andSelf().addClass(options.selectedClass); 86 .attr("tabIndex", "0"); 89 87 } 90 88 91 89 // only need links in taborder for Safari … … 98 96 }, 99 97 100 98 destroy: function() { 99 // TODO update 101 100 this.options.headers.parent().andSelf().removeClass(this.options.selectedClass); 102 101 this.options.headers.prev(".ui-accordion-left").remove(); 103 102 this.options.headers.children(".ui-accordion-right").remove(); … … 260 259 if (options.disabled) { 261 260 return false; 262 261 } 263 264 262 // called only when using activate(false) to close all parts programmatically 265 263 if ( !event.target && !options.alwaysOpen ) { 266 options.active.parent(). andSelf().toggleClass(options.selectedClass);264 options.active.parent().toggleClass(options.selectedClass); 267 265 var toHide = options.active.next(), 268 266 data = { 269 267 options: options, … … 295 293 } 296 294 297 295 // switch classes 298 options.active.parent().andSelf().toggleClass(options.selectedClass); 296 options.active.parent().toggleClass(options.selectedClass); 297 options.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all") 298 .find(".ui-icon").removeClass("ui-icon-circle-minus").addClass("ui-icon-circle-plus"); 299 299 if ( !clickedActive ) { 300 clicked.parent().andSelf().addClass(options.selectedClass); 300 clicked.parent().addClass(options.selectedClass); 301 clicked.removeClass("ui-state-default ui-corner-all").addClass("ui-state-active ui-corner-top") 302 .find(".ui-icon").removeClass("ui-icon-circle-plus").addClass("ui-icon-circle-minus"); 301 303 } 302 304 303 305 // find elements to show and hide