Decoupled collapsible and collapsible set #3010

Merged
merged 5 commits into from Nov 17, 2011
View
1 js/index.php
@@ -18,6 +18,7 @@
'jquery.mobile.dialog.js',
'jquery.mobile.page.sections.js',
'jquery.mobile.collapsible.js',
+ 'jquery.mobile.collapsibleSet.js',
'jquery.mobile.fieldContain.js',
'jquery.mobile.grid.js',
'jquery.mobile.navbar.js',
View
52 js/jquery.mobile.collapsible.js
@@ -22,8 +22,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
collapsible = $el.addClass( "ui-collapsible" ),
collapsibleHeading = $el.children( o.heading ).first(),
collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
- collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ),
- collapsiblesInSet = collapsibleSet.children( ":jqmData(role='collapsible')" );
+ collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" );
// Replace collapsibleHeading if it's a legend
if ( collapsibleHeading.is( "legend" ) ) {
@@ -60,52 +59,9 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
iconPos: "left",
icon: "plus",
theme: o.theme
- });
-
- if ( !collapsibleSet.length ) {
- collapsibleHeading
- .find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
- .addClass( "ui-corner-top ui-corner-bottom" );
- } else {
- // If we are in a collapsible set
-
- // Initialize the collapsible set if it's not already initialized
- if ( !collapsibleSet.jqmData( "collapsiblebound" ) ) {
-
- collapsibleSet
- .jqmData( "collapsiblebound", true )
- .bind( "expand", function( event ) {
-
- $( event.target )
- .closest( ".ui-collapsible" )
- .siblings( ".ui-collapsible" )
- .trigger( "collapse" );
-
- });
- }
-
- collapsiblesInSet.first()
- .find( "a" )
- .first()
- .addClass( "ui-corner-top" )
- .find( ".ui-btn-inner" )
- .addClass( "ui-corner-top" );
-
- collapsiblesInSet.last()
- .jqmData( "collapsible-last", true )
- .find( "a" )
- .first()
- .addClass( "ui-corner-bottom" )
- .find( ".ui-btn-inner" )
- .addClass( "ui-corner-bottom" );
-
-
- if ( collapsible.jqmData( "collapsible-last" ) ) {
- collapsibleHeading
- .find( "a" ).first().add ( collapsibleHeading.find( ".ui-btn-inner" ) )
- .addClass( "ui-corner-bottom" );
- }
- }
+ })
+ .add( ".ui-btn-inner" )
+ .addClass( "ui-corner-top ui-corner-bottom" );
//events
collapsible
View
82 js/jquery.mobile.collapsibleSet.js
@@ -0,0 +1,82 @@
+/*
+* "collapsibleset" plugin
+*/
+
+(function( $, undefined ) {
+
+$.widget( "mobile.collapsibleset", $.mobile.widget, {
+ options: {
+ initSelector: ":jqmData(role='collapsible-set')"
+ },
+ _create: function() {
+ var $el = this.element.addClass( "ui-collapsible-set" ),
+ o = this.options,
+ collapsiblesInSet = $el.children( ":jqmData(role='collapsible')" );
+
+ // Inherit the theme from collapsible-set
+ if ( !o.theme ) {
+ o.theme = $el.jqmData( "theme" );
+ }
+ // Inherit the content-theme from collapsible-set
+ if ( !o.contentTheme ) {
+ o.contentTheme = $el.jqmData( "content-theme" );
+ }
+
+ // Initialize the collapsible set if it's not already initialized
+ if ( !$el.jqmData( "collapsiblebound" ) ) {
+
+ $el
+ .jqmData( "collapsiblebound", true )
+ .bind( "expand collapse", function( event ) {
+ var isCollapse = ( event.type === "collapse" ),
+ collapsible = $( event.target ).closest( ".ui-collapsible" ),
+ widget = collapsible.data( "collapsible" ),
+ contentTheme = widget.options.contentTheme;
+ if ( contentTheme && collapsible.jqmData( "collapsible-last" ) ) {
+ collapsible.find( widget.options.heading ).first()
+ .find( "a" ).first()
+ .add( ".ui-btn-inner" )
+ .toggleClass( "ui-corner-bottom", isCollapse );
+ collapsible.find( ".ui-collapsible-content" ).toggleClass( "ui-corner-bottom", !isCollapse );
+ }
+ })
+ .bind( "expand", function( event ) {
+ $( event.target )
+ .closest( ".ui-collapsible" )
+ .siblings( ".ui-collapsible" )
+ .trigger( "collapse" );
+
+ });
+
+ // clean up borders
+ collapsiblesInSet.each( function() {
+ $( this ).find( $.mobile.collapsible.prototype.options.heading )
+ .find( "a" ).first()
+ .add( ".ui-btn-inner" )
+ .removeClass( "ui-corner-top ui-corner-bottom" );
+ });
+
+ collapsiblesInSet.first()
+ .find( "a" )
+ .first()
+ .addClass( "ui-corner-top" )
+ .find( ".ui-btn-inner" )
+ .addClass( "ui-corner-top" );
+
+ collapsiblesInSet.last()
+ .jqmData( "collapsible-last", true )
+ .find( "a" )
+ .first()
+ .addClass( "ui-corner-bottom" )
+ .find( ".ui-btn-inner" )
+ .addClass( "ui-corner-bottom" );
+ }
+ }
+});
+
+//auto self-init widgets
+$( document ).bind( "pagecreate create", function( e ){
+ $( $.mobile.collapsibleset.prototype.options.initSelector, e.target ).collapsibleset();
+});
+
+})( jQuery );