21 css/structure/jquery.mobile.collapsible.css
View file
@@ -1,6 +1,8 @@
.ui-collapsible { margin: .5em 0; }
.ui-collapsible-heading { font-size: 16px; display: block; margin: 0 -8px; padding: 0; border-width: 0 0 1px 0; position: relative; }
.ui-collapsible-heading .ui-btn { text-align: left; margin: 0; }
.ui-collapsible-inset { margin: .5em 0; }
.ui-collapsible-heading { font-size: 16px; display: block; margin: 0 -15px; padding: 0; position: relative; }
.ui-collapsible-inset .ui-collapsible-heading { margin: 0; }
.ui-collapsible-heading .ui-btn { text-align: left; margin: 0; border-left-width: 0; border-right-width: 0; }
.ui-collapsible-inset .ui-collapsible-heading .ui-btn { border-right-width: 1px; border-left-width: 1px; }
.ui-collapsible-heading .ui-btn-inner,
.ui-collapsible-heading .ui-btn-icon-left .ui-btn-inner { padding-left: 40px; }
.ui-collapsible-heading .ui-btn-icon-right .ui-btn-inner { padding-left: 12px; padding-right: 40px; }
@@ -13,13 +15,16 @@
.ui-collapsible-heading-status { position: absolute; top: -9999px; left:0px; }
.ui-collapsible-content {
display: block;
margin: 0 -8px;
padding: 10px 16px;
border-top: none; /* Overrides ui-btn-up-* */
background-image: none; /* Overrides ui-btn-up-* */
font-weight: normal; /* Overrides ui-btn-up-* */
margin: 0 -15px;
padding: 10px 15px;
border-left-width: 0;
border-right-width: 0;
border-top: none; /* Overrides ui-body-* */
background-image: none; /* Overrides ui-body-* */
}
.ui-collapsible-inset .ui-collapsible-content { margin: 0; border-right-width: 1px; border-left-width: 1px; }
.ui-collapsible-content-collapsed { display: none; }

.ui-collapsible-set { margin: .5em 0; }
.ui-collapsible-set .ui-collapsible { margin: -1px 0 0; }
.ui-collapsible-set .ui-collapsible:first-child { margin-top: 0; }
13 css/structure/jquery.mobile.listview.css
View file
@@ -1,7 +1,9 @@
.ui-listview { margin: 0; }
ol.ui-listview, ol.ui-listview .ui-li-divider { counter-reset: listnumbering; }
.ui-content .ui-listview { margin: -15px; }
.ui-collapsible-content > .ui-listview { margin: -10px -15px; }
.ui-content .ui-listview-inset { margin: 1em 0; }
.ui-collapsible-content .ui-listview-inset { margin: .5em 0; }
.ui-listview, .ui-li { list-style:none; padding:0; }
.ui-li, .ui-li.ui-field-contain { display: block; margin:0; position: relative; overflow: visible; text-align: left; border-width: 0; border-top-width: 1px; }
.ui-li .ui-btn-text a.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
@@ -11,6 +13,11 @@ ol.ui-listview .ui-link-inherit:before, ol.ui-listview .ui-li-static:before, .ui
ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */
.ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; }
.ui-li-last, .ui-li.ui-field-contain.ui-li-last { border-bottom-width: 1px; }
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li:first-child { border-top-width: 0; }
.ui-collapsible [class*="ui-body"] > .ui-listview:not(.ui-listview-inset) .ui-li-last { border-bottom-width: 0; }
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset),
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li-last { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li-last .ui-li-link-alt { border-bottom-right-radius: inherit; }
.ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; }
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .7em 15px; display: block; }
.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 60px; padding-left: 100px; }
@@ -42,10 +49,12 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid

.ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner { border-top: 0px; }

.ui-listview-filter { border-width: 0; overflow: hidden; margin: -15px -15px 15px -15px }
.ui-listview-filter { border-width: 0; overflow: hidden; margin: -15px -15px 15px -15px; }
.ui-collapsible-content .ui-listview-filter { margin: -10px -15px 10px -15px; }
.ui-listview-filter-inset { margin: -15px -5px; background: transparent; }
.ui-collapsible-content .ui-listview-filter-inset { margin: -5px; }
.ui-listview-filter .ui-input-search { margin: 5px; width: auto; display: block; }

.ui-listview-filter-inset { margin: -15px -5px -15px -5px; background: transparent; }
.ui-li.ui-screen-hidden{ display:none; }
/* Odd iPad positioning issue. */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
8 docs/_assets/css/jqm-docs.css
View file
@@ -104,7 +104,6 @@ p.intro strong {
.content-secondary .ui-collapsible-content {
padding: 0;
background: none;
border-bottom: none;
}
.content-secondary .ui-listview {
margin: 0;
@@ -302,7 +301,8 @@ dd h4 { margin:15px 0 0 0; }
padding: 0;
}
.content-secondary .ui-collapsible-content {
border: none;
border-left: none;
border-right: none;
}
.type-index .content-secondary .ui-listview {
margin: 0;
@@ -321,6 +321,10 @@ dd h4 { margin:15px 0 0 0; }
.content-primary ul:first-child {
margin-top: 0;
}
/* collapsible non-inset example */
.content-primary .ui-collapsible-content ul:first-child {
margin-top: -10px;
}
.content-secondary h2 {
position: absolute;
left: -9999px;
8 docs/api/data-attributes.html
View file
@@ -113,6 +113,10 @@ <h2><a href="../content/content-collapsible.html">Collapsible</a></h2>
<th>data-iconpos</th>
<td><strong>left</strong> | right | top | bottom</td>
</tr>
<tr>
<th>data-inset</th>
<td><strong>true</strong> | false</td>
</tr>
<tr>
<th>data-mini</th>
<td>true | <strong>false</strong> - Compact sized version</td>
@@ -142,6 +146,10 @@ <h2><a href="../content/content-collapsible-set.html">Collapsible set</a></h2>
<th>data-iconpos</th>
<td><strong>left</strong> | right | top | bottom | notext</td>
</tr>
<tr>
<th>data-inset</th>
<td><strong>true</strong> | false</td>
</tr>
<tr>
<th>data-mini</th>
<td>true | <strong>false</strong> - Compact sized version</td>
12 docs/content/content-collapsible-options.html
View file
@@ -144,6 +144,17 @@ <h2>Collapsible content</h2>
</code></pre>
</dd>

<dt><code>inset</code> <em>boolean</em></dt>
<dd>
<p class="default">default: true</p>
<p>By setting this option to false the element 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. 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.inset = false;</strong>
});
</code></pre>
<p>This option is also exposed as a data attribute: <code>data-inset=&quot;false&quot;</code>.</p>
</dd>

<dt><code>mini</code> <em>boolean</em></dt>
<dd>
<p class="default">default: false</p>
@@ -154,6 +165,7 @@ <h2>Collapsible content</h2>
</code></pre>
<p>This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;</code>.</p>
</dd>

<dt><code>theme</code> <em>string</em></dt>
<dd>
<p class="default">default: null, inherited from parent</p>
13 docs/content/content-collapsible-set-options.html
View file
@@ -79,10 +79,21 @@ <h2>Collapsible sets</h2>
</code></pre>
</dd>

<dt><code>inset</code> <em>boolean</em></dt>
<dd>
<p class="default">default: true</p>
<p>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. 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.inset = false;</strong>
});
</code></pre>
<p>This option is also exposed as a data attribute: <code>data-inset=&quot;false&quot;</code>.</p>
</dd>

<dt><code>mini</code> <em>boolean</em></dt>
<dd>
<p class="default">default: false</p>
<p>Sets the size of the element to a more compact, <a href="../forms/forms-all-mini.html">mini version</a>. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<p>Sets the size of the collapsibles to a more compact, <a href="../forms/forms-all-mini.html">mini version</a>. 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.mini = true;</strong>
});
24 docs/content/content-collapsible-set.html
View file
@@ -78,11 +78,31 @@ <h3>Section 5</h3>
</div>
</div>

<h2>Non-inset collapsible sets</h2>

<p>For full width collapsibles without corner styling add the <code>data-inset="false"</code> attribute to the set.</p>

<div data-role="collapsible-set" data-inset="false">
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content.</p>
</div>
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content.</p>
</div>
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content.</p>
</div>
</div>


<h2>Mini collapsible sets</h2>

<p>For a more compact version that is useful in tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms/forms-all-mini.html">mini version</a>. </p>
<p>For a more compact version that is useful in tight spaces, add the <code>data-mini="true"</code> attribute to the set to create a <a href="../forms/forms-all-mini.html">mini version</a>. </p>

<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-mini="true">
<div data-role="collapsible-set" data-theme="c" data-mini="true">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>Collapsible content</p>
21 docs/content/content-collapsible.html
View file
@@ -35,7 +35,7 @@ <h2>Collapsible content</h2>

<p>To create a collapsible block of content, create a container and add the <code> data-role="collapsible"</code> attribute. Using <code>data-content-theme</code> attribute allows you to set a theme for the content of the collapsible. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to collapsibles.</p>

<p>Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>
<p>Directly inside this container, add any header (H1-H6) or legend element. The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>

<p>After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.</p>

@@ -68,7 +68,22 @@ <h2>Expanding collapsibles on load</h2>
<h3>I'm a header</h3>
<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
</div>


<h2>Non-inset collapsibles</h2>

<p>By default collapsibles have an inset appearance. To make them full width without corner styling add the <code>data-inset="false"</code> attribute to the element.</p>

<code>
&lt;div data-role=&quot;collapsible&quot; <strong>data-inset=&quot;false&quot;&gt;</strong>
</code>

<p>This code will create a non-inset collapsible:</p>

<div data-role="collapsible" data-inset="false">
<h3>I'm a header</h3>
<p>I'm the collapsible content.</p>
</div>

<h2>Mini collapsibles</h2>

<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms/forms-all-mini.html">mini version</a>. </p>
@@ -81,7 +96,7 @@ <h2>Mini collapsibles</h2>

<div data-role="collapsible" data-mini="true">
<h3>I'm a mini header</h3>
<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
<p>I'm the collapsible content.</p>
</div>

<h2>Custom icons</h2>
27 js/widgets/collapsible.js
View file
@@ -17,6 +17,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
heading: "h1,h2,h3,h4,h5,h6,legend",
theme: null,
contentTheme: null,
inset: true,
mini: false,
initSelector: ":jqmData(role='collapsible')"
},
@@ -60,11 +61,22 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
if ( !o.iconPos ) {
o.iconPos = collapsibleSet.jqmData( "iconpos" );
}

// Inherit the preference for inset from collapsible-set or set the default value to ensure equalty within a set
if ( collapsibleSet.jqmData( "inset" ) !== undefined ) {
o.inset = collapsibleSet.jqmData( "inset" );
} else {
o.inset = true;
}
// Gets the preference for mini in the set
if ( !o.mini ) {
o.mini = collapsibleSet.jqmData( "mini" );
}
}

if ( !!o.inset ) {
collapsible.addClass( "ui-collapsible-inset" );
}

collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");

collapsedIcon = $el.jqmData( "collapsed-icon" ) || o.collapsedIcon || "plus";
@@ -87,8 +99,12 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
mini: o.mini,
theme: o.theme
})
.add( ".ui-btn-inner", $el )
.addClass( "ui-corner-top ui-corner-bottom" );

if ( !!o.inset ) {
collapsibleHeading
.find( "a" ).first().add( ".ui-btn-inner", $el )
.addClass( "ui-corner-top ui-corner-bottom" );
}

//events
collapsible
@@ -114,7 +130,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
$this.toggleClass( "ui-collapsible-collapsed", isCollapse );
collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );

if ( contentTheme && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
if ( contentTheme && !!o.inset && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
collapsibleHeading
.find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
.toggleClass( "ui-corner-bottom", isCollapse );
@@ -131,8 +147,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
})
.bind( "click", function( event ) {

var type = collapsibleHeading.is( ".ui-collapsible-heading-collapsed" ) ?
"expand" : "collapse";
var type = collapsibleHeading.is( ".ui-collapsible-heading-collapsed" ) ? "expand" : "collapse";

collapsible.trigger( type );

55 js/widgets/collapsibleSet.js
View file
@@ -26,9 +26,10 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
o.contentTheme = $el.jqmData( "content-theme" );
}

if ( !o.corners ) {
o.corners = $el.jqmData( "corners" ) === undefined ? true : false;
if ( $el.jqmData( "inset" ) !== undefined ) {
o.inset = $el.jqmData( "inset" );
}
o.inset = o.inset !== undefined ? o.inset : true;

// Initialize the collapsible set if it's not already initialized
if ( !$el.jqmData( "collapsiblebound" ) ) {
@@ -38,8 +39,8 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
var isCollapse = ( event.type === "collapse" ),
collapsible = $( event.target ).closest( ".ui-collapsible" ),
widget = collapsible.data( "collapsible" );
if ( collapsible.jqmData( "collapsible-last" ) ) {
collapsible.find( widget.options.heading ).first()
if ( collapsible.jqmData( "collapsible-last" ) && !!o.inset ) {
collapsible.find( ".ui-collapsible-heading" ).first()
.find( "a" ).first()
.toggleClass( "ui-corner-bottom", isCollapse )
.find( ".ui-btn-inner" )
@@ -78,29 +79,31 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
$.mobile.collapsible.prototype.enhance( collapsiblesInSet.not( ".ui-collapsible" ) );

// clean up borders
collapsiblesInSet.each(function() {
$( this ).jqmRemoveData( "collapsible-last" )
.find( $.mobile.collapsible.prototype.options.heading )
.find( "a" ).first()
.removeClass( "ui-corner-top ui-corner-bottom" )
.find( ".ui-btn-inner" )
.removeClass( "ui-corner-top ui-corner-bottom" );
});
if ( !!o.inset ) {
collapsiblesInSet.each(function() {
$( this ).jqmRemoveData( "collapsible-last" )
.find( ".ui-collapsible-heading" )
.find( "a" ).first()
.removeClass( "ui-corner-top ui-corner-bottom" )
.find( ".ui-btn-inner" )
.removeClass( "ui-corner-top ui-corner-bottom" );
});

collapsiblesInSet.first()
.find( "a" )
.first()
.addClass( o.corners ? "ui-corner-top" : "" )
.find( ".ui-btn-inner" )
.addClass( "ui-corner-top" );

collapsiblesInSet.last()
.jqmData( "collapsible-last", true )
.find( "a" )
.first()
.addClass( o.corners ? "ui-corner-bottom" : "" )
.find( ".ui-btn-inner" )
.addClass( "ui-corner-bottom" );
collapsiblesInSet.first()
.find( "a" )
.first()
.addClass( "ui-corner-top" )
.find( ".ui-btn-inner" )
.addClass( "ui-corner-top" );

collapsiblesInSet.last()
.jqmData( "collapsible-last", true )
.find( "a" )
.first()
.addClass( "ui-corner-bottom" )
.find( ".ui-btn-inner" )
.addClass( "ui-corner-bottom" );
}
}
});