diff options
| -rw-r--r-- | demos/accordion/collapsible.html | 34 | ||||
| -rw-r--r-- | demos/accordion/custom-icons.html | 34 | ||||
| -rw-r--r-- | demos/accordion/default.html | 84 | ||||
| -rw-r--r-- | demos/accordion/fillspace.html | 34 | ||||
| -rw-r--r-- | demos/accordion/index.html | 1 | ||||
| -rw-r--r-- | demos/accordion/mouseover.html | 34 | ||||
| -rw-r--r-- | tests/static/accordion/default.html | 11 | ||||
| -rw-r--r-- | tests/static/accordion/dl.html | 11 | ||||
| -rw-r--r-- | tests/static/accordion/ul.html | 11 | ||||
| -rw-r--r-- | tests/unit/accordion/accordion.js | 4 | ||||
| -rw-r--r-- | tests/visual/accordion/accordion.html | 20 | ||||
| -rw-r--r-- | tests/visual/accordion/default.html | 18 | ||||
| -rw-r--r-- | tests/visual/accordion/dl.html | 43 | ||||
| -rw-r--r-- | themes/base/ui.accordion.css | 12 | ||||
| -rw-r--r-- | ui/ui.accordion.js | 49 |
15 files changed, 183 insertions, 217 deletions
diff --git a/demos/accordion/collapsible.html b/demos/accordion/collapsible.html index 635361b26..89d78e1cf 100644 --- a/demos/accordion/collapsible.html +++ b/demos/accordion/collapsible.html @@ -21,34 +21,26 @@ <div class="demo"> <div id="accordion"> + <h3><a href="#">Section 1</a></h3> <div> - <h3><a href="#">Section 1</a></h3> - <div> - <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> - </div> + <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> + <h3><a href="#">Section 2</a></h3> <div> - <h3><a href="#">Section 2</a></h3> - <div> - <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> - </div> + <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> + <h3><a href="#">Section 3</a></h3> <div> - <h3><a href="#">Section 3</a></h3> - <div> - <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> - <ul> - <li>List item one</li> - <li>List item two</li> - <li>List item three</li> - </ul> - </div> + <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> + <ul> + <li>List item one</li> + <li>List item two</li> + <li>List item three</li> + </ul> </div> + <h3><a href="#">Section 4</a></h3> <div> - <h3><a href="#">Section 4</a></h3> - <div> - <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> - </div> + <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div> diff --git a/demos/accordion/custom-icons.html b/demos/accordion/custom-icons.html index 76cd1d86a..4dae8bb84 100644 --- a/demos/accordion/custom-icons.html +++ b/demos/accordion/custom-icons.html @@ -24,34 +24,26 @@ <div class="demo"> <div id="accordion"> + <h3><a href="#">Section 1</a></h3> <div> - <h3><a href="#">Section 1</a></h3> - <div> - <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> - </div> + <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> + <h3><a href="#">Section 2</a></h3> <div> - <h3><a href="#">Section 2</a></h3> - <div> - <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> - </div> + <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> + <h3><a href="#">Section 3</a></h3> <div> - <h3><a href="#">Section 3</a></h3> - <div> - <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> - <ul> - <li>List item one</li> - <li>List item two</li> - <li>List item three</li> - </ul> - </div> + <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> + <ul> + <li>List item one</li> + <li>List item two</li> + <li>List item three</li> + </ul> </div> + <h3><a href="#">Section 4</a></h3> <div> - <h3><a href="#">Section 4</a></h3> - <div> - <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> - </div> + <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div> diff --git a/demos/accordion/default.html b/demos/accordion/default.html index 7a8445b8d..37353ffa5 100644 --- a/demos/accordion/default.html +++ b/demos/accordion/default.html @@ -20,59 +20,51 @@ <div class="demo"> <div id="accordion"> + <h3><a href="#">Section 1</a></h3> <div> - <h3><a href="#">Section 1</a></h3> - <div> - <p> - Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer - ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit - amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut - odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. - </p> - </div> + <p> + Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer + ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit + amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut + odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. + </p> </div> + <h3><a href="#">Section 2</a></h3> <div> - <h3><a href="#">Section 2</a></h3> - <div> - <p> - Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet - purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor - velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In - suscipit faucibus urna. - </p> - </div> + <p> + Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet + purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor + velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In + suscipit faucibus urna. + </p> </div> + <h3><a href="#">Section 3</a></h3> <div> - <h3><a href="#">Section 3</a></h3> - <div> - <p> - Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. - Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero - ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis - lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. - </p> - <ul> - <li>List item one</li> - <li>List item two</li> - <li>List item three</li> - </ul> - </div> + <p> + Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. + Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero + ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis + lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. + </p> + <ul> + <li>List item one</li> + <li>List item two</li> + <li>List item three</li> + </ul> </div> + <h3><a href="#">Section 4</a></h3> <div> - <h3><a href="#">Section 4</a></h3> - <div> - <p> - Cras dictum. Pellentesque habitant morbi tristique senectus et netus - et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in - faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia - mauris vel est. - </p> - <p> - Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. - Class aptent taciti sociosqu ad litora torquent per conubia nostra, per - inceptos himenaeos. - </p> - </div> + <p> + Cras dictum. Pellentesque habitant morbi tristique senectus et netus + et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in + faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia + mauris vel est. + </p> + <p> + Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. + </p> </div> </div> diff --git a/demos/accordion/fillspace.html b/demos/accordion/fillspace.html index dde1c6a7c..0a2f8ae16 100644 --- a/demos/accordion/fillspace.html +++ b/demos/accordion/fillspace.html @@ -34,34 +34,26 @@ <div id="accordionResizer" style="padding:10px; width:350px; height:220px;" class="ui-widget-content"> <div id="accordion"> + <h3><a href="#">Section 1</a></h3> <div> - <h3><a href="#">Section 1</a></h3> - <div> - <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> - </div> + <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> + <h3><a href="#">Section 2</a></h3> <div> - <h3><a href="#">Section 2</a></h3> - <div> - <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> - </div> + <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> + <h3><a href="#">Section 3</a></h3> <div> - <h3><a href="#">Section 3</a></h3> - <div> - <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> - <ul> - <li>List item one</li> - <li>List item two</li> - <li>List item three</li> - </ul> - </div> + <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> + <ul> + <li>List item one</li> + <li>List item two</li> + <li>List item three</li> + </ul> </div> + <h3><a href="#">Section 4</a></h3> <div> - <h3><a href="#">Section 4</a></h3> - <div> - <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> - </div> + <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div> diff --git a/demos/accordion/index.html b/demos/accordion/index.html index 309c75de0..89134f902 100644 --- a/demos/accordion/index.html +++ b/demos/accordion/index.html @@ -13,7 +13,6 @@ <li><a href="collapsible.html">Collapse content</a></li> <li><a href="mouseover.html">Open on mouseover</a></li> <li><a href="custom-icons.html">Customize icons</a></li> - </ul> </div> </body> diff --git a/demos/accordion/mouseover.html b/demos/accordion/mouseover.html index 1d2ff4d3c..ecf63f821 100644 --- a/demos/accordion/mouseover.html +++ b/demos/accordion/mouseover.html @@ -21,34 +21,26 @@ <div class="demo"> <div id="accordion"> + <h3><a href="#">Section 1</a></h3> <div> - <h3><a href="#">Section 1</a></h3> - <div> - <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> - </div> + <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> + <h3><a href="#">Section 2</a></h3> <div> - <h3><a href="#">Section 2</a></h3> - <div> - <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> - </div> + <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> + <h3><a href="#">Section 3</a></h3> <div> - <h3><a href="#">Section 3</a></h3> - <div> - <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> - <ul> - <li>List item one</li> - <li>List item two</li> - <li>List item three</li> - </ul> - </div> + <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> + <ul> + <li>List item one</li> + <li>List item two</li> + <li>List item three</li> + </ul> </div> + <h3><a href="#">Section 4</a></h3> <div> - <h3><a href="#">Section 4</a></h3> - <div> - <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> - </div> + <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div> diff --git a/tests/static/accordion/default.html b/tests/static/accordion/default.html index 64d8e76c0..1dbfde4b6 100644 --- a/tests/static/accordion/default.html +++ b/tests/static/accordion/default.html @@ -7,17 +7,6 @@ <link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" /> <script type="text/javascript" src="../../../jquery-1.3.1.js"></script> <script type="text/javascript" src="../static.js"></script> - <style type="text/css"> - /* Accordion - ----------------------------------*/ - .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } - .ui-accordion li {display: inline;} - .ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } - .ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; } - .ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } - .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; } - .ui-accordion .ui-accordion-content-active { display: block; } - </style> </head> <body> diff --git a/tests/static/accordion/dl.html b/tests/static/accordion/dl.html index f53eab857..dff8407d9 100644 --- a/tests/static/accordion/dl.html +++ b/tests/static/accordion/dl.html @@ -7,17 +7,6 @@ <link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" /> <script type="text/javascript" src="../../../jquery-1.3.1.js"></script> <script type="text/javascript" src="../static.js"></script> - <style type="text/css"> - /* Accordion - ----------------------------------*/ - .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } - .ui-accordion li {display: inline;} - .ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } - .ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; } - .ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } - .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; } - .ui-accordion .ui-accordion-content-active { display: block; } - </style> </head> <body> diff --git a/tests/static/accordion/ul.html b/tests/static/accordion/ul.html index 8aae67134..84c3c37df 100644 --- a/tests/static/accordion/ul.html +++ b/tests/static/accordion/ul.html @@ -7,17 +7,6 @@ <link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" /> <script type="text/javascript" src="../../../jquery-1.3.1.js"></script> <script type="text/javascript" src="../static.js"></script> - <style type="text/css"> - /* Accordion - ----------------------------------*/ - .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } - .ui-accordion li {display: inline;} - .ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } - .ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; } - .ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } - .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; } - .ui-accordion .ui-accordion-content-active { display: block; } - </style> </head> <body> diff --git a/tests/unit/accordion/accordion.js b/tests/unit/accordion/accordion.js index d9f8c4b64..e39469827 100644 --- a/tests/unit/accordion/accordion.js +++ b/tests/unit/accordion/accordion.js @@ -10,13 +10,13 @@ jQuery.ui.accordion.defaults.animated = false; function state(accordion) { var args = $.makeArray(arguments).slice(1); $.each(args, function(i, n) { - equals(accordion.find(".ui-accordion-content").parent().eq(i).is(":visible"), n); + equals(accordion.find(".ui-accordion-content").eq(i).is(":visible"), n); }); } $.fn.triggerEvent = function(type, target) { return this.triggerHandler(type, [jQuery.event.fix({ type: type, target: target })]); -} +}; test("basics", function() { state($('#list1').accordion(), 1, 0, 0); diff --git a/tests/visual/accordion/accordion.html b/tests/visual/accordion/accordion.html index fd467dc27..b5322391a 100644 --- a/tests/visual/accordion/accordion.html +++ b/tests/visual/accordion/accordion.html @@ -16,7 +16,7 @@ $("#accordion").accordion("destroy"); } $("#toggle").toggle(on, off).click(); - }) + }); </script> </head> <body> @@ -25,23 +25,17 @@ <li class="plugin"> Accordion <div id="accordion"> + <h3><a href="#">First</a></h3> <div> - <h3><a href="#">First</a></h3> - <div> - Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. - </div> + Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </div> + <h3><a href="#">Second</a></h3> <div> - <h3><a href="#">Second</a></h3> - <div> - Phasellus mattis tincidunt nibh. - </div> + Phasellus mattis tincidunt nibh. </div> + <h3><a href="#">Third</a></h3> <div> - <h3><a href="#">Third</a></h3> - <div> - Nam dui erat, auctor a, dignissim quis. - </div> + Nam dui erat, auctor a, dignissim quis. </div> </div> <button id="toggle">Toggle</button> diff --git a/tests/visual/accordion/default.html b/tests/visual/accordion/default.html index d8b94dc63..1aacc1b59 100644 --- a/tests/visual/accordion/default.html +++ b/tests/visual/accordion/default.html @@ -16,23 +16,17 @@ <body> <div id="accordion"> + <h3><a href="#">Accordion Header 1</a></h3> <div> - <h3><a href="#">Accordion Header 1</a></h3> - <div> - Accordion Content 1 - </div> + Accordion Content 1 </div> + <h3><a href="#">Accordion Header 2</a></h3> <div> - <h3><a href="#">Accordion Header 2</a></h3> - <div> - Accordion Content 2 - </div> + Accordion Content 2 </div> + <h3><a href="#">Accordion Header 3</a></h3> <div> - <h3><a href="#">Accordion Header 3</a></h3> - <div> - Accordion Content 3 - </div> + Accordion Content 3 </div> </div> diff --git a/tests/visual/accordion/dl.html b/tests/visual/accordion/dl.html new file mode 100644 index 000000000..9bc8886e8 --- /dev/null +++ b/tests/visual/accordion/dl.html @@ -0,0 +1,43 @@ +<!doctype html> +<html> +<head> + <title>Accordion Static Test : DL</title> + <link rel="stylesheet" href="../../static/static.css" type="text/css" /> + <link rel="stylesheet" href="../../../themes/base/ui.base.css" type="text/css" /> + <link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" /> + <script type="text/javascript" src="../../../jquery-1.3.1.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() { + $("dl").accordion({ + header: "dt" + }) + }); + </script> +</head> +<body> + +<dl> + <dt> + <a href="#">Accordion Header 1</a> + </dt> + <dd> + Accordion Content 1 + </dd> + <dt> + <a href="#">Accordion Header 2</a> + </dt> + <dd> + Accordion Content 2 + </dd> + <dt> + <a href="#">Accordion Header 3</a> + </dt> + <dd> + Accordion Content 2 + </dd> +</dl> + +</body> +</html> diff --git a/themes/base/ui.accordion.css b/themes/base/ui.accordion.css index 0d4bca4df..c84ad4e91 100644 --- a/themes/base/ui.accordion.css +++ b/themes/base/ui.accordion.css @@ -1,9 +1,9 @@ /* Accordion ----------------------------------*/ -.ui-accordion .ui-accordion-group {margin-bottom: 1px;} -.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; zoom: 1; } -.ui-accordion .ui-accordion-selected .ui-accordion-header { border-bottom: 0; } -.ui-accordion .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } +.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } +.ui-accordion li {display: inline;} +.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } .ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; } -.ui-accordion .ui-accordion-content-wrap { border-top: 0; margin-top: -1px; position: relative; top: 1px; margin-bottom: 2px; } -.ui-accordion .ui-accordion-content { padding: 1em 2.2em; } +.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } +.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; } +.ui-accordion .ui-accordion-content-active { display: block; }
\ No newline at end of file diff --git a/ui/ui.accordion.js b/ui/ui.accordion.js index f760cec0f..5d976d8ee 100644 --- a/ui/ui.accordion.js +++ b/ui/ui.accordion.js @@ -26,28 +26,23 @@ $.widget("ui.accordion", { this.active = current; } else { this.active = current.parent().parent().prev(); - current.addClass("ui-accordion-current"); + current.addClass("ui-accordion-content-active"); } } } this.element.addClass("ui-accordion ui-widget ui-helper-reset"); - this.groups = this.element.children().addClass("ui-accordion-group"); - this.headers = this.groups.find("> :first-child").addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all") + this.headers = this.element.find(o.header).addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all") .bind("mouseenter.accordion", function(){ $(this).addClass('ui-state-hover'); }) .bind("mouseleave.accordion", function(){ $(this).removeClass('ui-state-hover'); }); - // wrap content elements in div against animation issues this.headers .next() - .wrap("<div></div>") - .addClass("ui-accordion-content") - .parent() - .addClass("ui-accordion-content-wrap ui-helper-reset ui-widget-content ui-corner-bottom"); + .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"); this.active = this._findActive(this.active || o.active).toggleClass("ui-state-default").toggleClass("ui-state-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top"); - this.active.parent().addClass('ui-accordion-selected'); + this.active.next().addClass('ui-accordion-content-active'); //Append icon elements $("<span/>").addClass("ui-icon " + o.icons.header).prependTo(this.headers); @@ -103,7 +98,6 @@ $.widget("ui.accordion", { .unbind('.accordion') .removeData('accordion'); - this.element.children().removeClass("ui-accordion-group ui-accordion-selected"); this.headers .unbind(".accordion") .removeClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-corner-top") @@ -111,7 +105,7 @@ $.widget("ui.accordion", { this.headers.find("a").removeAttr("tabindex"); this.headers.children(".ui-icon").remove(); - this.headers.next().children().removeClass("ui-accordion-content").each(function() { + this.headers.next().removeClass("ui-accordion-content ui-accordion-content-active").each(function() { $(this).parent().replaceWith(this); }); @@ -204,9 +198,9 @@ $.widget("ui.accordion", { // called only when using activate(false) to close all parts programmatically if (!event.target && !o.alwaysOpen) { - this.active.parent().toggleClass('ui-accordion-selected'); this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all") .find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header); + this.active.next().addClass('ui-accordion-content-active'); var toHide = this.active.next(), data = { options: o, @@ -238,13 +232,13 @@ $.widget("ui.accordion", { } // switch classes - this.active.parent().toggleClass('ui-accordion-selected'); this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all") .find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header); + this.active.next().addClass('ui-accordion-content-active'); if (!clickedIsActive) { - clicked.parent().addClass('ui-accordion-selected'); clicked.removeClass("ui-state-default ui-corner-all").addClass("ui-state-active ui-corner-top") .find(".ui-icon").removeClass(o.icons.header).addClass(o.icons.headerSelected); + clicked.next().addClass('ui-accordion-content-active'); } // find elements to show and hide @@ -366,7 +360,6 @@ $.widget("ui.accordion", { } this._trigger('change', null, this.data); - } }); @@ -405,15 +398,31 @@ $.extend($.ui.accordion, { var hideHeight = options.toHide.height(), showHeight = options.toShow.height(), difference = showHeight / hideHeight, - overflow = options.toShow.css('overflow'); + overflow = options.toShow.css('overflow'), + showProps = {}, + hideProps = {}, + fxAttrs = [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom", "borderTop", "borderBottom" ]; + // border animations break IE (only tested in IE6) + ($.browser.msie && fxAttrs.pop() && fxAttrs.pop()); + $.each(fxAttrs, function(i, prop) { + hideProps[prop] = 'hide'; + showProps[prop] = parseFloat(options.toShow.css(prop)); + }); options.toShow.css({ height: 0, overflow: 'hidden' }).show(); - options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate({height:"hide"},{ - step: function(now) { - var current = (hideHeight - now) * difference; + options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate(hideProps,{ + step: function(now, settings) { + // if the alwaysOpen option is set to false, we may not have + // a content pane to show + if (!options.toShow[0]) { return; } + + var percentDone = settings.start != settings.end + ? (settings.now - settings.start) / (settings.end - settings.start) + : 0, + current = percentDone * showProps[settings.prop]; if ($.browser.msie || $.browser.opera) { current = Math.ceil(current); } - options.toShow.height( current ); + options.toShow[0].style[settings.prop] = current + 'px'; }, duration: options.duration, easing: options.easing, |