Skip to content
This repository
Browse code

Added pure CSS corner styling for collapsible and collapsible set

  • Loading branch information...
commit 3b563365ee718cdcd4cf494fffd8d44239204ffc 1 parent 2721133
Jasper de Groot authored November 06, 2012
26  css/structure/jquery.mobile.collapsible.css
@@ -27,6 +27,32 @@
27 27
 .ui-collapsible-inset .ui-collapsible-content { margin: 0; border-right-width: 1px; border-left-width: 1px; }
28 28
 .ui-collapsible-content-collapsed { display: none; }
29 29
 
  30
+/* Corner styling */
  31
+.ui-collapsible-heading,
  32
+.ui-collapsible-heading > .ui-btn {
  33
+	-webkit-border-radius: inherit;	
  34
+	border-radius: inherit;	
  35
+}
  36
+.ui-collapsible-content,
  37
+.ui-collapsible-set .ui-collapsible:last-child {
  38
+	-webkit-border-bottom-right-radius: inherit;	
  39
+	border-bottom-right-radius: inherit;
  40
+	-webkit-border-bottom-left-radius: inherit;	
  41
+	border-bottom-left-radius: inherit;		
  42
+}
  43
+.ui-collapsible-set .ui-collapsible:first-child {
  44
+	-webkit-border-top-right-radius: inherit;	
  45
+	border-top-right-radius: inherit;
  46
+	-webkit-border-top-left-radius: inherit;	
  47
+	border-top-left-radius: inherit;		
  48
+}
  49
+.ui-collapsible-themed-content:not(.ui-collapsible-collapsed) .ui-collapsible-heading {
  50
+	-webkit-border-bottom-right-radius: 0;	
  51
+	border-bottom-right-radius: 0;
  52
+	-webkit-border-bottom-left-radius: 0;	
  53
+	border-bottom-left-radius: 0;		
  54
+}
  55
+
30 56
 .ui-collapsible-set { margin: .5em 0; }
31 57
 .ui-collapsible-set .ui-collapsible { margin: -1px 0 0; }
32 58
 .ui-collapsible-set .ui-collapsible:first-child { margin-top: 0; }
27  js/widgets/collapsible.js
@@ -18,6 +18,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
18 18
 		theme: null,
19 19
 		contentTheme: null,
20 20
 		inset: true,
  21
+		corners: true,
21 22
 		mini: false,
22 23
 		initSelector: ":jqmData(role='collapsible')"
23 24
 	},
@@ -67,6 +68,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
67 68
 			} else {
68 69
 				o.inset = true;
69 70
 			}
  71
+			// Set corners for individual collapsibles to false when in a collapsible-set
  72
+			o.corners = false;
70 73
 			// Gets the preference for mini in the set
71 74
 			if ( !o.mini ) {
72 75
 				o.mini = collapsibleSet.jqmData( "mini" );
@@ -79,7 +82,14 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
79 82
 		}
80 83
 		
81 84
 		if ( !!o.inset ) {
82  
-			collapsible.addClass( "ui-collapsible-inset" );
  85
+			var collapsibleClasses = "ui-collapsible-inset";
  86
+			if ( !!o.corners ) {
  87
+				collapsibleClasses += " ui-corner-all";
  88
+			}
  89
+			if ( o.contentTheme ) {
  90
+				collapsibleClasses += " ui-collapsible-themed-content";
  91
+			}
  92
+			collapsible.addClass( collapsibleClasses );
83 93
 		}
84 94
 		
85 95
 		collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
@@ -105,19 +115,12 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
105 115
 					theme: o.theme
106 116
 				});
107 117
 
108  
-		if ( !!o.inset ) {				
109  
-			collapsibleHeading
110  
-				.find( "a" ).first().add( ".ui-btn-inner", $el )
111  
-					.addClass( "ui-corner-top ui-corner-bottom" );
112  
-		}
113  
-
114 118
 		//events
115 119
 		collapsible
116 120
 			.bind( "expand collapse", function( event ) {
117 121
 				if ( !event.isDefaultPrevented() ) {
118 122
 					var $this = $( this ),
119  
-						isCollapse = ( event.type === "collapse" ),
120  
-						contentTheme = o.contentTheme;
  123
+						isCollapse = ( event.type === "collapse" );
121 124
 
122 125
 					event.preventDefault();
123 126
 
@@ -136,12 +139,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
136 139
 					$this.toggleClass( "ui-collapsible-collapsed", isCollapse );
137 140
 					collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
138 141
 
139  
-					if ( contentTheme && !!o.inset && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
140  
-						collapsibleHeading
141  
-							.find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
142  
-							.toggleClass( "ui-corner-bottom", isCollapse );
143  
-						collapsibleContent.toggleClass( "ui-corner-bottom", !isCollapse );
144  
-					}
145 142
 					collapsibleContent.trigger( "updatelayout" );
146 143
 				}
147 144
 			})
45  js/widgets/collapsibleSet.js
@@ -30,24 +30,16 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
30 30
 			o.inset = $el.jqmData( "inset" );
31 31
 		}
32 32
 		o.inset = o.inset !== undefined ? o.inset : true;
  33
+		o.corners = o.corners !== undefined ? o.corners : true;
  34
+		
  35
+		if ( !!o.corners && !!o.inset ) {
  36
+			$el.addClass( "ui-corner-all" );
  37
+		}
33 38
 
34 39
 		// Initialize the collapsible set if it's not already initialized
35 40
 		if ( !$el.jqmData( "collapsiblebound" ) ) {
36 41
 			$el
37 42
 				.jqmData( "collapsiblebound", true )
38  
-				.bind( "expand collapse", function( event ) {
39  
-					var isCollapse = ( event.type === "collapse" ),
40  
-						collapsible = $( event.target ).closest( ".ui-collapsible" ),
41  
-						widget = collapsible.data( "collapsible" );
42  
-					if ( collapsible.jqmData( "collapsible-last" ) && !!o.inset ) {
43  
-						collapsible.find( ".ui-collapsible-heading" ).first()
44  
-							.find( "a" ).first()
45  
-							.toggleClass( "ui-corner-bottom", isCollapse )
46  
-							.find( ".ui-btn-inner" )
47  
-							.toggleClass( "ui-corner-bottom", isCollapse );
48  
-						collapsible.find( ".ui-collapsible-content" ).toggleClass( "ui-corner-bottom", !isCollapse );
49  
-					}
50  
-				})
51 43
 				.bind( "expand", function( event ) {
52 44
 					var closestCollapsible = $( event.target )
53 45
 						.closest( ".ui-collapsible" );
@@ -77,33 +69,6 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
77 69
 			collapsiblesInSet = $el.children( ":jqmData(role='collapsible')" );
78 70
 
79 71
 		$.mobile.collapsible.prototype.enhance( collapsiblesInSet.not( ".ui-collapsible" ) );
80  
-
81  
-		// clean up borders
82  
-		if ( !!o.inset ) {
83  
-			collapsiblesInSet.each(function() {
84  
-				$( this ).jqmRemoveData( "collapsible-last" )
85  
-					.find( ".ui-collapsible-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  
-			});
91  
-
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  
-		}
107 72
 	}
108 73
 });
109 74
 

0 notes on commit 3b56336

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