Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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

Custom collapsible icons
  • Loading branch information...
commit 37130102654b1b05f9e69320db60b480d2abeaba 2 parents d3d1417 + aa682d2
@gseguin gseguin authored
View
22 docs/content/content-collapsible-options.html
@@ -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>
View
22 docs/content/content-collapsible-set-options.html
@@ -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>
View
18 docs/content/content-collapsible-set.html
@@ -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>
View
8 docs/content/content-collapsible.html
@@ -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>
View
20 js/jquery.mobile.collapsible.js
@@ -16,7 +16,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
heading: "h1,h2,h3,h4,h5,h6,legend",
theme: null,
contentTheme: null,
- iconTheme: "d",
mini: false,
initSelector: ":jqmData(role='collapsible')"
},
@@ -26,6 +25,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
o = this.options,
collapsible = $el.addClass( "ui-collapsible" ),
collapsibleHeading = $el.children( o.heading ).first(),
+ collapsedIcon = $el.jqmData("collapsed-icon") || o.collapsedIcon,
+ expandedIcon = $el.jqmData("expanded-icon") || o.expandedIcon,
collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" );
@@ -46,6 +47,14 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
o.contentTheme = collapsibleSet.jqmData( "content-theme" );
}
+ // Get the preference for collapsed icon in the set
+ if ( !o.collapsedIcon ) {
+ o.collapsedIcon = collapsibleSet.jqmData( "collapsed-icon" );
+ }
+ // Get the preference for expanded icon in the set
+ if ( !o.expandedIcon ) {
+ o.expandedIcon = collapsibleSet.jqmData( "expanded-icon" );
+ }
// Gets the preference icon position in the set
if ( !o.iconPos ) {
o.iconPos = collapsibleSet.jqmData( "iconpos" );
@@ -57,6 +66,9 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
}
collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
+ collapsedIcon = $el.jqmData( "collapsed-icon" ) || o.collapsedIcon || "plus";
+ expandedIcon = $el.jqmData( "expanded-icon" ) || o.expandedIcon || "minus";
+
collapsibleHeading
//drop heading in before content
.insertBefore( collapsibleContent )
@@ -70,7 +82,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
shadow: false,
corners: false,
iconpos: $el.jqmData( "iconpos" ) || o.iconPos || "left",
- icon: "plus",
+ icon: collapsedIcon,
mini: o.mini,
theme: o.theme
})
@@ -94,8 +106,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
.text( isCollapse ? o.expandCueText : o.collapseCueText )
.end()
.find( ".ui-icon" )
- .toggleClass( "ui-icon-minus", !isCollapse )
- .toggleClass( "ui-icon-plus", isCollapse );
+ .toggleClass( "ui-icon-" + expandedIcon, !isCollapse )
+ .toggleClass( "ui-icon-" + collapsedIcon, isCollapse );
$this.toggleClass( "ui-collapsible-collapsed", isCollapse );
collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
View
46 tests/unit/collapsible/collapsible_core.js
@@ -1,5 +1,5 @@
/*
- * mobile listview unit tests
+ * mobile collapsible unit tests
*/
// TODO split out into seperate test files
@@ -140,9 +140,9 @@
]);
});
- asyncTest( "Collapsible Set with static and dynamic content", function(){
- $.testHelper.pageSequence([
- function(){
+ asyncTest( "Collapsible Set with static and dynamic content", function(){
+ $.testHelper.pageSequence([
+ function(){
$.testHelper.openPage( "#collapsible-set-with-static-and-dynamic-content" );
},
@@ -164,6 +164,44 @@
]);
});
+ module( "Icons", {});
+
+ asyncTest( "Collapsible with custom icons", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#collapsible-with-custom-icons" );
+ },
+
+ function() {
+ var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
+ ok( collapsibles.eq(0).find( ".ui-icon" ).hasClass( "ui-icon-plus" ), "Heading of first collapsible should have class ui-icon-plus");
+ ok( collapsibles.eq(1).find( ".ui-icon" ).hasClass( "ui-icon-minus" ), "Heading of second collapsible should have class ui-icon-minus");
+ ok( collapsibles.eq(2).find( ".ui-icon" ).hasClass( "ui-icon-arrow-r" ), "Heading of third collapsible should have class ui-icon-arrow-r");
+ ok( collapsibles.eq(3).find( ".ui-icon" ).hasClass( "ui-icon-arrow-d" ), "Heading of fourth collapsible should have class ui-icon-arrow-d");
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Collapsible sets with custom icons", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#collapsible-set-with-custom-icons" );
+ },
+
+ function() {
+ var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
+ ok( collapsibles.eq(0).find( ".ui-icon" ).hasClass( "ui-icon-plus" ), "Heading of first collapsible should have class ui-icon-plus");
+ ok( collapsibles.eq(1).find( ".ui-icon" ).hasClass( "ui-icon-minus" ), "Heading of second collapsible should have class ui-icon-minus");
+ ok( collapsibles.eq(2).find( ".ui-icon" ).hasClass( "ui-icon-arrow-r" ), "Heading of third collapsible should have class ui-icon-arrow-r");
+ ok( collapsibles.eq(3).find( ".ui-icon" ).hasClass( "ui-icon-arrow-d" ), "Heading of fourth collapsible should have class ui-icon-arrow-d");
+ ok( collapsibles.eq(4).find( ".ui-icon" ).hasClass( "ui-icon-arrow-l" ), "Heading of fifth collapsible should have class ui-icon-arrow-l");
+ ok( collapsibles.eq(5).find( ".ui-icon" ).hasClass( "ui-icon-arrow-u" ), "Heading of sixth collapsible should have class ui-icon-arrow-u");
+ start();
+ }
+ ]);
+ });
+
module( "Theming", {});
asyncTest( "Collapsible", 6, function(){
View
82 tests/unit/collapsible/index.html
@@ -112,6 +112,88 @@ <h2 id="qunit-userAgent"></h2>
</div>
</div>
+<div data-nstest-role="page" id='collapsible-with-custom-icons'>
+ <div data-nstest-role="header">
+ <h1>Custom icons for collapsibles</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div data-nstest-role="collapsible">
+ <h3>Section A</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-collapsed="false">
+ <h3>Section B</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+
+ <div data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-r" data-nstest-expanded-icon="arrow-d">
+ <h3>Section C</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-r" data-nstest-expanded-icon="arrow-d" data-nstest-collapsed="false">
+ <h3>Section D</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+
+ </div>
+</div>
+
+<div data-nstest-role="page" id='collapsible-set-with-custom-icons'>
+ <div data-nstest-role="header">
+ <h1>Custom icons for collapsible sets</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div data-nstest-role="collapsible-set">
+ <div data-nstest-role="collapsible">
+ <h3>Section A</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-collapsed="false">
+ <h3>Section B</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ </div>
+ <div data-nstest-role="collapsible-set" data-nstest-collapsed-icon="arrow-r" data-nstest-expanded-icon="arrow-d">
+ <div data-nstest-role="collapsible">
+ <h3>Section A</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-collapsed="false">
+ <h3>Section B</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-l" data-nstest-expanded-icon="arrow-u">
+ <h3>Section C</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-l" data-nstest-expanded-icon="arrow-u" data-nstest-collapsed="false">
+ <h3>Section D</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ </div>
+ </div>
+</div>
+
<div data-nstest-role="page" id='collapsible-with-theming'>
<div data-nstest-role="header">
<h1>Themed collapsibles</h1>
Please sign in to comment.
Something went wrong with that request. Please try again.