Permalink
Browse files

Added documentation for custom icon options for collapsibles and coll…

…apsible sets
  • Loading branch information...
1 parent 92a2e33 commit 800514f4a724d1d3a3b04b2a83e7042fbab70c9b @jakeboone02 committed Mar 15, 2012
@@ -57,6 +57,17 @@
</code></pre>
</dd>
+ <dt><code>collapsedIcon</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "plus"</p>
+ <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>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsible.prototype.options.collapsedIcon = "arrow-r";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-collapsed-icon=&quot;arrow-r&quot;</code>.</p>
+ </dd>
+
<dt><code>contentTheme</code> <em>string</em></dt>
<dd>
<p class="default">default: null, inherited from parent</p>
@@ -78,6 +89,17 @@
</code></pre>
</dd>
+ <dt><code>expandedIcon</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "plus"</p>
+ <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>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsible.prototype.options.expandedIcon = "arrow-r";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-expanded-icon=&quot;arrow-r&quot;</code>.</p>
+ </dd>
+
<dt><code>heading</code> <em>string</em></dt>
<dd>
<p class="default">default: "h1,h2,h3,h4,h5,h6,legend"</p>
@@ -36,6 +36,28 @@
<p>The collapsible plugin has the following options:</p>
<dl>
+ <dt><code>collapsedIcon</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "plus"</p>
+ <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>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsibleset.prototype.options.collapsedIcon = "arrow-r";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-collapsed-icon=&quot;arrow-r&quot;</code>.</p>
+ </dd>
+
+ <dt><code>expandedIcon</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "plus"</p>
+ <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>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsibleset.prototype.options.expandedIcon = "arrow-r";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-expanded-icon=&quot;arrow-r&quot;</code>.</p>
+ </dd>
+
<dt><code>iconpos</code> <em>string</em></dt>
<dd>
<p class="default">default: "left"</p>
@@ -98,6 +98,24 @@
</div>
</div>
+ <h2>Custom icons</h2>
+ <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>
+
+ <div data-role="collapsible-set" data-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
+ <div data-role="collapsible">
+ <h3>Section 1</h3>
+ <p>Collapsible content</p>
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 2</h3>
+ <p>Collapsible content</p>
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 3</h3>
+ <p>Collapsible content</p>
+ </div>
+ </div>
+
<h2>Icon positioning</h2>
<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>
@@ -84,6 +84,14 @@
<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
</div>
+ <h2>Custom icons</h2>
+ <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>
+
+ <div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
+ <h3>I have custom icons</h3>
+ <p><code>data-collapsed-icon="arrow-r"</code> and <code>data-expanded-icon="arrow-d"</code></p>
+ </div>
+
<h2>Icon positioning</h2>
<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>

0 comments on commit 800514f

Please sign in to comment.