library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accordion: Style updates

Browse Source 
Ref #14246
Ref gh-1588
This commit is contained in:
Alexander Schmitz 2015-08-21 00:12:07 -04:00
parent 8029cc94e1
commit 009850abbf
7 changed files with 200 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tests/unit/accordion/common.js
View File

@ -22,7 +22,7 @@ common.testWidget( "accordion", {
"header": "ui-icon-triangle-1-e"
},
// callbacks
// Callbacks
activate: null,
beforeActivate: null,
create: null

2
tests/unit/accordion/events.js
View File

@ -154,7 +154,7 @@ test( "activate", function() {
} );
element.accordion( "option", "active", false );
// prevent activation
// Prevent activation
element.one( "accordionbeforeactivate", function( event ) {
ok( true );
event.preventDefault();

25
tests/unit/accordion/methods.js
View File

@ -28,10 +28,11 @@ test( "enable/disable", function( assert ) {
equal( element.attr( "aria-disabled" ), "true", "element gets aria-disabled" );
assert.hasClasses( element, "ui-accordion-disabled" );
// event does nothing
// Event does nothing
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "click" );
state( element, 1, 0, 0 );
// option still works
// Option still works
element.accordion( "option", "active", 1 );
state( element, 0, 1, 0 );
element.accordion( "enable" );
@ -58,29 +59,29 @@ test( "refresh", function() {
element.accordion();
state( element, 1, 0, 0 );
// disable panel via markup
// Disable panel via markup
element.find( "h3.bar" ).eq( 1 ).addClass( "ui-state-disabled" );
element.accordion( "refresh" );
state( element, 1, 0, 0 );
// don't add multiple icons
// Don't add multiple icons
element.accordion( "refresh" );
equal( element.find( ".ui-accordion-header-icon" ).length, 3 );
// add a panel
// Add a panel
element
.append( "<h3 class='bar' id='new_1'>new 1</h3>" )
.append( "<div class='foo' id='new_1_panel'>new 1</div>" );
element.accordion( "refresh" );
state( element, 1, 0, 0, 0 );
// remove all tabs
// Remove all tabs
element.find( "h3.bar, div.foo" ).remove();
element.accordion( "refresh" );
state( element );
equal( element.accordion( "option", "active" ), false, "no active accordion panel" );
// add panels
// Add panels
element
.append( "<h3 class='bar' id='new_2'>new 2</h3>" )
.append( "<div class='foo' id='new_2_panel'>new 2</div>" )
@ -93,29 +94,29 @@ test( "refresh", function() {
element.accordion( "refresh" );
state( element, 1, 0, 0, 0 );
// activate third tab
// Activate third tab
element.accordion( "option", "active", 2 );
state( element, 0, 0, 1, 0 );
// remove fourth panel, third panel should stay active
// Remove fourth panel, third panel should stay active
element.find( "h3.bar" ).eq( 3 ).remove();
element.find( "div.foo" ).eq( 3 ).remove();
element.accordion( "refresh" );
state( element, 0, 0, 1 );
// remove third (active) panel, second panel should become active
// Remove third (active) panel, second panel should become active
element.find( "h3.bar" ).eq( 2 ).remove();
element.find( "div.foo" ).eq( 2 ).remove();
element.accordion( "refresh" );
state( element, 0, 1 );
// remove first panel, previously active panel (now first) should stay active
// Remove first panel, previously active panel (now first) should stay active
element.find( "h3.bar" ).eq( 0 ).remove();
element.find( "div.foo" ).eq( 0 ).remove();
element.accordion( "refresh" );
state( element, 1 );
// collapse all panels
// Collapse all panels
element.accordion( "option", {
collapsible: true,
active: false

28
tests/unit/accordion/options.js
View File

@ -115,7 +115,8 @@ asyncTest( "{ animate: Number }", function() {
} ),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
// Called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, 100, "correct duration" );
equal( options.easing, undefined, "default easing" );
@ -139,7 +140,8 @@ asyncTest( "{ animate: String }", function() {
} ),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
// Called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, undefined, "default duration" );
equal( options.easing, "linear", "correct easing" );
@ -163,7 +165,8 @@ asyncTest( "{ animate: {} }", function() {
} ),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
// Called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, undefined, "default duration" );
equal( options.easing, undefined, "default easing" );
@ -187,7 +190,8 @@ asyncTest( "{ animate: { duration, easing } }", function() {
} ),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
// Called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, 100, "correct duration" );
equal( options.easing, "linear", "correct easing" );
@ -212,7 +216,8 @@ asyncTest( "{ animate: { duration, easing } }, animate down", function() {
} ),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
// Called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, 100, "correct duration" );
equal( options.easing, "linear", "correct easing" );
@ -243,7 +248,8 @@ asyncTest( "{ animate: { duration, easing, down } }, animate down", function() {
} ),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
// Called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, 100, "correct duration" );
equal( options.easing, "swing", "correct easing" );
@ -305,7 +311,7 @@ test( "{ event: null }", function() {
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
// ensure default click handler isn't bound
// Ensure default click handler isn't bound
element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "click" );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
@ -322,7 +328,7 @@ test( "{ event: custom }", function() {
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
// ensure default click handler isn't bound
// Ensure default click handler isn't bound
element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "click" );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
@ -333,7 +339,7 @@ test( "{ event: custom }", function() {
element.accordion( "option", "event", "custom3" );
// ensure old event handlers are unbound
// Ensure old event handlers are unbound
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" );
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom2" );
equal( element.accordion( "option", "active" ), 2 );
@ -346,9 +352,11 @@ test( "{ event: custom }", function() {
test( "{ header: default }", function() {
expect( 2 );
// default: > li > :first-child,> :not(li):even
// Default: > li > :first-child,> :not(li):even
// > :not(li):even
state( $( "#list1" ).accordion(), 1, 0, 0 );
// > li > :first-child
state( $( "#navigation" ).accordion(), 1, 0, 0 );
} );

26
ui/widgets/accordion.js
View File

@ -53,7 +53,7 @@ return $.widget( "ui.accordion", {
header: "ui-icon-triangle-1-e"
},
// callbacks
// Callbacks
activate: null,
beforeActivate: null
},
@ -81,7 +81,7 @@ return $.widget( "ui.accordion", {
this._addClass( "ui-accordion", "ui-widget ui-helper-reset" );
this.element.attr( "role", "tablist" );
// don't allow collapsible: false and active: false / null
// Don't allow collapsible: false and active: false / null
if ( !options.collapsible && ( options.active === false || options.active == null ) ) {
options.active = 0;
}
@ -124,17 +124,17 @@ return $.widget( "ui.accordion", {
_destroy: function() {
var contents;
// clean up main element
// Clean up main element
this.element.removeAttr( "role" );
// clean up headers
// Clean up headers
this.headers
.removeAttr( "role aria-expanded aria-selected aria-controls tabIndex" )
.removeUniqueId();
this._destroyIcons();
// clean up content panels
// Clean up content panels
contents = this.headers.next()
.css( "display", "" )
.removeAttr( "role aria-hidden aria-labelledby" )
@ -161,7 +161,7 @@ return $.widget( "ui.accordion", {
this._super( key, value );
// setting collapsible: false while collapsed; open first panel
// Setting collapsible: false while collapsed; open first panel
if ( key === "collapsible" && !value && this.options.active === false ) {
this._activate( 0 );
}
@ -234,7 +234,7 @@ return $.widget( "ui.accordion", {
var options = this.options;
this._processPanels();
// was collapsed or no panel
// Was collapsed or no panel
if ( ( options.active === false && options.collapsible === true ) || !this.headers.length ) {
options.active = false;
this.active = $();
@ -318,7 +318,7 @@ return $.widget( "ui.accordion", {
} )
.hide();
// make sure at least one header is in the tab order
// Make sure at least one header is in the tab order
if ( !this.active.length ) {
this.headers.eq( 0 ).attr( "tabIndex", 0 );
} else {
@ -372,12 +372,12 @@ return $.widget( "ui.accordion", {
_activate: function( index ) {
var active = this._findActive( index )[ 0 ];
// trying to activate the already active panel
// Trying to activate the already active panel
if ( active === this.active[ 0 ] ) {
return;
}
// trying to collapse, simulate a click on the currently active header
// Trying to collapse, simulate a click on the currently active header
active = active || this.active[ 0 ];
this._eventHandler( {
@ -436,12 +436,12 @@ return $.widget( "ui.accordion", {
options.active = collapsing ? false : this.headers.index( clicked );
// when the call to ._toggle() comes after the class changes
// When the call to ._toggle() comes after the class changes
// it causes a very odd bug in IE 8 (see #6720)
this.active = clickedIsActive ? $() : clicked;
this._toggle( eventData );
// switch classes
// Switch classes
// corner classes on the previously active header stay after the animation
this._removeClass( active, "ui-accordion-header-active", "ui-state-active" );
if ( options.icons ) {
@ -467,7 +467,7 @@ return $.widget( "ui.accordion", {
var toShow = data.newPanel,
toHide = this.prevShow.length ? this.prevShow : data.oldPanel;
// handle activating a panel during the animation for another activation
// Handle activating a panel during the animation for another activation
this.prevShow.add( this.prevHide ).stop( true, true );
this.prevShow = toShow;
this.prevHide = toHide;