Ticket #3646: jquery-ui-trunk-accordion.patch

File jquery-ui-trunk-accordion.patch, 12.2 KB (added by Jörn Zaefferer, 14 years ago)

  • tests/accordion.html

     
    1919<div id="main">
    2020
    2121        <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>
    4958        </div>
    5059
    5160        <ul id="navigation">
    … …  
    5059
    5160        <ul id="navigation">
    5261                <li>
    53                         <a class="head" href="?p=1.1.1">Guitar</a>
     62                        <h3><a href="?p=1.1.1">Guitar</a></h3>
    5463                        <ul>
    5564                                <li><a href="?p=1.1.1.1">Electric</a></li>
    5665                                <li><a href="?p=1.1.1.2">Acoustic</a></li>
    … …  
    6069                        </ul>
    6170                </li>
    6271                <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>
    6473                        <ul>
    6574                                <li><a href="?p=1.1.2.1">Electric</a></li>
    6675                                <li><a href="?p=1.1.2.2">Acoustic</a></li>
    … …  
    7281                        </ul>
    7382                </li>
    7483                <li>
    75                         <a class="head" href="?p=1.1.3">Drums</a>
     84                        <h3><a href="?p=1.1.3">Drums</a></h3>
    7685                        <ul>
    7786                                <li><a href="?p=1.1.3.2">Acoustic Drums</a></li>
    7887                                <li><a href="?p=1.1.3.3">Electronic Drums</a></li>
    … …  
    8089                        </ul>
    8190                </li>
    8291        </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>
    12292
    12393</div>
    12494

  • tests/accordion.js

     
    1010function state(accordion) {
    1111        var args = $.makeArray(arguments).slice(1);
    1212        $.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);
    1414        });
    1515}
    1616
    … …  
    1919}
    2020
    2121test("basics", function() {
    22         state($('#list1').accordion(), 1, 0, 0);
     22        state($('#list1').accordion({header:"h3"}), 1, 0, 0);
    2323});
    2424
    2525test("autoheight", function() {
    26         $('#navigation').accordion({ header: '.head', autoHeight: false });
     26        $('#navigation').accordion({ header: 'h3', autoHeight: false });
    2727        equals( 90, $('#navigation ul:first').height() );
    2828        equals( 126, $('#navigation ul:eq(1)').height() );
    2929        equals( 54, $('#navigation ul:last').height() );
    30         $('#navigation').accordion("destroy").accordion({ header: '.head', autoHeight: true });
     30        $('#navigation').accordion("destroy").accordion({ header: 'h3', autoHeight: true });
    3131        equals( 126, $('#navigation ul:first').height() );
    3232        equals( 126, $('#navigation ul:eq(1)').height() );
    3333        equals( 126, $('#navigation ul:last').height() );
    … …  
    3434});
    3535
    3636test("activate, numeric", function() {
    37         var ac = $('#list1').accordion({ active: 1 });
     37        var ac = $('#list1').accordion({ header: "h3", active: 1 });
    3838        state(ac, 0, 1, 0);
    3939        ac.accordion("activate", 2);
    4040        state(ac, 0, 0, 1);
    … …  
    4949});
    5050
    5151test("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);
    5353        state(ac, 0, 0, 1);
    5454        ok("x", "----");
    5555        ac.accordion("activate", 0);
    … …  
    6060});
    6161
    6262test("activate, boolean, alwaysOpen:true", function() {
    63         var ac = $('#list1').accordion().accordion("activate", 2);
     63        var ac = $('#list1').accordion({header:"h3"}).accordion("activate", 2);
    6464        state(ac, 0, 0, 1);
    6565        ac.accordion("activate", -1);
    6666        state(ac, 0, 0, 1);
    … …  
    6767});
    6868
    6969test("activate, string expression", function() {
    70         var ac = $('#list1').accordion({ active: ":last" });
     70        var ac = $('#list1').accordion({ header: "h3", active: "h3:last" });
    7171        state(ac, 0, 0, 1);
    7272        ac.accordion("activate", ":first");
    7373        state(ac, 1, 0, 0);
    … …  
    7878});
    7979
    8080test("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") });
    8282        state(ac, 0, 0, 1);
    83         ac.accordion("activate", $("#list1 a:first"));
     83        ac.accordion("activate", $("#list1 h3:first"));
    8484        state(ac, 1, 0, 0);
    85         ac.accordion("activate", $("#list1 a")[1]);
     85        ac.accordion("activate", $("#list1 h3")[1]);
    8686        state(ac, 0, 1, 0);
    8787});
    8888
    … …  
    9494}
    9595
    9696test("handle click on header-descendant", function() {
    97         var ac = $('#navigation').accordion({ header: '.head', autoHeight: false })
     97        var ac = $('#navigation').accordion({ header: 'h3', autoHeight: false })
    9898        ac.triggerEvent("click", $('#navigation span:contains(Bass)')[0]);
    9999        state2(ac, 0, 1, 0);
    100100});
    … …  
    101101
    102102test("active:false", function() {
    103103        $("#list1").accordion({
     104                header: 'h3',
    104105                active: false,
    105106                alwaysOpen: false
    106107        });
    … …  
    110111test("accordionchange event, open closed and close again", function() {
    111112        expect(8);
    112113        $("#list1").accordion({
     114                header: 'h3',
    113115                active: false,
    114116                alwaysOpen: false
    115117        })
    … …  
    131133
    132134test("accessibility", function () {
    133135        expect(9);
    134         var ac = $('#list1').accordion().accordion("activate", 1);
     136        var ac = $('#list1').accordion({header: 'h3'}).accordion("activate", 1);
    135137        var headers = $(".ui-accordion-header");
    136138
    137139        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

     
    2828                                }
    2929                        }
    3030                }
    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");
    3541
    3642                // IE7-/Win - Extra vertical space in Lists fixed
    3743                if ($.browser.msie) {
    … …  
    3844                        this.element.find('a').css('zoom', '1');
    3945                }
    4046
    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 
    4847                var maxHeight;
    4948                if ( options.fillSpace ) {
    5049                        maxHeight = this.element.parent().height();
    … …  
    8483                } else {
    8584                        options.active
    8685                                .attr('aria-expanded','true')
    87                                 .attr("tabIndex", "0")
    88                                 .parent().andSelf().addClass(options.selectedClass);
     86                                .attr("tabIndex", "0");
    8987                }
    9088
    9189                // only need links in taborder for Safari
    … …  
    9896        },
    9997
    10098        destroy: function() {
     99                // TODO update
    101100                this.options.headers.parent().andSelf().removeClass(this.options.selectedClass);
    102101                this.options.headers.prev(".ui-accordion-left").remove();
    103102                this.options.headers.children(".ui-accordion-right").remove();
    … …  
    260259        if (options.disabled) {
    261260                return false;
    262261        }
    263 
    264262        // called only when using activate(false) to close all parts programmatically
    265263        if ( !event.target && !options.alwaysOpen ) {
    266                 options.active.parent().andSelf().toggleClass(options.selectedClass);
     264                options.active.parent().toggleClass(options.selectedClass);
    267265                var toHide = options.active.next(),
    268266                        data = {
    269267                                options: options,
    … …  
    295293        }
    296294
    297295        // 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");
    299299        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");
    301303        }
    302304
    303305        // find elements to show and hide