Skip to content

Commit bb632e1

Browse files
author
Gabriel Schulhof
committed
Collapsible set: Documenting new options and pre-rendering.
1 parent 56f30cf commit bb632e1

File tree

2 files changed

+90
-22
lines changed

2 files changed

+90
-22
lines changed

‎entries/collapsibleset.xml

+42-22
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@
44
<title>Collapsible set Widget</title>
55
<desc>Creates a collapsible set of collapsible blocks of content</desc>
66
<longdesc>
7+
<h2>Collapsible sets</h2>
78
<p>Collapsible sets start with the exact same markup as individual collapsibles.
8-
By adding a parent wrapper with a <code>data-role="collapsible-set"</code> attribute around a number of collapsibles, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time.</p>
9+
By adding a parent wrapper with a <code>data-role="collapsibleset"</code> attribute around a number of collapsibles, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time.</p>
910
<p>By default, all the sections will be collapsed. To set a section to be open when the page loads, add the <code>data-collapsed="false"</code> attribute to the heading of the section you want expanded.</p>
1011

1112
<pre><code><![CDATA[
@@ -39,12 +40,12 @@
3940

4041
<h3>Custom icons</h3>
4142

42-
<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.
43+
<p>The icon displayed when a collapsible is shown or hidden can be overridden by using the <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> attributes. Both the <code>collapsibleset</code> widget and the <code>collapsible</code> widget accepts these attributes. When you set one or both of these attributes on the <code>collapsibleset</code> widget all <code>collapsible</code> widgets that are part of the <code>collapsibleset</code> display the icon specified by the chosen value. You can override the icon displayed by individual <code>collapsible</code> widgets by setting one or both of these attributes on the <code>collapsible</code> widget itself.
4344
<iframe src="/resources/collapsibleset/example4.html" style="width:100%;height:240px;border:0px"></iframe></p>
4445

4546
<h3>Icon positioning</h3>
4647

47-
<p>Collapsible headings’ default icon positioning 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.
48+
<p>The default icon positioning for collapsible headings can be overridden by using the <code>data-iconpos</code> attribute. You can set the attribute either on the <code>collapsibleset</code> to affect all collapsibles in the set, or on an individual <code>collapsible</code> widget to affect only the one widget.
4849
<iframe src="/resources/collapsibleset/example5.html" style="width:100%;height:310px;border:0px"></iframe></p>
4950

5051
<h3>Theming collapsible content</h3>
@@ -62,14 +63,34 @@
6263
<p>To have individual sections in a group styled differently, add <code>data-theme</code> and <code>data-content-theme</code> attributes to specific collapsibles.
6364
<iframe src="/resources/collapsibleset/example7.html" style="width:100%;height:240px;border:0px"></iframe></p>
6465

65-
<h3>Expanding or collapsing items in a set</h3>
66-
67-
<p>To expand or collapse items in a set, call the respective methods on individual collapsibles. The selector for the collapse method can include multiple items in a set:</p>
66+
<h2>Providing pre-rendered markup</h2>
67+
<p>You can improve the load time for your page by providing the markup that the <code>collapsibleset</code> widget would normally create during its initialization.</p>
68+
<p>The collapsible set widget does not require that the collapsibles it contains also be pre-rendered.</p>
69+
<p>When you provide such pre-rendered markup you must also set all the classes that the framework would normally set, and you must also set all data-attributes whose values differ from the default to indicate that the pre-rendered markup reflects the non-default value of the corresponding widget option.</p>
70+
<p>In the example below, pre-rendered markup for a collapsible set is provided. The attribute <code>data-corners="false"</code> is explicitly specified, since the absence of the <code>ui-corner-all</code> class on the container element indicates that the "corners" widget option is to be false. One of the child collapsibles is provided as-is, while the other is pre-rendered.</p>
6871

6972
<pre><code><![CDATA[
70-
$( "#myCollapsibleSet" ).children().trigger( "collapse" );
73+
<div data-role="collapsibleset" class="ui-collapsible-set" data-corners="false">
74+
<div data-role="collapsible">
75+
<h2>Child collapsible</h2>
76+
<p>This is the collapsible content.</p>
77+
</div>
78+
<div data-role="collapsible" data-enhanced="true" class="ui-collapsible ui-collapsible-inset ui-corner-all" data-collapsed="false" data-corners="true">
79+
<h2 class="ui-collapsible-heading">
80+
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-minus">
81+
Pre-rendered child collapsible
82+
<span class="ui-collapsible-heading-status">click to collapse contents</span>
83+
</a>
84+
</h2>
85+
<div class="ui-collapsible-content" aria-hidden="false">
86+
<p>This is the collapsible content.</p>
87+
</div>
88+
</div>
89+
</div>
7190
]]></code></pre>
7291

92+
<iframe src="/resources/collapsibleset/example8.html" style="width:100%;height:240px;border:0px"></iframe>
93+
7394
</longdesc>
7495
<added>1.0</added>
7596
<options>
@@ -85,6 +106,13 @@ $( "#myCollapsibleSet" ).children().trigger( "collapse" );
85106
</desc>
86107
<type name="Boolean" />
87108
</option>
109+
<option name="enhanced" default="false" example-value="true">
110+
<desc>
111+
Indicates that all markup necessary to create the <code>collapsibleset</code> widget has been provided as part of the original markup.
112+
<p>This option is also exposed as a data attribute: <code>data-enhanced="false"</code>.</p>
113+
</desc>
114+
<type name="Boolean" />
115+
</option>
88116
<option name="expandedIcon" default='"minus"' example-value='"arrow-d"'>
89117
<desc>Sets the icon for the header of the collapsible container when in an expanded state.
90118
<p>This option is also exposed as a data attribute: <code>data-expanded-icon="arrow-d"</code>.</p>
@@ -98,25 +126,15 @@ $( "#myCollapsibleSet" ).children().trigger( "collapse" );
98126
</desc>
99127
<type name="String" />
100128
</option>
101-
<option name="initSelector" default='":jqmData(role=&#39;collapsible-set&#39;)"'>
102-
<desc>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as collapsibles. To change which elements are initialized, bind this option to the mobileinit event:
103-
<pre><code><![CDATA[
104-
$( document ).on( "mobileinit", function() {
105-
$.mobile.collapsibleset.prototype.options.initSelector = ".mycollapsibleset";
106-
});
107-
]]></code></pre>
108-
</desc>
109-
<type name="CSS selector string" />
110-
</option>
111-
<option name="inset" default="true" example-value="false">
129+
<option name="inset" default="true" example-value="false">
112130
<desc>By setting this option to false the collapsibles will get a full width appearance without corners. If the value is false for an individual collapsible container, but that container is part of a collapsible set, then the value is inherited from the parent collapsible set.
113-
<p>This option is also exposed as a data attribute: <code>data-mini="true"</code>.</p>
131+
<p>This option is also exposed as a data attribute: <code>data-inset="true"</code>.</p>
114132
</desc>
115133
<type name="Boolean" />
116134
</option>
117-
<option name="mini" default="false" example-value="true">
135+
<option name="mini" default="false" example-value="true">
118136
<desc>Sets the size of the element to a more compact, mini version. If the value is false for an individual collapsible container, but that container is part of a collapsible set, then the value is inherited from the parent collapsible set.
119-
<p>This option is also exposed as a data attribute: <code>data-inset="false"</code>.</p>
137+
<p>This option is also exposed as a data attribute: <code>data-mini="false"</code>.</p>
120138
</desc>
121139
<type name="Boolean" />
122140
</option>
@@ -138,9 +156,11 @@ $( document ).on( "mobileinit", function() {
138156
</event>
139157
</events>
140158
<methods>
159+
141160
<method name="refresh">
142161
<desc>Updates the collapsible set.
143-
<p>If you manipulate a collapsible set via JavaScript (e.g. add new collapsible containers), you must call the refresh method on it to update the visual styling.</p>
162+
<p>If you manipulate a collapsible set via JavaScript (e.g. by adding new collapsibles, removing old ones, or showing/hiding existing ones), you must call the refresh method on it to update the visual styling. This method will instantiate collapsibles on child elements which are marked <code>data-role="collapsible"</code>, so there is no need to manually call <code>.collapsible()</code>.</p>
163+
144164
</desc>
145165
</method>
146166
</methods>

‎resources/collapsibleset/example8.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Page Title</title>
5+
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.css" />
9+
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
10+
<script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js"></script>
11+
<style>
12+
html, body { padding: 0; margin: 0; }
13+
html, .ui-mobile, .ui-mobile body {
14+
height: 235px;
15+
}
16+
.ui-mobile, .ui-mobile .ui-page {
17+
min-height: 235px;
18+
}
19+
.ui-content{
20+
padding:10px 15px 0px 15px;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
<div data-role="page" style="max-height:240px; min-height:240px;">
27+
<div data-role="content" >
28+
<div data-role="collapsibleset" class="ui-collapsible-set" data-corners="false">
29+
<div data-role="collapsible">
30+
<h2>Child collapsible</h2>
31+
<p>This is the collapsible content.</p>
32+
</div>
33+
<div data-role="collapsible" data-enhanced="true" class="ui-collapsible ui-collapsible-inset ui-corner-all" data-collapsed="false" data-corners="true">
34+
<h2 class="ui-collapsible-heading">
35+
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-minus">
36+
Pre-rendered child collapsible
37+
<span class="ui-collapsible-heading-status">click to collapse contents</span>
38+
</a>
39+
</h2>
40+
<div class="ui-collapsible-content" aria-hidden="false">
41+
<p>This is the collapsible content.</p>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
</body>
48+
</html>

0 commit comments

Comments
 (0)