Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Collapsible (set): Added option inset. Adjusted CSS for inset collaps…

…ible (removed -8px margin) and added CSS for non-inset collapsibles. Fixes #3976 - data-inset option for Collapsible / Collapsible sets.
  • Loading branch information...
commit 5428e2a34eef656e56735e5cbd8a162b20af59a5 1 parent d57ab85
@jaspermdegroot jaspermdegroot authored
View
21 css/structure/jquery.mobile.collapsible.css
@@ -1,6 +1,8 @@
-.ui-collapsible { margin: .5em 0; }
-.ui-collapsible-heading { font-size: 16px; display: block; margin: 0 -8px; padding: 0; border-width: 0 0 1px 0; position: relative; }
-.ui-collapsible-heading .ui-btn { text-align: left; margin: 0; }
+.ui-collapsible-inset { margin: .5em 0; }
+.ui-collapsible-heading { font-size: 16px; display: block; margin: 0 -15px; padding: 0; position: relative; }
+.ui-collapsible-inset .ui-collapsible-heading { margin: 0; }
+.ui-collapsible-heading .ui-btn { text-align: left; margin: 0; border-left-width: 0; border-right-width: 0; }
+.ui-collapsible-inset .ui-collapsible-heading .ui-btn { border-right-width: 1px; border-left-width: 1px; }
.ui-collapsible-heading .ui-btn-inner,
.ui-collapsible-heading .ui-btn-icon-left .ui-btn-inner { padding-left: 40px; }
.ui-collapsible-heading .ui-btn-icon-right .ui-btn-inner { padding-left: 12px; padding-right: 40px; }
@@ -13,13 +15,16 @@
.ui-collapsible-heading-status { position: absolute; top: -9999px; left:0px; }
.ui-collapsible-content {
display: block;
- margin: 0 -8px;
- padding: 10px 16px;
- border-top: none; /* Overrides ui-btn-up-* */
- background-image: none; /* Overrides ui-btn-up-* */
- font-weight: normal; /* Overrides ui-btn-up-* */
+ margin: 0 -15px;
+ padding: 10px 15px;
+ border-left-width: 0;
+ border-right-width: 0;
+ border-top: none; /* Overrides ui-body-* */
+ background-image: none; /* Overrides ui-body-* */
}
+.ui-collapsible-inset .ui-collapsible-content { margin: 0; border-right-width: 1px; border-left-width: 1px; }
.ui-collapsible-content-collapsed { display: none; }
.ui-collapsible-set { margin: .5em 0; }
.ui-collapsible-set .ui-collapsible { margin: -1px 0 0; }
+.ui-collapsible-set .ui-collapsible:first-child { margin-top: 0; }
View
24 js/widgets/collapsible.js
@@ -17,6 +17,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
heading: "h1,h2,h3,h4,h5,h6,legend",
theme: null,
contentTheme: null,
+ inset: true,
mini: false,
initSelector: ":jqmData(role='collapsible')"
},
@@ -60,11 +61,22 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
if ( !o.iconPos ) {
o.iconPos = collapsibleSet.jqmData( "iconpos" );
}
-
+ // Inherit the preference for inset from collapsible-set or set the default value to ensure equalty within a set
+ if ( collapsibleSet.jqmData( "inset" ) !== undefined ) {
+ o.inset = collapsibleSet.jqmData( "inset" );
+ } else {
+ o.inset = true;
+ }
+ // Gets the preference for mini in the set
if ( !o.mini ) {
o.mini = collapsibleSet.jqmData( "mini" );
}
}
+
+ if ( !!o.inset ) {
+ collapsible.addClass( "ui-collapsible-inset" );
+ }
+
collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
collapsedIcon = $el.jqmData( "collapsed-icon" ) || o.collapsedIcon || "plus";
@@ -87,8 +99,12 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
mini: o.mini,
theme: o.theme
})
- .add( ".ui-btn-inner", $el )
- .addClass( "ui-corner-top ui-corner-bottom" );
+
+ if ( !!o.inset ) {
+ collapsibleHeading
+ .find( "a" ).first().add( ".ui-btn-inner", $el )
+ .addClass( "ui-corner-top ui-corner-bottom" );
+ }
//events
collapsible
@@ -114,7 +130,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
$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" ) ) ) {
+ if ( contentTheme && !!o.inset && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
collapsibleHeading
.find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
.toggleClass( "ui-corner-bottom", isCollapse );
View
53 js/widgets/collapsibleSet.js
@@ -26,12 +26,13 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
o.contentTheme = $el.jqmData( "content-theme" );
}
- if ( !o.corners ) {
- o.corners = $el.jqmData( "corners" ) === undefined ? true : false;
+ if ( $el.jqmData( "inset" ) !== undefined ) {
+ o.inset = $el.jqmData( "inset" );
}
+ o.inset = o.inset !== undefined ? o.inset : true;
// Initialize the collapsible set if it's not already initialized
- if ( !$el.jqmData( "collapsiblebound" ) ) {
+ if ( !$el.jqmData( "collapsiblebound" ) && !!o.inset ) {
$el
.jqmData( "collapsiblebound", true )
.bind( "expand collapse", function( event ) {
@@ -78,29 +79,31 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
$.mobile.collapsible.prototype.enhance( collapsiblesInSet.not( ".ui-collapsible" ) );
// clean up borders
- collapsiblesInSet.each(function() {
- $( this ).jqmRemoveData( "collapsible-last" )
- .find( $.mobile.collapsible.prototype.options.heading )
- .find( "a" ).first()
- .removeClass( "ui-corner-top ui-corner-bottom" )
- .find( ".ui-btn-inner" )
- .removeClass( "ui-corner-top ui-corner-bottom" );
- });
+ if ( !!o.inset ) {
+ collapsiblesInSet.each(function() {
+ $( this ).jqmRemoveData( "collapsible-last" )
+ .find( $.mobile.collapsible.prototype.options.heading )
+ .find( "a" ).first()
+ .removeClass( "ui-corner-top ui-corner-bottom" )
+ .find( ".ui-btn-inner" )
+ .removeClass( "ui-corner-top ui-corner-bottom" );
+ });
- collapsiblesInSet.first()
- .find( "a" )
- .first()
- .addClass( o.corners ? "ui-corner-top" : "" )
- .find( ".ui-btn-inner" )
- .addClass( "ui-corner-top" );
-
- collapsiblesInSet.last()
- .jqmData( "collapsible-last", true )
- .find( "a" )
- .first()
- .addClass( o.corners ? "ui-corner-bottom" : "" )
- .find( ".ui-btn-inner" )
- .addClass( "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" );
+ }
}
});
Please sign in to comment.
Something went wrong with that request. Please try again.