Skip to content
This repository
Browse code

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
Jasper de Groot authored July 23, 2012
21  css/structure/jquery.mobile.collapsible.css
... ...
@@ -1,6 +1,8 @@
1  
-.ui-collapsible { margin: .5em 0; }
2  
-.ui-collapsible-heading { font-size: 16px; display: block; margin: 0 -8px; padding: 0; border-width: 0 0 1px 0; position: relative; }
3  
-.ui-collapsible-heading .ui-btn { text-align: left; margin: 0; }
  1
+.ui-collapsible-inset { margin: .5em 0; }
  2
+.ui-collapsible-heading { font-size: 16px; display: block; margin: 0 -15px; padding: 0; position: relative; }
  3
+.ui-collapsible-inset .ui-collapsible-heading { margin: 0; }
  4
+.ui-collapsible-heading .ui-btn { text-align: left; margin: 0; border-left-width: 0; border-right-width: 0; }
  5
+.ui-collapsible-inset .ui-collapsible-heading .ui-btn { border-right-width: 1px; border-left-width: 1px; }
4 6
 .ui-collapsible-heading .ui-btn-inner,
5 7
 .ui-collapsible-heading .ui-btn-icon-left .ui-btn-inner { padding-left: 40px; }
6 8
 .ui-collapsible-heading .ui-btn-icon-right .ui-btn-inner { padding-left: 12px; padding-right: 40px; }
@@ -13,13 +15,16 @@
13 15
 .ui-collapsible-heading-status { position: absolute; top: -9999px; left:0px; }
14 16
 .ui-collapsible-content {
15 17
 	display: block;
16  
-	margin:  0 -8px;
17  
-	padding: 10px 16px;
18  
-	border-top:  none;      /* Overrides ui-btn-up-* */
19  
-	background-image: none; /* Overrides ui-btn-up-* */
20  
-	font-weight: normal;    /* Overrides ui-btn-up-* */
  18
+	margin: 0 -15px;	
  19
+	padding: 10px 15px;
  20
+	border-left-width: 0;
  21
+	border-right-width: 0;
  22
+	border-top: none;      /* Overrides ui-body-* */
  23
+	background-image: none; /* Overrides ui-body-* */
21 24
 }
  25
+.ui-collapsible-inset .ui-collapsible-content { margin: 0; border-right-width: 1px; border-left-width: 1px; }
22 26
 .ui-collapsible-content-collapsed { display: none; }
23 27
 
24 28
 .ui-collapsible-set { margin: .5em 0; }
25 29
 .ui-collapsible-set .ui-collapsible { margin: -1px 0 0; }
  30
+.ui-collapsible-set .ui-collapsible:first-child { margin-top: 0; }
24  js/widgets/collapsible.js
@@ -17,6 +17,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
17 17
 		heading: "h1,h2,h3,h4,h5,h6,legend",
18 18
 		theme: null,
19 19
 		contentTheme: null,
  20
+		inset: true,
20 21
 		mini: false,
21 22
 		initSelector: ":jqmData(role='collapsible')"
22 23
 	},
@@ -60,11 +61,22 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
60 61
 			if ( !o.iconPos ) {
61 62
 				o.iconPos = collapsibleSet.jqmData( "iconpos" );
62 63
 			}
63  
-
  64
+			// Inherit the preference for inset from collapsible-set or set the default value to ensure equalty within a set
  65
+			if ( collapsibleSet.jqmData( "inset" ) !== undefined ) {
  66
+				o.inset = collapsibleSet.jqmData( "inset" );
  67
+			} else {
  68
+				o.inset = true;
  69
+			}
  70
+			// Gets the preference for mini in the set
64 71
 			if ( !o.mini ) {
65 72
 				o.mini = collapsibleSet.jqmData( "mini" );
66 73
 			}
67 74
 		}
  75
+		
  76
+		if ( !!o.inset ) {
  77
+			collapsible.addClass( "ui-collapsible-inset" );
  78
+		}
  79
+		
68 80
 		collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
69 81
 
70 82
 		collapsedIcon = $el.jqmData( "collapsed-icon" ) || o.collapsedIcon || "plus";
@@ -87,8 +99,12 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
87 99
 					mini: o.mini,
88 100
 					theme: o.theme
89 101
 				})
90  
-			.add( ".ui-btn-inner", $el )
91  
-				.addClass( "ui-corner-top ui-corner-bottom" );
  102
+
  103
+		if ( !!o.inset ) {				
  104
+			collapsibleHeading
  105
+				.find( "a" ).first().add( ".ui-btn-inner", $el )
  106
+					.addClass( "ui-corner-top ui-corner-bottom" );
  107
+		}
92 108
 
93 109
 		//events
94 110
 		collapsible
@@ -114,7 +130,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
114 130
 					$this.toggleClass( "ui-collapsible-collapsed", isCollapse );
115 131
 					collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
116 132
 
117  
-					if ( contentTheme && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
  133
+					if ( contentTheme && !!o.inset && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
118 134
 						collapsibleHeading
119 135
 							.find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
120 136
 							.toggleClass( "ui-corner-bottom", isCollapse );
53  js/widgets/collapsibleSet.js
@@ -26,12 +26,13 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
26 26
 			o.contentTheme = $el.jqmData( "content-theme" );
27 27
 		}
28 28
 
29  
-		if ( !o.corners ) {
30  
-			o.corners = $el.jqmData( "corners" ) === undefined ? true : false;
  29
+		if ( $el.jqmData( "inset" ) !== undefined ) {
  30
+			o.inset = $el.jqmData( "inset" );
31 31
 		}
  32
+		o.inset = o.inset !== undefined ? o.inset : true;
32 33
 
33 34
 		// Initialize the collapsible set if it's not already initialized
34  
-		if ( !$el.jqmData( "collapsiblebound" ) ) {
  35
+		if ( !$el.jqmData( "collapsiblebound" ) && !!o.inset ) {
35 36
 			$el
36 37
 				.jqmData( "collapsiblebound", true )
37 38
 				.bind( "expand collapse", function( event ) {
@@ -78,29 +79,31 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
78 79
 		$.mobile.collapsible.prototype.enhance( collapsiblesInSet.not( ".ui-collapsible" ) );
79 80
 
80 81
 		// clean up borders
81  
-		collapsiblesInSet.each(function() {
82  
-			$( this ).jqmRemoveData( "collapsible-last" )
83  
-				.find( $.mobile.collapsible.prototype.options.heading )
84  
-				.find( "a" ).first()
85  
-				.removeClass( "ui-corner-top ui-corner-bottom" )
86  
-				.find( ".ui-btn-inner" )
87  
-				.removeClass( "ui-corner-top ui-corner-bottom" );
88  
-		});
  82
+		if ( !!o.inset ) {
  83
+			collapsiblesInSet.each(function() {
  84
+				$( this ).jqmRemoveData( "collapsible-last" )
  85
+					.find( $.mobile.collapsible.prototype.options.heading )
  86
+					.find( "a" ).first()
  87
+					.removeClass( "ui-corner-top ui-corner-bottom" )
  88
+					.find( ".ui-btn-inner" )
  89
+					.removeClass( "ui-corner-top ui-corner-bottom" );
  90
+			});
89 91
 
90  
-		collapsiblesInSet.first()
91  
-			.find( "a" )
92  
-				.first()
93  
-				.addClass( o.corners ? "ui-corner-top" : "" )
94  
-				.find( ".ui-btn-inner" )
95  
-					.addClass( "ui-corner-top" );
96  
-
97  
-		collapsiblesInSet.last()
98  
-			.jqmData( "collapsible-last", true )
99  
-			.find( "a" )
100  
-				.first()
101  
-				.addClass( o.corners ? "ui-corner-bottom" : "" )
102  
-				.find( ".ui-btn-inner" )
103  
-					.addClass( "ui-corner-bottom" );
  92
+			collapsiblesInSet.first()
  93
+				.find( "a" )
  94
+					.first()
  95
+					.addClass( "ui-corner-top" )
  96
+					.find( ".ui-btn-inner" )
  97
+						.addClass( "ui-corner-top" );
  98
+	
  99
+			collapsiblesInSet.last()
  100
+				.jqmData( "collapsible-last", true )
  101
+				.find( "a" )
  102
+					.first()
  103
+					.addClass( "ui-corner-bottom" )
  104
+					.find( ".ui-btn-inner" )
  105
+						.addClass( "ui-corner-bottom" );
  106
+		}
104 107
 	}
105 108
 });
106 109
 

0 notes on commit 5428e2a

Please sign in to comment.
Something went wrong with that request. Please try again.