Skip to content
This repository
Browse code

Merge pull request #3821 from jakeboone02/custom-collapsible-icons

Custom collapsible icons
  • Loading branch information...
commit 37130102654b1b05f9e69320db60b480d2abeaba 2 parents d3d1417 + aa682d2
Ghislain Seguin authored April 18, 2012
22  docs/content/content-collapsible-options.html
@@ -57,6 +57,17 @@
57 57
 </code></pre>
58 58
 			</dd>
59 59
 
  60
+			<dt><code>collapsedIcon</code> <em>string</em></dt>
  61
+			<dd>
  62
+				<p class="default">default: "plus"</p>
  63
+				<p>Sets the icon for the header of the collapsible container when in a collapsed state. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
  64
+<pre><code>$( document ).bind( "mobileinit", function(){
  65
+    <strong>$.mobile.collapsible.prototype.options.collapsedIcon = "arrow-r";</strong>
  66
+});
  67
+</code></pre>
  68
+				<p>This option is also exposed as a data attribute: <code>data-collapsed-icon=&quot;arrow-r&quot;</code>.</p>
  69
+			</dd>
  70
+
60 71
 			<dt><code>contentTheme</code> <em>string</em></dt>
61 72
 			<dd>
62 73
 				<p class="default">default: null, inherited from parent</p>
@@ -78,6 +89,17 @@
78 89
 </code></pre>
79 90
 			</dd>
80 91
 
  92
+			<dt><code>expandedIcon</code> <em>string</em></dt>
  93
+			<dd>
  94
+				<p class="default">default: "plus"</p>
  95
+				<p>Sets the icon for the header of the collapsible container when in an expanded state. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
  96
+<pre><code>$( document ).bind( "mobileinit", function(){
  97
+    <strong>$.mobile.collapsible.prototype.options.expandedIcon = "arrow-r";</strong>
  98
+});
  99
+</code></pre>
  100
+				<p>This option is also exposed as a data attribute: <code>data-expanded-icon=&quot;arrow-r&quot;</code>.</p>
  101
+			</dd>
  102
+
81 103
 			<dt><code>heading</code> <em>string</em></dt>
82 104
 			<dd>
83 105
 				<p class="default">default: "h1,h2,h3,h4,h5,h6,legend"</p>
22  docs/content/content-collapsible-set-options.html
@@ -36,6 +36,28 @@
36 36
 			<p>The collapsible plugin has the following options:</p>
37 37
 
38 38
 		<dl>
  39
+			<dt><code>collapsedIcon</code> <em>string</em></dt>
  40
+			<dd>
  41
+				<p class="default">default: "plus"</p>
  42
+				<p>Sets the icon for the headers of the collapsible containers when in a collapsed state. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
  43
+<pre><code>$( document ).bind( "mobileinit", function(){
  44
+    <strong>$.mobile.collapsibleset.prototype.options.collapsedIcon = "arrow-r";</strong>
  45
+});
  46
+</code></pre>
  47
+				<p>This option is also exposed as a data attribute: <code>data-collapsed-icon=&quot;arrow-r&quot;</code>.</p>
  48
+			</dd>
  49
+
  50
+			<dt><code>expandedIcon</code> <em>string</em></dt>
  51
+			<dd>
  52
+				<p class="default">default: "plus"</p>
  53
+				<p>Sets the icon for the headers of the collapsible containers when in an expanded state. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
  54
+<pre><code>$( document ).bind( "mobileinit", function(){
  55
+    <strong>$.mobile.collapsibleset.prototype.options.expandedIcon = "arrow-r";</strong>
  56
+});
  57
+</code></pre>
  58
+				<p>This option is also exposed as a data attribute: <code>data-expanded-icon=&quot;arrow-r&quot;</code>.</p>
  59
+			</dd>
  60
+
39 61
 			<dt><code>iconpos</code> <em>string</em></dt>
40 62
 			<dd>
41 63
 				<p class="default">default: "left"</p>
18  docs/content/content-collapsible-set.html
@@ -98,6 +98,24 @@
98 98
 			</div>
99 99
 		</div>
100 100
 		
  101
+		<h2>Custom icons</h2>
  102
+		<p>Collapsible headings’ default icons can be overridden by using the <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> attributes, either at the <code>collapsible-set</code> level or on an individual collapsible basis.</p>
  103
+		
  104
+		<div data-role="collapsible-set" data-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
  105
+			<div data-role="collapsible">
  106
+				<h3>Section 1</h3>
  107
+				<p>Collapsible content</p>
  108
+			</div>
  109
+			<div data-role="collapsible">
  110
+				<h3>Section 2</h3>
  111
+				<p>Collapsible content</p>
  112
+			</div>
  113
+			<div data-role="collapsible">
  114
+				<h3>Section 3</h3>
  115
+				<p>Collapsible content</p>
  116
+			</div>
  117
+		</div>
  118
+		
101 119
 		<h2>Icon positioning</h2>
102 120
 		<p>Collapsible headings’ default icon positioing can be overridden by using the <code>data-iconpos</code> attribute, either at the <code>collapsible-set</code> level or on an individual collapsible basis.</p>
103 121
 		
8  docs/content/content-collapsible.html
@@ -84,6 +84,14 @@
84 84
 			<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
85 85
 		</div>
86 86
 		
  87
+		<h2>Custom icons</h2>
  88
+		<p>Collapsible headings’ default icons can be overridden by using the <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> attributes. In the below case, <code>data-collapsed-icon="arrow-r"</code> and <code>data-expanded-icon="arrow-d"</code>.</p>
  89
+
  90
+		<div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
  91
+			<h3>I have custom icons</h3>
  92
+			<p><code>data-collapsed-icon="arrow-r"</code> and <code>data-expanded-icon="arrow-d"</code></p>
  93
+		</div>
  94
+
87 95
 		<h2>Icon positioning</h2>
88 96
 		<p>Collapsible headings’ default icon positioing can be overridden by using the <code>data-iconpos</code> attribute. In the below case, <code>data-iconpos="right"</code>.</p>
89 97
 		
20  js/jquery.mobile.collapsible.js
@@ -16,7 +16,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
16 16
 		heading: "h1,h2,h3,h4,h5,h6,legend",
17 17
 		theme: null,
18 18
 		contentTheme: null,
19  
-		iconTheme: "d",
20 19
 		mini: false,
21 20
 		initSelector: ":jqmData(role='collapsible')"
22 21
 	},
@@ -26,6 +25,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
26 25
 			o = this.options,
27 26
 			collapsible = $el.addClass( "ui-collapsible" ),
28 27
 			collapsibleHeading = $el.children( o.heading ).first(),
  28
+			collapsedIcon = $el.jqmData("collapsed-icon") || o.collapsedIcon,
  29
+			expandedIcon = $el.jqmData("expanded-icon") || o.expandedIcon,
29 30
 			collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
30 31
 			collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" );
31 32
 
@@ -46,6 +47,14 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
46 47
 				o.contentTheme = collapsibleSet.jqmData( "content-theme" );
47 48
 			}
48 49
 
  50
+			// Get the preference for collapsed icon in the set
  51
+			if ( !o.collapsedIcon ) {
  52
+				o.collapsedIcon = collapsibleSet.jqmData( "collapsed-icon" );
  53
+			}
  54
+			// Get the preference for expanded icon in the set
  55
+			if ( !o.expandedIcon ) {
  56
+				o.expandedIcon = collapsibleSet.jqmData( "expanded-icon" );
  57
+			}
49 58
 			// Gets the preference icon position in the set
50 59
 			if ( !o.iconPos ) {
51 60
 				o.iconPos = collapsibleSet.jqmData( "iconpos" );
@@ -57,6 +66,9 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
57 66
 		}
58 67
 		collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
59 68
 
  69
+		collapsedIcon = $el.jqmData( "collapsed-icon" ) || o.collapsedIcon || "plus";
  70
+		expandedIcon = $el.jqmData( "expanded-icon" ) || o.expandedIcon || "minus";
  71
+
60 72
 		collapsibleHeading
61 73
 			//drop heading in before content
62 74
 			.insertBefore( collapsibleContent )
@@ -70,7 +82,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
70 82
 					shadow: false,
71 83
 					corners: false,
72 84
 					iconpos: $el.jqmData( "iconpos" ) || o.iconPos || "left",
73  
-					icon: "plus",
  85
+					icon: collapsedIcon,
74 86
 					mini: o.mini,
75 87
 					theme: o.theme
76 88
 				})
@@ -94,8 +106,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
94 106
 							.text( isCollapse ? o.expandCueText : o.collapseCueText )
95 107
 						.end()
96 108
 						.find( ".ui-icon" )
97  
-							.toggleClass( "ui-icon-minus", !isCollapse )
98  
-							.toggleClass( "ui-icon-plus", isCollapse );
  109
+							.toggleClass( "ui-icon-" + expandedIcon, !isCollapse )
  110
+							.toggleClass( "ui-icon-" + collapsedIcon, isCollapse );
99 111
 
100 112
 					$this.toggleClass( "ui-collapsible-collapsed", isCollapse );
101 113
 					collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
46  tests/unit/collapsible/collapsible_core.js
... ...
@@ -1,5 +1,5 @@
1 1
 /*
2  
- * mobile listview unit tests
  2
+ * mobile collapsible unit tests
3 3
  */
4 4
 
5 5
 // TODO split out into seperate test files
@@ -140,9 +140,9 @@
140 140
 		]);
141 141
 	});
142 142
 
143  
-  asyncTest( "Collapsible Set with static and dynamic content", function(){
144  
-  		$.testHelper.pageSequence([
145  
-  			function(){
  143
+	asyncTest( "Collapsible Set with static and dynamic content", function(){
  144
+		$.testHelper.pageSequence([
  145
+			function(){
146 146
   				$.testHelper.openPage( "#collapsible-set-with-static-and-dynamic-content" );
147 147
   			},
148 148
 
@@ -164,6 +164,44 @@
164 164
   		]);
165 165
   	});
166 166
 
  167
+	module( "Icons", {});
  168
+
  169
+	asyncTest( "Collapsible with custom icons", function(){
  170
+		$.testHelper.pageSequence([
  171
+			function(){
  172
+				$.testHelper.openPage( "#collapsible-with-custom-icons" );
  173
+			},
  174
+
  175
+			function() {
  176
+				var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
  177
+				ok( collapsibles.eq(0).find( ".ui-icon" ).hasClass( "ui-icon-plus" ), "Heading of first collapsible should have class ui-icon-plus");
  178
+				ok( collapsibles.eq(1).find( ".ui-icon" ).hasClass( "ui-icon-minus" ), "Heading of second collapsible should have class ui-icon-minus");
  179
+				ok( collapsibles.eq(2).find( ".ui-icon" ).hasClass( "ui-icon-arrow-r" ), "Heading of third collapsible should have class ui-icon-arrow-r");
  180
+				ok( collapsibles.eq(3).find( ".ui-icon" ).hasClass( "ui-icon-arrow-d" ), "Heading of fourth collapsible should have class ui-icon-arrow-d");
  181
+				start();
  182
+			}
  183
+		]);
  184
+	});
  185
+
  186
+	asyncTest( "Collapsible sets with custom icons", function(){
  187
+		$.testHelper.pageSequence([
  188
+			function(){
  189
+				$.testHelper.openPage( "#collapsible-set-with-custom-icons" );
  190
+			},
  191
+
  192
+			function() {
  193
+				var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
  194
+				ok( collapsibles.eq(0).find( ".ui-icon" ).hasClass( "ui-icon-plus" ), "Heading of first collapsible should have class ui-icon-plus");
  195
+				ok( collapsibles.eq(1).find( ".ui-icon" ).hasClass( "ui-icon-minus" ), "Heading of second collapsible should have class ui-icon-minus");
  196
+				ok( collapsibles.eq(2).find( ".ui-icon" ).hasClass( "ui-icon-arrow-r" ), "Heading of third collapsible should have class ui-icon-arrow-r");
  197
+				ok( collapsibles.eq(3).find( ".ui-icon" ).hasClass( "ui-icon-arrow-d" ), "Heading of fourth collapsible should have class ui-icon-arrow-d");
  198
+				ok( collapsibles.eq(4).find( ".ui-icon" ).hasClass( "ui-icon-arrow-l" ), "Heading of fifth collapsible should have class ui-icon-arrow-l");
  199
+				ok( collapsibles.eq(5).find( ".ui-icon" ).hasClass( "ui-icon-arrow-u" ), "Heading of sixth collapsible should have class ui-icon-arrow-u");
  200
+				start();
  201
+			}
  202
+		]);
  203
+	});
  204
+
167 205
 	module( "Theming", {});
168 206
 
169 207
 	asyncTest( "Collapsible", 6, function(){
82  tests/unit/collapsible/index.html
@@ -112,6 +112,88 @@ <h2 id="qunit-userAgent"></h2>
112 112
 	</div>
113 113
 </div>
114 114
 
  115
+<div data-nstest-role="page" id='collapsible-with-custom-icons'>
  116
+	<div data-nstest-role="header">
  117
+		<h1>Custom icons for collapsibles</h1>
  118
+	</div>
  119
+	<div data-nstest-role="content">
  120
+		<div data-nstest-role="collapsible">
  121
+			<h3>Section A</h3>
  122
+
  123
+			<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
  124
+				have the "collapsed" state; you need to expand the header to see me.</p>
  125
+		</div>
  126
+		<div data-nstest-role="collapsible" data-nstest-collapsed="false">
  127
+			<h3>Section B</h3>
  128
+
  129
+			<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
  130
+				have the "collapsed" state; you need to expand the header to see me.</p>
  131
+		</div>
  132
+
  133
+		<div data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-r" data-nstest-expanded-icon="arrow-d">
  134
+			<h3>Section C</h3>
  135
+
  136
+			<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
  137
+				have the "collapsed" state; you need to expand the header to see me.</p>
  138
+		</div>
  139
+		<div data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-r" data-nstest-expanded-icon="arrow-d" data-nstest-collapsed="false">
  140
+			<h3>Section D</h3>
  141
+
  142
+			<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
  143
+				have the "collapsed" state; you need to expand the header to see me.</p>
  144
+		</div>
  145
+
  146
+	</div>
  147
+</div>
  148
+
  149
+<div data-nstest-role="page" id='collapsible-set-with-custom-icons'>
  150
+	<div data-nstest-role="header">
  151
+		<h1>Custom icons for collapsible sets</h1>
  152
+	</div>
  153
+	<div data-nstest-role="content">
  154
+		<div data-nstest-role="collapsible-set">
  155
+			<div data-nstest-role="collapsible">
  156
+				<h3>Section A</h3>
  157
+
  158
+				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
  159
+					have the "collapsed" state; you need to expand the header to see me.</p>
  160
+			</div>
  161
+			<div data-nstest-role="collapsible" data-nstest-collapsed="false">
  162
+				<h3>Section B</h3>
  163
+
  164
+				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
  165
+					have the "collapsed" state; you need to expand the header to see me.</p>
  166
+			</div>
  167
+		</div>
  168
+		<div data-nstest-role="collapsible-set" data-nstest-collapsed-icon="arrow-r" data-nstest-expanded-icon="arrow-d">
  169
+			<div data-nstest-role="collapsible">
  170
+				<h3>Section A</h3>
  171
+
  172
+				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
  173
+					have the "collapsed" state; you need to expand the header to see me.</p>
  174
+			</div>
  175
+			<div data-nstest-role="collapsible" data-nstest-collapsed="false">
  176
+				<h3>Section B</h3>
  177
+
  178
+				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
  179
+					have the "collapsed" state; you need to expand the header to see me.</p>
  180
+			</div>
  181
+			<div data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-l" data-nstest-expanded-icon="arrow-u">
  182
+				<h3>Section C</h3>
  183
+
  184
+				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
  185
+					have the "collapsed" state; you need to expand the header to see me.</p>
  186
+			</div>
  187
+			<div data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-l" data-nstest-expanded-icon="arrow-u" data-nstest-collapsed="false">
  188
+				<h3>Section D</h3>
  189
+
  190
+				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
  191
+					have the "collapsed" state; you need to expand the header to see me.</p>
  192
+			</div>
  193
+		</div>
  194
+	</div>
  195
+</div>
  196
+
115 197
 <div data-nstest-role="page" id='collapsible-with-theming'>
116 198
 	<div data-nstest-role="header">
117 199
 		<h1>Themed collapsibles</h1>

0 notes on commit 3713010

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