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

Decoupled collapsible and collapsible-set

Browse source 
That fixes issue #2905 as well
This commit is contained in:
Ghislain Seguin 2011-11-09 18:01:51 -08:00
parent 94389bdcad
commit 6d4274fd6c
3 changed files with 85 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
js/index.php
View file

@ -18,6 +18,7 @@ $files = array(
'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',

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

@ -59,10 +59,12 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
iconPos: "left",
icon: "plus",
theme: o.theme
});
})
.add( ".ui-btn-inner" )
.addClass( "ui-corner-top ui-corner-bottom" );
collapsibleHeading
.find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
.find( "a:eq(0), .ui-btn-inner" )
.addClass( "ui-corner-top ui-corner-bottom" );
//events

80
js/jquery.mobile.collapsibleSet.js Normal file
View file

@ -0,0 +1,80 @@
/*
* "collapsibleset" plugin
*/
(function( $, undefined ) {
$.widget( "mobile.collapsibleset", $.mobile.widget, {
options: {
initSelector: ":jqmData(role='collapsible-set')"
},
_create: function() {
console.debug( "collapsibleset.create()" );
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" );
}
$el.find( ".ui-collapsible-content" ).addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
// 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 ).eq( 0 )
.find( "a:eq(0), .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:eq(0), .ui-btn-inner" )
.removeClass( "ui-corner-top ui-corner-bottom" );
});
collapsiblesInSet.first()
.find( "a:eq(0)" )
.addClass( "ui-corner-top" )
.find( ".ui-btn-inner" )
.addClass( "ui-corner-top" );
collapsiblesInSet.last()
.jqmData( "collapsible-last", true )
.find( "a:eq(0)" )
.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 );