Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-24 08:04:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #1952 from rwldrn/jquery.mobile.collapsible.js

Browse source 
jQuery core style guide conformance: jquery.mobile.collapsible.js
This commit is contained in:
Kin Blas 2011-06-28 16:21:47 -07:00
commit ddb06761b0
1 changed files with 41 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
js/jquery.mobile.collapsible.js
View file

@ -4,7 +4,8 @@
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
( function( $, undefined ) {
(function( $, undefined ) {
$.widget( "mobile.collapsible", $.mobile.widget, {
options: {
expandCueText: " click to expand contents",
@ -20,12 +21,12 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
o = this.options,
collapsibleContain = $el.addClass( "ui-collapsible-contain" ),
collapsibleHeading = $el.find( o.heading ).eq( 0 ),
collapsibleContent = collapsibleContain.wrapInner( '<div class="ui-collapsible-content"></div>' ).find( ".ui-collapsible-content" ),
collapsibleContent = collapsibleContain.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
collapsibleParent = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" );
//replace collapsibleHeading if it's a legend
// Replace collapsibleHeading if it's a legend
if ( collapsibleHeading.is( "legend" ) ) {
collapsibleHeading = $( '<div role="heading">'+ collapsibleHeading.html() +"</div>" ).insertBefore( collapsibleHeading );
collapsibleHeading = $( "<div role='heading'>"+ collapsibleHeading.html() +"</div>" ).insertBefore( collapsibleHeading );
collapsibleHeading.next().remove();
}
@ -34,34 +35,33 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
.insertBefore( collapsibleContent )
//modify markup & attributes
.addClass( "ui-collapsible-heading" )
.append( '<span class="ui-collapsible-heading-status"></span>' )
.wrapInner( '<a href="#" class="ui-collapsible-heading-toggle"></a>' )
.append( "<span class='ui-collapsible-heading-status'></span>" )
.wrapInner( "<a href='#' class='ui-collapsible-heading-toggle'></a>" )
.find( "a:eq(0)" )
.buttonMarkup( {
.buttonMarkup({
shadow: !collapsibleParent.length,
corners: false,
iconPos: "left",
icon: "plus",
theme: o.theme
} )
})
.find( ".ui-icon" )
.removeAttr( "class" )
.buttonMarkup( {
.buttonMarkup({
shadow: true,
corners: true,
iconPos: "notext",
icon: "plus",
theme: o.iconTheme
} );
});
if ( ! collapsibleParent.length ) {
if ( !collapsibleParent.length ) {
collapsibleHeading
.find( "a:eq(0)" )
.addClass( "ui-corner-all" )
.find( ".ui-btn-inner" )
.addClass( "ui-corner-all" );
}
else {
} else {
if ( collapsibleContain.jqmData( "collapsible-last" ) ) {
collapsibleHeading
.find( "a:eq(0), .ui-btn-inner" )
@ -72,8 +72,11 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
//events
collapsibleContain
.bind( "collapse", function( event ) {
if ( ! event.isDefaultPrevented() && $( event.target ).closest( ".ui-collapsible-contain" ).is( collapsibleContain ) ) {
if ( ! event.isDefaultPrevented() &&
$( event.target ).closest( ".ui-collapsible-contain" ).is( collapsibleContain ) ) {
event.preventDefault();
collapsibleHeading
.addClass( "ui-collapsible-heading-collapsed" )
.find( ".ui-collapsible-heading-status" )
@ -82,6 +85,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
.find( ".ui-icon" )
.removeClass( "ui-icon-minus" )
.addClass( "ui-icon-plus" );
collapsibleContent.addClass( "ui-collapsible-content-collapsed" ).attr( "aria-hidden", true );
if ( collapsibleContain.jqmData( "collapsible-last" ) ) {
@ -90,41 +94,43 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
.addClass( "ui-corner-bottom" );
}
}
})
.bind( "expand", function( event ) {
if ( !event.isDefaultPrevented() ) {
} )
.bind( "expand", function( event ) {
if ( ! event.isDefaultPrevented() ) {
event.preventDefault();
collapsibleHeading
.removeClass( "ui-collapsible-heading-collapsed" )
.find( ".ui-collapsible-heading-status" ).text( o.collapseCueText );
collapsibleHeading.find( ".ui-icon" ).removeClass( "ui-icon-plus" ).addClass( "ui-icon-minus" );
collapsibleContent.removeClass( "ui-collapsible-content-collapsed" ).attr( "aria-hidden", false );
if ( collapsibleContain.jqmData( "collapsible-last" ) ) {
collapsibleHeading
.find( "a:eq(0), .ui-btn-inner" )
.removeClass( "ui-corner-bottom" );
}
}
} )
})
.trigger( o.collapsed ? "collapse" : "expand" );
//close others in a set
// Close others in a set
if ( collapsibleParent.length && !collapsibleParent.jqmData( "collapsiblebound" ) ) {
collapsibleParent
.jqmData( "collapsiblebound", true )
.bind( "expand", function( event ){
.bind( "expand", function( event ) {
$( event.target )
.closest( ".ui-collapsible-contain" )
.siblings( ".ui-collapsible-contain" )
.trigger( "collapse" );
} );
});
var set = collapsibleParent.find( ":jqmData(role='collapsible'):first" );
@ -138,15 +144,15 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
}
collapsibleHeading
.bind( "vclick", function( e ) {
if ( collapsibleHeading.is( ".ui-collapsible-heading-collapsed" ) ) {
collapsibleContain.trigger( "expand" );
}
else {
collapsibleContain.trigger( "collapse" );
}
e.preventDefault();
} );
.bind( "vclick", function( event ) {
var type = collapsibleHeading.is( ".ui-collapsible-heading-collapsed" ) ?
"expand" : "collapse";
collapsibleContain.trigger( type );
event.preventDefault();
});
}
} );
} )( jQuery );
});
})( jQuery );