| [ Index ] |
PHP Cross Reference of Drupal 6 (yi-drupal) |
[Summary view] [Print] [Text view]
1 2 <ul class="UIAPIPlugin-toc"> 3 <li><a href="#overview">Overview</a></li> 4 <li><a href="#options">Options</a></li> 5 <li><a href="#events">Events</a></li> 6 <li><a href="#methods">Methods</a></li> 7 <li><a href="#theming">Theming</a></li> 8 </ul> 9 <div class="UIAPIPlugin"> 10 <h1>jQuery UI Accordion</h1> 11 <div id="overview"> 12 <h2 class="top-header">Overview</h2> 13 <div id="overview-main"> 14 <p>Make the selected elements Accordion widgets. Semantic requirements:</p> 15 <p>The markup of your accordion container needs pairs of headers and content panels:</p> 16 <pre><div id="accordion"> 17 <h3><a href="#">First header</a></h3> 18 <div>First content</div> 19 <h3><a href="#">Second header</a></h3> 20 <div>Second content</div> 21 </div></pre> 22 <p>If you use a different element for the header, specify the header-option with an appropriate selector, eg. header: 'a.header'. The content element must be always next to its header.</p> 23 <p>If you have links inside the accordion content and use a-elements as headers, add a class to them and use that as the header, eg. header: 'a.header'.</p> 24 <p>Use activate(Number) to change the active content programmatically.</p> 25 <div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/API/1.7.2/Accordion?section=1" title="Edit section: NOTE: If you want multiple sections open at once, don't use an accordion">edit</a>]</div><a name="NOTE:_If_you_want_multiple_sections_open_at_once.2C_don.27t_use_an_accordion"></a><h4>NOTE: If you want multiple sections open at once, don't use an accordion</h4> 26 <p>An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:</p> 27 <pre>jQuery(document).ready(function(){ 28 $('.accordion .head').click(function() { 29 $(this).next().toggle(); 30 return false; 31 }).next().hide(); 32 });</pre> 33 <p>Or animated:</p> 34 <pre>jQuery(document).ready(function(){ 35 $('.accordion .head').click(function() { 36 $(this).next().toggle('slow'); 37 return false; 38 }).next().hide(); 39 });</pre> 40 </div> 41 <div id="overview-dependencies"> 42 <h3>Dependencies</h3> 43 <ul> 44 <li>UI Core</li> 45 <li>UI Effects Core (Optional - only for non-default animations)</li> 46 </ul> 47 </div> 48 <div id="overview-example"> 49 <h3>Example</h3> 50 <div id="overview-example" class="example"> 51 <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul> 52 <p><div id="demo" class="tabs-container" rel="310"> 53 A simple jQuery UI Accordion.<br /> 54 </p> 55 <pre>$("#accordion").accordion(); 56 </pre> 57 <p></div><div id="source" class="tabs-container"> 58 </p> 59 <pre><!DOCTYPE html> 60 <html> 61 <head> 62 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 63 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 64 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 65 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 66 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 67 68 <script> 69 $(document).ready(function() { 70 $("#accordion").accordion(); 71 }); 72 </script> 73 </head> 74 <body style="font-size:62.5%;"> 75 76 <div id="accordion"> 77 <h3><a href="#">Section 1</a></h3> 78 <div> 79 <p> 80 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 81 ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 82 amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 83 odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 84 </p> 85 </div> 86 <h3><a href="#">Section 2</a></h3> 87 <div> 88 <p> 89 Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet 90 purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor 91 velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In 92 suscipit faucibus urna. 93 </p> 94 </div> 95 <h3><a href="#">Section 3</a></h3> 96 <div> 97 <p> 98 Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. 99 Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero 100 ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis 101 lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. 102 </p> 103 <ul> 104 <li>List item one</li> 105 <li>List item two</li> 106 <li>List item three</li> 107 </ul> 108 </div> 109 <h3><a href="#">Section 4</a></h3> 110 <div> 111 <p> 112 Cras dictum. Pellentesque habitant morbi tristique senectus et netus 113 et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in 114 faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia 115 mauris vel est. 116 </p> 117 <p> 118 Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. 119 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 120 inceptos himenaeos. 121 </p> 122 </div> 123 </div> 124 125 </body> 126 </html> 127 </pre> 128 <p></div> 129 </p><p></div> 130 </div> 131 </div> 132 <div id="options"> 133 <h2 class="top-header">Options</h2> 134 <ul class="options-list"> 135 136 <li class="option" id="option-disabled"> 137 <div class="option-header"> 138 <h3 class="option-name"><a href="#option-disabled">disabled</a></h3> 139 <dl> 140 <dt class="option-type-label">Type:</dt> 141 <dd class="option-type">Boolean</dd> 142 143 <dt class="option-default-label">Default:</dt> 144 <dd class="option-default">false</dd> 145 146 </dl> 147 </div> 148 <div class="option-description"> 149 <p>Disables (true) or enables (false) the accordion. Can be set when initialising (first creating) the accordion.</p> 150 </div> 151 <div class="option-examples"> 152 <h4>Code examples</h4> 153 <dl class="option-examples-list"> 154 155 <dt> 156 Initialize a accordion with the <code>disabled</code> option specified. 157 </dt> 158 <dd> 159 <pre><code>$( ".selector" ).accordion({ disabled: true });</code></pre> 160 </dd> 161 162 163 <dt> 164 Get or set the <code>disabled</code> option, after init. 165 </dt> 166 <dd> 167 <pre><code>//getter 168 var disabled = $( ".selector" ).accordion( "option", "disabled" ); 169 //setter 170 $( ".selector" ).accordion( "option", "disabled", true );</code></pre> 171 </dd> 172 173 </dl> 174 </div> 175 </li> 176 177 178 <li class="option" id="option-active"> 179 <div class="option-header"> 180 <h3 class="option-name"><a href="#option-active">active</a></h3> 181 <dl> 182 <dt class="option-type-label">Type:</dt> 183 <dd class="option-type">Selector, Element, jQuery, Boolean, Number</dd> 184 185 <dt class="option-default-label">Default:</dt> 186 <dd class="option-default">first child</dd> 187 188 </dl> 189 </div> 190 <div class="option-description"> 191 <p>Selector for the active element. Set to false to display none at start. Needs <code>collapsible: true</code>.</p> 192 </div> 193 <div class="option-examples"> 194 <h4>Code examples</h4> 195 <dl class="option-examples-list"> 196 197 <dt> 198 Initialize a accordion with the <code>active</code> option specified. 199 </dt> 200 <dd> 201 <pre><code>$( ".selector" ).accordion({ active: 2 });</code></pre> 202 </dd> 203 204 205 <dt> 206 Get or set the <code>active</code> option, after init. 207 </dt> 208 <dd> 209 <pre><code>//getter 210 var active = $( ".selector" ).accordion( "option", "active" ); 211 //setter 212 $( ".selector" ).accordion( "option", "active", 2 );</code></pre> 213 </dd> 214 215 </dl> 216 </div> 217 </li> 218 219 220 <li class="option" id="option-animated"> 221 <div class="option-header"> 222 <h3 class="option-name"><a href="#option-animated">animated</a></h3> 223 <dl> 224 <dt class="option-type-label">Type:</dt> 225 <dd class="option-type">Boolean, String</dd> 226 227 <dt class="option-default-label">Default:</dt> 228 <dd class="option-default">'slide'</dd> 229 230 </dl> 231 </div> 232 <div class="option-description"> 233 <p>Choose your favorite animation, or disable them (set to false). In addition to the default, 'bounceslide' and all defined easing methods are supported ('bounceslide' requires UI Effects Core).</p> 234 </div> 235 <div class="option-examples"> 236 <h4>Code examples</h4> 237 <dl class="option-examples-list"> 238 239 <dt> 240 Initialize a accordion with the <code>animated</code> option specified. 241 </dt> 242 <dd> 243 <pre><code>$( ".selector" ).accordion({ animated: 'bounceslide' });</code></pre> 244 </dd> 245 246 247 <dt> 248 Get or set the <code>animated</code> option, after init. 249 </dt> 250 <dd> 251 <pre><code>//getter 252 var animated = $( ".selector" ).accordion( "option", "animated" ); 253 //setter 254 $( ".selector" ).accordion( "option", "animated", 'bounceslide' );</code></pre> 255 </dd> 256 257 </dl> 258 </div> 259 </li> 260 261 262 <li class="option" id="option-autoHeight"> 263 <div class="option-header"> 264 <h3 class="option-name"><a href="#option-autoHeight">autoHeight</a></h3> 265 <dl> 266 <dt class="option-type-label">Type:</dt> 267 <dd class="option-type">Boolean</dd> 268 269 <dt class="option-default-label">Default:</dt> 270 <dd class="option-default">true</dd> 271 272 </dl> 273 </div> 274 <div class="option-description"> 275 <p>If set, the highest content part is used as height reference for all other parts. Provides more consistent animations.</p> 276 </div> 277 <div class="option-examples"> 278 <h4>Code examples</h4> 279 <dl class="option-examples-list"> 280 281 <dt> 282 Initialize a accordion with the <code>autoHeight</code> option specified. 283 </dt> 284 <dd> 285 <pre><code>$( ".selector" ).accordion({ autoHeight: false });</code></pre> 286 </dd> 287 288 289 <dt> 290 Get or set the <code>autoHeight</code> option, after init. 291 </dt> 292 <dd> 293 <pre><code>//getter 294 var autoHeight = $( ".selector" ).accordion( "option", "autoHeight" ); 295 //setter 296 $( ".selector" ).accordion( "option", "autoHeight", false );</code></pre> 297 </dd> 298 299 </dl> 300 </div> 301 </li> 302 303 304 <li class="option" id="option-clearStyle"> 305 <div class="option-header"> 306 <h3 class="option-name"><a href="#option-clearStyle">clearStyle</a></h3> 307 <dl> 308 <dt class="option-type-label">Type:</dt> 309 <dd class="option-type">Boolean</dd> 310 311 <dt class="option-default-label">Default:</dt> 312 <dd class="option-default">false</dd> 313 314 </dl> 315 </div> 316 <div class="option-description"> 317 <p>If set, clears height and overflow styles after finishing animations. This enables accordions to work with dynamic content. Won't work together with autoHeight.</p> 318 </div> 319 <div class="option-examples"> 320 <h4>Code examples</h4> 321 <dl class="option-examples-list"> 322 323 <dt> 324 Initialize a accordion with the <code>clearStyle</code> option specified. 325 </dt> 326 <dd> 327 <pre><code>$( ".selector" ).accordion({ clearStyle: true });</code></pre> 328 </dd> 329 330 331 <dt> 332 Get or set the <code>clearStyle</code> option, after init. 333 </dt> 334 <dd> 335 <pre><code>//getter 336 var clearStyle = $( ".selector" ).accordion( "option", "clearStyle" ); 337 //setter 338 $( ".selector" ).accordion( "option", "clearStyle", true );</code></pre> 339 </dd> 340 341 </dl> 342 </div> 343 </li> 344 345 346 <li class="option" id="option-collapsible"> 347 <div class="option-header"> 348 <h3 class="option-name"><a href="#option-collapsible">collapsible</a></h3> 349 <dl> 350 <dt class="option-type-label">Type:</dt> 351 <dd class="option-type">Boolean</dd> 352 353 <dt class="option-default-label">Default:</dt> 354 <dd class="option-default">false</dd> 355 356 </dl> 357 </div> 358 <div class="option-description"> 359 <p>Whether all the sections can be closed at once. Allows collapsing the active section by the triggering event (click is the default).</p> 360 </div> 361 <div class="option-examples"> 362 <h4>Code examples</h4> 363 <dl class="option-examples-list"> 364 365 <dt> 366 Initialize a accordion with the <code>collapsible</code> option specified. 367 </dt> 368 <dd> 369 <pre><code>$( ".selector" ).accordion({ collapsible: true });</code></pre> 370 </dd> 371 372 373 <dt> 374 Get or set the <code>collapsible</code> option, after init. 375 </dt> 376 <dd> 377 <pre><code>//getter 378 var collapsible = $( ".selector" ).accordion( "option", "collapsible" ); 379 //setter 380 $( ".selector" ).accordion( "option", "collapsible", true );</code></pre> 381 </dd> 382 383 </dl> 384 </div> 385 </li> 386 387 388 <li class="option" id="option-event"> 389 <div class="option-header"> 390 <h3 class="option-name"><a href="#option-event">event</a></h3> 391 <dl> 392 <dt class="option-type-label">Type:</dt> 393 <dd class="option-type">String</dd> 394 395 <dt class="option-default-label">Default:</dt> 396 <dd class="option-default">'click'</dd> 397 398 </dl> 399 </div> 400 <div class="option-description"> 401 <p>The event on which to trigger the accordion.</p> 402 </div> 403 <div class="option-examples"> 404 <h4>Code examples</h4> 405 <dl class="option-examples-list"> 406 407 <dt> 408 Initialize a accordion with the <code>event</code> option specified. 409 </dt> 410 <dd> 411 <pre><code>$( ".selector" ).accordion({ event: 'mouseover' });</code></pre> 412 </dd> 413 414 415 <dt> 416 Get or set the <code>event</code> option, after init. 417 </dt> 418 <dd> 419 <pre><code>//getter 420 var event = $( ".selector" ).accordion( "option", "event" ); 421 //setter 422 $( ".selector" ).accordion( "option", "event", 'mouseover' );</code></pre> 423 </dd> 424 425 </dl> 426 </div> 427 </li> 428 429 430 <li class="option" id="option-fillSpace"> 431 <div class="option-header"> 432 <h3 class="option-name"><a href="#option-fillSpace">fillSpace</a></h3> 433 <dl> 434 <dt class="option-type-label">Type:</dt> 435 <dd class="option-type">Boolean</dd> 436 437 <dt class="option-default-label">Default:</dt> 438 <dd class="option-default">false</dd> 439 440 </dl> 441 </div> 442 <div class="option-description"> 443 <p>If set, the accordion completely fills the height of the parent element. Overrides autoheight.</p> 444 </div> 445 <div class="option-examples"> 446 <h4>Code examples</h4> 447 <dl class="option-examples-list"> 448 449 <dt> 450 Initialize a accordion with the <code>fillSpace</code> option specified. 451 </dt> 452 <dd> 453 <pre><code>$( ".selector" ).accordion({ fillSpace: true });</code></pre> 454 </dd> 455 456 457 <dt> 458 Get or set the <code>fillSpace</code> option, after init. 459 </dt> 460 <dd> 461 <pre><code>//getter 462 var fillSpace = $( ".selector" ).accordion( "option", "fillSpace" ); 463 //setter 464 $( ".selector" ).accordion( "option", "fillSpace", true );</code></pre> 465 </dd> 466 467 </dl> 468 </div> 469 </li> 470 471 472 <li class="option" id="option-header"> 473 <div class="option-header"> 474 <h3 class="option-name"><a href="#option-header">header</a></h3> 475 <dl> 476 <dt class="option-type-label">Type:</dt> 477 <dd class="option-type">Selector, jQuery</dd> 478 479 <dt class="option-default-label">Default:</dt> 480 <dd class="option-default">'> li > :first-child,> :not(li):even'</dd> 481 482 </dl> 483 </div> 484 <div class="option-description"> 485 <p>Selector for the header element.</p> 486 </div> 487 <div class="option-examples"> 488 <h4>Code examples</h4> 489 <dl class="option-examples-list"> 490 491 <dt> 492 Initialize a accordion with the <code>header</code> option specified. 493 </dt> 494 <dd> 495 <pre><code>$( ".selector" ).accordion({ header: 'h3' });</code></pre> 496 </dd> 497 498 499 <dt> 500 Get or set the <code>header</code> option, after init. 501 </dt> 502 <dd> 503 <pre><code>//getter 504 var header = $( ".selector" ).accordion( "option", "header" ); 505 //setter 506 $( ".selector" ).accordion( "option", "header", 'h3' );</code></pre> 507 </dd> 508 509 </dl> 510 </div> 511 </li> 512 513 514 <li class="option" id="option-icons"> 515 <div class="option-header"> 516 <h3 class="option-name"><a href="#option-icons">icons</a></h3> 517 <dl> 518 <dt class="option-type-label">Type:</dt> 519 <dd class="option-type">Object</dd> 520 521 <dt class="option-default-label">Default:</dt> 522 <dd class="option-default">{ 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }</dd> 523 524 </dl> 525 </div> 526 <div class="option-description"> 527 <p>Icons to use for headers. Icons may be specified for 'header' and 'headerSelected', and we recommend using the icons native to the jQuery UI CSS Framework manipulated by <a href="http://www.themeroller.com" class="external text" title="http://www.themeroller.com">jQuery UI ThemeRoller</a></p> 528 </div> 529 <div class="option-examples"> 530 <h4>Code examples</h4> 531 <dl class="option-examples-list"> 532 533 <dt> 534 Initialize a accordion with the <code>icons</code> option specified. 535 </dt> 536 <dd> 537 <pre><code>$( ".selector" ).accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });</code></pre> 538 </dd> 539 540 541 <dt> 542 Get or set the <code>icons</code> option, after init. 543 </dt> 544 <dd> 545 <pre><code>//getter 546 var icons = $( ".selector" ).accordion( "option", "icons" ); 547 //setter 548 $( ".selector" ).accordion( "option", "icons", { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } );</code></pre> 549 </dd> 550 551 </dl> 552 </div> 553 </li> 554 555 556 <li class="option" id="option-navigation"> 557 <div class="option-header"> 558 <h3 class="option-name"><a href="#option-navigation">navigation</a></h3> 559 <dl> 560 <dt class="option-type-label">Type:</dt> 561 <dd class="option-type">Boolean</dd> 562 563 <dt class="option-default-label">Default:</dt> 564 <dd class="option-default">false</dd> 565 566 </dl> 567 </div> 568 <div class="option-description"> 569 <p>If set, looks for the anchor that matches location.href and activates it. Great for href-based state-saving. Use navigationFilter to implement your own matcher.</p> 570 </div> 571 <div class="option-examples"> 572 <h4>Code examples</h4> 573 <dl class="option-examples-list"> 574 575 <dt> 576 Initialize a accordion with the <code>navigation</code> option specified. 577 </dt> 578 <dd> 579 <pre><code>$( ".selector" ).accordion({ navigation: true });</code></pre> 580 </dd> 581 582 583 <dt> 584 Get or set the <code>navigation</code> option, after init. 585 </dt> 586 <dd> 587 <pre><code>//getter 588 var navigation = $( ".selector" ).accordion( "option", "navigation" ); 589 //setter 590 $( ".selector" ).accordion( "option", "navigation", true );</code></pre> 591 </dd> 592 593 </dl> 594 </div> 595 </li> 596 597 598 <li class="option" id="option-navigationFilter"> 599 <div class="option-header"> 600 <h3 class="option-name"><a href="#option-navigationFilter">navigationFilter</a></h3> 601 <dl> 602 <dt class="option-type-label">Type:</dt> 603 <dd class="option-type">Function</dd> 604 605 <dt class="option-default-label">Default:</dt> 606 <dd class="option-default"> </dd> 607 608 </dl> 609 </div> 610 <div class="option-description"> 611 <p>Overwrite the default location.href-matching with your own matcher.</p> 612 </div> 613 <div class="option-examples"> 614 <h4>Code examples</h4> 615 <dl class="option-examples-list"> 616 617 <dt> 618 Initialize a accordion with the <code>navigationFilter</code> option specified. 619 </dt> 620 <dd> 621 <pre><code>$( ".selector" ).accordion({ navigationFilter: function(){ ... } });</code></pre> 622 </dd> 623 624 625 <dt> 626 Get or set the <code>navigationFilter</code> option, after init. 627 </dt> 628 <dd> 629 <pre><code>//getter 630 var navigationFilter = $( ".selector" ).accordion( "option", "navigationFilter" ); 631 //setter 632 $( ".selector" ).accordion( "option", "navigationFilter", function(){ ... } );</code></pre> 633 </dd> 634 635 </dl> 636 </div> 637 </li> 638 639 </ul> 640 </div> 641 <div id="events"> 642 <h2 class="top-header">Events</h2> 643 <ul class="events-list"> 644 645 <li class="event" id="event-change"> 646 <div class="event-header"> 647 <h3 class="event-name"><a href="#event-change">change</a></h3> 648 <dl> 649 <dt class="event-type-label">Type:</dt> 650 <dd class="event-type">accordionchange</dd> 651 </dl> 652 </div> 653 <div class="event-description"> 654 <p>This event is triggered every time the accordion changes. If the accordion is animated, the event will be triggered upon completion of the animation; otherwise, it is triggered immediately. 655 </p> 656 <pre>$('.ui-accordion').bind('accordionchange', function(event, ui) { 657 ui.newHeader // jQuery object, activated header 658 ui.oldHeader // jQuery object, previous header 659 ui.newContent // jQuery object, activated content 660 ui.oldContent // jQuery object, previous content 661 });</pre></p> 662 </div> 663 <div class="event-examples"> 664 <h4>Code examples</h4> 665 <dl class="event-examples-list"> 666 667 <dt> 668 Supply a callback function to handle the <code>change</code> event as an init option. 669 </dt> 670 <dd> 671 <pre><code>$( ".selector" ).accordion({ 672 change: function(event, ui) { ... } 673 });</code></pre> 674 </dd> 675 676 677 <dt> 678 Bind to the <code>change</code> event by type: <code>accordionchange</code>. 679 </dt> 680 <dd> 681 <pre><code>$( ".selector" ).bind( "accordionchange", function(event, ui) { 682 ... 683 });</code></pre> 684 </dd> 685 686 </dl> 687 </div> 688 </li> 689 690 <p> 691 <li class="event" id="event-changestart"> 692 <div class="event-header"> 693 <h3 class="event-name"><a href="#event-changestart">changestart</a></h3> 694 <dl> 695 <dt class="event-type-label">Type:</dt> 696 <dd class="event-type">accordionchangestart</dd> 697 </dl> 698 </div> 699 <div class="event-description"> 700 <p>This event is triggered every time the accordion starts to change. 701 </p> 702 <pre>$('.ui-accordion').bind('accordionchangestart', function(event, ui) { 703 ui.newHeader // jQuery object, activated header 704 ui.oldHeader // jQuery object, previous header 705 ui.newContent // jQuery object, activated content 706 ui.oldContent // jQuery object, previous content 707 });</pre></p> 708 </div> 709 <div class="event-examples"> 710 <h4>Code examples</h4> 711 <dl class="event-examples-list"> 712 713 <dt> 714 Supply a callback function to handle the <code>changestart</code> event as an init option. 715 </dt> 716 <dd> 717 <pre><code>$( ".selector" ).accordion({ 718 changestart: function(event, ui) { ... } 719 });</code></pre> 720 </dd> 721 722 723 <dt> 724 Bind to the <code>changestart</code> event by type: <code>accordionchangestart</code>. 725 </dt> 726 <dd> 727 <pre><code>$( ".selector" ).bind( "accordionchangestart", function(event, ui) { 728 ... 729 });</code></pre> 730 </dd> 731 732 </dl> 733 </div> 734 </li> 735 736 </ul> 737 </div> 738 <div id="methods"> 739 <h2 class="top-header">Methods</h2> 740 <ul class="methods-list"> 741 742 <li class="method" id="method-destroy"> 743 <div class="method-header"> 744 <h3 class="method-name"><a href="#method-destroy">destroy</a></h3> 745 <dl> 746 <dt class="method-signature-label">Signature:</dt> 747 <dd class="method-signature">.accordion( "destroy" 748 749 750 751 752 753 754 755 )</dd> 756 </dl> 757 </div> 758 <div class="method-description"> 759 <p>Remove the accordion functionality completely. This will return the element back to its pre-init state.</p> 760 </div> 761 </li> 762 763 <p> 764 <li class="method" id="method-disable"> 765 <div class="method-header"> 766 <h3 class="method-name"><a href="#method-disable">disable</a></h3> 767 <dl> 768 <dt class="method-signature-label">Signature:</dt> 769 <dd class="method-signature">.accordion( "disable" 770 771 772 773 774 775 776 777 )</dd> 778 </dl> 779 </div> 780 <div class="method-description"> 781 <p>Disable the accordion.</p> 782 </div> 783 </li> 784 785 786 <li class="method" id="method-enable"> 787 <div class="method-header"> 788 <h3 class="method-name"><a href="#method-enable">enable</a></h3> 789 <dl> 790 <dt class="method-signature-label">Signature:</dt> 791 <dd class="method-signature">.accordion( "enable" 792 793 794 795 796 797 798 799 )</dd> 800 </dl> 801 </div> 802 <div class="method-description"> 803 <p>Enable the accordion.</p> 804 </div> 805 </li> 806 807 808 <li class="method" id="method-option"> 809 <div class="method-header"> 810 <h3 class="method-name"><a href="#method-option">option</a></h3> 811 <dl> 812 <dt class="method-signature-label">Signature:</dt> 813 <dd class="method-signature">.accordion( "option" 814 815 , optionName 816 817 , <span class="optional">[</span>value<span class="optional">] </span> 818 819 820 821 )</dd> 822 </dl> 823 </div> 824 <div class="method-description"> 825 <p>Get or set any accordion option. If no value is specified, will act as a getter.</p> 826 </div> 827 </li> 828 829 830 <li class="method" id="method-option"> 831 <div class="method-header"> 832 <h3 class="method-name"><a href="#method-option">option</a></h3> 833 <dl> 834 <dt class="method-signature-label">Signature:</dt> 835 <dd class="method-signature">.accordion( "option" 836 837 , options 838 839 840 841 842 843 )</dd> 844 </dl> 845 </div> 846 <div class="method-description"> 847 <p>Set multiple accordion options at once by providing an options object.</p> 848 </div> 849 </li> 850 851 852 <li class="method" id="method-widget"> 853 <div class="method-header"> 854 <h3 class="method-name"><a href="#method-widget">widget</a></h3> 855 <dl> 856 <dt class="method-signature-label">Signature:</dt> 857 <dd class="method-signature">.accordion( "widget" 858 859 860 861 862 863 864 865 )</dd> 866 </dl> 867 </div> 868 <div class="method-description"> 869 <p>Returns the .ui-accordion element.</p> 870 </div> 871 </li> 872 873 874 <li class="method" id="method-activate"> 875 <div class="method-header"> 876 <h3 class="method-name"><a href="#method-activate">activate</a></h3> 877 <dl> 878 <dt class="method-signature-label">Signature:</dt> 879 <dd class="method-signature">.accordion( "activate" 880 881 , index 882 883 884 885 886 887 )</dd> 888 </dl> 889 </div> 890 <div class="method-description"> 891 <p>Activate a content part of the Accordion programmatically. The index can be a zero-indexed number to match the position of the header to close or a Selector matching an element. Pass <code>false</code> to close all (only possible with <code>collapsible:true</code>).</p> 892 </div> 893 </li> 894 895 </ul> 896 </div> 897 <div id="theming"> 898 <h2 class="top-header">Theming</h2> 899 <p>The jQuery UI Accordion plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. 900 </p> 901 <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.accordion.css stylesheet that can be modified. These classes are highlighed in bold below. 902 </p> 903 904 <h3>Sample markup with jQuery UI CSS Framework classes</h3> 905 <div class="<strong>ui-accordion</strong> ui-widget ui-helper-reset"><br /> 906 <h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-active ui-corner-top"><br /> 907 <span class="ui-icon ui-icon-triangle-1-s"/><br /> 908 <a href="#">Section 1</a><br /> 909 </h3><br /> 910 <div class="<strong>ui-accordion-content</strong> ui-helper-reset ui-widget-content ui-corner-bottom <strong>ui-accordion-content-active</strong>"><br /> 911 Section 1 content<br /> 912 </div><br /> 913 <h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-default ui-corner-all"><br /> 914 <span class="ui-icon ui-icon-triangle-1-e"/><br /> 915 <a href="#">Section 2</a><br /> 916 </h3><br /> 917 <div class="<strong>ui-accordion-content</strong> ui-helper-reset ui-widget-content ui-corner-bottom"><br /> 918 Section 2 content<br /> 919 </div><br /> 920 <h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-default ui-corner-all"><br /> 921 <span class="ui-icon ui-icon-triangle-1-e"/><br /> 922 <a href="#">Section 3</a><br /> 923 </h3><br /> 924 <div class="<strong>ui-accordion-content</strong> ui-helper-reset ui-widget-content ui-corner-bottom"><br /> 925 Section 3 content<br /> 926 </div><br /> 927 </div><br /> 928 <p class="theme-note"> 929 <strong> 930 Note: This is a sample of markup generated by the accordion plugin, not markup you should use to create a accordion. The only markup needed for that is <br /><div><br /> 931    <h3><a href="#">Section 1</a></h3><br /> 932    <div><br /> 933       Section 1 content<br /> 934    </div><br /> 935    <h3><a href="#">Section 2</a></h3><br /> 936    <div><br /> 937       Section 2 content<br /> 938    </div><br /> 939    <h3><a href="#">Section 3</a></h3><br /> 940    <div><br /> 941       Section 3 content<br /> 942    </div><br /> 943 </div>. 944 </strong> 945 </p> 946 947 </div> 948 </div> 949 950 </p><!-- 951 Pre-expand include size: 35459 bytes 952 Post-expand include size: 60792 bytes 953 Template argument size: 34406 bytes 954 Maximum: 2097152 bytes 955 --> 956 957 <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3345-1!1!0!!en!2 and timestamp 20100420211240 -->
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Mon Jul 9 18:01:44 2012 | Cross-referenced by PHPXref 0.7 |