mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-29 04:00:32 +00:00
773497b501
- Fixed header/footer code now listens for a custom event "contentmodified" on the document to figure out if it should be repositioned or not. Modified collapsible and listview to fire off contentmodified whenever they modify content. Developers can also fire off this event to trigger position updates for fixed headers/footers, so this could be used to address issue #2042 and the mention of collapsible in #2596.
161 lines
4.8 KiB
JavaScript
161 lines
4.8 KiB
JavaScript
/*
|
|
* jQuery Mobile Framework : "collapsible" plugin
|
|
* Copyright (c) jQuery Project
|
|
* Dual licensed under the MIT or GPL Version 2 licenses.
|
|
* http://jquery.org/license
|
|
*/
|
|
(function( $, undefined ) {
|
|
|
|
$.widget( "mobile.collapsible", $.mobile.widget, {
|
|
options: {
|
|
expandCueText: " click to expand contents",
|
|
collapseCueText: " click to collapse contents",
|
|
collapsed: true,
|
|
heading: ">:header,>legend",
|
|
theme: null,
|
|
contentTheme: null,
|
|
iconTheme: "d",
|
|
initSelector: ":jqmData(role='collapsible')"
|
|
},
|
|
_create: function() {
|
|
|
|
var $el = this.element,
|
|
o = this.options,
|
|
collapsible = $el.addClass( "ui-collapsible" ),
|
|
collapsibleHeading = $el.find( o.heading ).eq( 0 ),
|
|
collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
|
|
collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ),
|
|
colllapsiblesInSet = collapsibleSet.children( ":jqmData(role='collapsible')" );
|
|
|
|
// Replace collapsibleHeading if it's a legend
|
|
if ( collapsibleHeading.is( "legend" ) ) {
|
|
collapsibleHeading = $( "<div role='heading'>"+ collapsibleHeading.html() +"</div>" ).insertBefore( collapsibleHeading );
|
|
collapsibleHeading.next().remove();
|
|
}
|
|
|
|
// If we are in a collapsible set
|
|
if ( collapsibleSet.length ) {
|
|
// Inherit the theme from collapsible-set
|
|
if ( !o.theme ) {
|
|
o.theme = collapsibleSet.jqmData( "theme" );
|
|
}
|
|
// Inherit the content-theme from collapsible-set
|
|
if ( !o.contentTheme ) {
|
|
o.contentTheme = collapsibleSet.jqmData( "content-theme" );
|
|
}
|
|
}
|
|
|
|
collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
|
|
|
|
collapsibleHeading
|
|
//drop heading in before content
|
|
.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>" )
|
|
.find( "a:eq(0)" )
|
|
.buttonMarkup({
|
|
shadow: false,
|
|
corners: false,
|
|
iconPos: "left",
|
|
icon: "plus",
|
|
theme: o.theme
|
|
});
|
|
|
|
if ( !collapsibleSet.length ) {
|
|
collapsibleHeading
|
|
.find( "a:eq(0), .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" );
|
|
|
|
});
|
|
}
|
|
|
|
colllapsiblesInSet.first()
|
|
.find( "a:eq(0)" )
|
|
.addClass( "ui-corner-top" )
|
|
.find( ".ui-btn-inner" )
|
|
.addClass( "ui-corner-top" );
|
|
|
|
colllapsiblesInSet.last()
|
|
.jqmData( "collapsible-last", true )
|
|
.find( "a:eq(0)" )
|
|
.addClass( "ui-corner-bottom" )
|
|
.find( ".ui-btn-inner" )
|
|
.addClass( "ui-corner-bottom" );
|
|
|
|
|
|
if ( collapsible.jqmData( "collapsible-last" ) ) {
|
|
collapsibleHeading
|
|
.find( "a:eq(0), .ui-btn-inner" )
|
|
.addClass( "ui-corner-bottom" );
|
|
}
|
|
}
|
|
|
|
//events
|
|
collapsible
|
|
.bind( "expand collapse", function( event ) {
|
|
if ( !event.isDefaultPrevented() ) {
|
|
|
|
event.preventDefault();
|
|
|
|
var $this = $( this ),
|
|
isCollapse = ( event.type === "collapse" ),
|
|
contentTheme = o.contentTheme;
|
|
|
|
collapsibleHeading
|
|
.toggleClass( "ui-collapsible-heading-collapsed", isCollapse)
|
|
.find( ".ui-collapsible-heading-status" )
|
|
.text( isCollapse ? o.expandCueText : o.collapseCueText )
|
|
.end()
|
|
.find( ".ui-icon" )
|
|
.toggleClass( "ui-icon-minus", !isCollapse )
|
|
.toggleClass( "ui-icon-plus", isCollapse );
|
|
|
|
$this.toggleClass( "ui-collapsible-collapsed", isCollapse );
|
|
collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
|
|
|
|
if ( contentTheme && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
|
|
collapsibleHeading
|
|
.find( "a:eq(0), .ui-btn-inner" )
|
|
.toggleClass( "ui-corner-bottom", isCollapse );
|
|
collapsibleContent.toggleClass( "ui-corner-bottom", !isCollapse );
|
|
}
|
|
collapsibleContent.trigger( "contentmodified" );
|
|
}
|
|
})
|
|
.trigger( o.collapsed ? "collapse" : "expand" );
|
|
|
|
collapsibleHeading
|
|
.bind( "click", function( event ) {
|
|
|
|
var type = collapsibleHeading.is( ".ui-collapsible-heading-collapsed" ) ?
|
|
"expand" : "collapse";
|
|
|
|
collapsible.trigger( type );
|
|
|
|
event.preventDefault();
|
|
});
|
|
}
|
|
});
|
|
|
|
//auto self-init widgets
|
|
$( document ).bind( "pagecreate create", function( e ){
|
|
$( $.mobile.collapsible.prototype.options.initSelector, e.target ).collapsible();
|
|
});
|
|
|
|
})( jQuery );
|