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

Fix for #1899:

Browse source 
Re-styled collapsible and collapsible set so the content of the collapsible now is applied the ui-btn-up-%%theme%% class. This way the border will match the border of the header button. In the meantime in the ui-collapsible-content class we remove the background image and tweak the margin/padding to make everything look good.
Combined the expand/collapse handlers into a single one and made extensive use of .toggleClass()
This commit is contained in:
gseguin 2011-09-14 16:02:47 -07:00
parent 8c8d66781f
commit e6eaf7cacd
2 changed files with 27 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -20,6 +20,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
var $el = this.element,
o = this.options,
expandedCls = "ui-btn-up-" + (o.theme || "c"),
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" ),
@ -40,7 +41,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
.wrapInner( "<a href='#' class='ui-collapsible-heading-toggle'></a>" )
.find( "a:eq(0)" )
.buttonMarkup({
shadow: !collapsibleParent.length,
shadow: false,
corners: false,
iconPos: "left",
icon: "plus",
@ -58,10 +59,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
if ( !collapsibleParent.length ) {
collapsibleHeading
.find( "a:eq(0)" )
.addClass( "ui-corner-all" )
.find( ".ui-btn-inner" )
.addClass( "ui-corner-all" );
.find( "a:eq(0), .ui-btn-inner" )
.addClass( "ui-corner-top ui-corner-bottom" );
} else {
if ( collapsible.jqmData( "collapsible-last" ) ) {
collapsibleHeading
@ -72,50 +71,31 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
//events
collapsible
.bind( "collapse", function( event ) {
if ( ! event.isDefaultPrevented() &&
$( event.target ).closest( ".ui-collapsible" ).is( collapsible ) ) {
event.preventDefault();
collapsibleHeading
.addClass( "ui-collapsible-heading-collapsed" )
.find( ".ui-collapsible-heading-status" )
.text( o.expandCueText )
.end()
.find( ".ui-icon" )
.removeClass( "ui-icon-minus" )
.addClass( "ui-icon-plus" );
collapsible.toggleClass( "ui-collapsible-collapsed", true );
collapsibleContent.addClass( "ui-collapsible-content-collapsed" ).attr( "aria-hidden", true );
if ( collapsible.jqmData( "collapsible-last" ) ) {
collapsibleHeading
.find( "a:eq(0), .ui-btn-inner" )
.addClass( "ui-corner-bottom" );
}
}
})
.bind( "expand", function( event ) {
.bind( "expand collapse", function( event ) {
if ( !event.isDefaultPrevented() ) {
event.preventDefault();
var isCollapse = ( event.type === "collapse" );
collapsibleHeading
.removeClass( "ui-collapsible-heading-collapsed" )
.find( ".ui-collapsible-heading-status" ).text( o.collapseCueText );
.toggleClass( "ui-collapsible-heading-collapsed", isCollapse)
.find( ".ui-collapsible-heading-status" )
.text( o.expandCueText )
.end()
.find( ".ui-icon" )
.toggleClass( "ui-icon-minus", !isCollapse )
.toggleClass( "ui-icon-plus", isCollapse );
collapsibleHeading.find( ".ui-icon" ).removeClass( "ui-icon-plus" ).addClass( "ui-icon-minus" );
collapsible.toggleClass( "ui-collapsible-collapsed", false );
collapsibleContent.removeClass( "ui-collapsible-content-collapsed" ).attr( "aria-hidden", false );
if ( collapsible.jqmData( "collapsible-last" ) ) {
collapsible.toggleClass( "ui-collapsible-collapsed", isCollapse );
collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
collapsibleContent.toggleClass( expandedCls, !isCollapse );
if ( !collapsibleParent.length || collapsible.jqmData( "collapsible-last" ) ) {
collapsibleHeading
.find( "a:eq(0), .ui-btn-inner" )
.removeClass( "ui-corner-bottom" );
.toggleClass( "ui-corner-bottom", isCollapse );
collapsibleContent.toggleClass( "ui-corner-bottom", !isCollapse );
}
}
})

8
themes/default/jquery.mobile.collapsible.css
View file

@ -11,7 +11,13 @@
.ui-collapsible-heading a span.ui-btn .ui-btn-inner { padding: 10px 0; }
.ui-collapsible-heading a span.ui-btn .ui-icon { left: 0; margin-top: -10px; }
.ui-collapsible-heading-status { position:absolute; left:-9999px; }
.ui-collapsible-content { display: block; padding: 10px 0 10px 8px; }
.ui-collapsible-content {
border-top: none;
display: block;
margin: 0 -8px;
padding: 10px 16px;
background-image: none;
}
.ui-collapsible-content-collapsed { display: none; }
.ui-collapsible-set { margin: .5em 0; }