Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-17 06:20:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

converted collapsible to the widget factory. API change: data-state="collapsed" is now data-collapsed="true". Updated markup in demos to support change. Fixes #372

Browse source
This commit is contained in:
scottjehl 2010-11-04 19:23:24 -04:00
parent a47a7035bb
commit f29b85a149
3 changed files with 35 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
docs/content/content-collapsible.html
View file

@ -39,16 +39,16 @@
</div>
<p>As the example notes, by default the content will be expanded. To collapse the content when the page loads, add the <code>data-state="collapsed"</code> attribute to the wrapper.</p>
<p>As the example notes, by default the content will be expanded. To collapse the content when the page loads, add the <code>data-collapsed="true"</code> attribute to the wrapper.</p>
<code>
&lt;div data-role=&quot;collapsible&quot; <strong>data-state=&quot;collapsed&quot;&gt;</strong>
&lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;true&quot;&gt;</strong>
</code>
<p>This code will create a collapsible widget like this:</p>
<div data-role="collapsible" data-state="collapsed">
<div data-role="collapsible" data-collapsed="true">
<h3>I'm a header</h3>
<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
@ -58,19 +58,19 @@
<h2>Collapsible example</h2>
<p>This page has 4 collapsible containers with different types of content inside.</p>
<div data-role="collapsible" data-state="collapsed">
<div data-role="collapsible" data-collapsed="true">
<h3>Section 1: Collapsed text block</h3>
<p>I'm closed when the page loads because I have the <code>data-state="collapsed"</code> attribute on my container. </p>
<p>I'm closed when the page loads because I have the <code>data-collapsed="true"</code> attribute on my container. </p>
<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. </p>
</div><!-- /section 1 -->
<div data-role="collapsible">
<h3>Section 2: Expanded on load</h3>
<p>I'm open when the page loads because I don't have the <code>data-state="collapsed"</code> attribute on my container. </p>
<p>I'm open when the page loads because I don't have the <code>data-collapsed="true"</code> attribute on my container. </p>
<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.</p>
</div><!-- /section 2 -->
<div data-role="collapsible" data-state="collapsed">
<div data-role="collapsible" data-collapsed="true">
<h3>Section 3: Form elements</h3>
<form action="#" method="get">
<div data-role="fieldcontain">
@ -88,7 +88,7 @@
</form>
</div><!-- /section 3 -->
<div data-role="collapsible" data-state="collapsed">
<div data-role="collapsible" data-collapsed="true">
<h3>Section 4: Collapsed list</h3>
<ul data-role="listview" data-inset="true" data-theme="d">
<li><a href="index.html">Acura</a></li>
@ -120,11 +120,11 @@
<h3>I'm a header in a set of collapsibles</h3>
<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
<div data-role="collapsible" data-state="collapsed">
<div data-role="collapsible" data-collapsed="true">
<h3>I'm a header in a set of collapsibles</h3>
<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
<div data-role="collapsible" data-state="collapsed">
<div data-role="collapsible" data-collapsed="true">
<h3>I'm a header in a set of collapsibles</h3>
<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>

12
docs/content/content-themes.html
View file

@ -28,7 +28,7 @@
<p>To set the color of the collapsible header, add the <code>data-theme</code> attribute to the collapsible container. The icon and body are not currently themable through data attributes, but can be styled directly with custom css.</p>
<code>
&lt;div data-role=&quot;collapsible&quot; data-state=&quot;collapsed&quot; <strong>data-theme=&quot;a&quot;&gt;</strong>
&lt;div data-role=&quot;collapsible&quot; data-collapsed=&quot;true&quot; <strong>data-theme=&quot;a&quot;&gt;</strong>
</code>
<h2>Themed examples</h2>
@ -36,7 +36,7 @@
<div class="ui-body ui-body-a">
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-state="collapsed" data-theme="a">
<div data-role="collapsible" data-collapsed="true" data-theme="a">
<h3>I'm an themed collapsible</h3>
<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->
@ -46,7 +46,7 @@
<div class="ui-body ui-body-b">
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-state="collapsed" data-theme="b">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>I'm an themed collapsible</h3>
<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->
@ -56,7 +56,7 @@
<div class="ui-body ui-body-c">
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-state="collapsed" data-theme="c">
<div data-role="collapsible" data-collapsed="true" data-theme="c">
<h3>I'm an themed collapsible</h3>
<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->
@ -66,7 +66,7 @@
<div class="ui-body ui-body-d">
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-state="collapsed" data-theme="d">
<div data-role="collapsible" data-collapsed="true" data-theme="d">
<h3>I'm an themed collapsible</h3>
<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->
@ -76,7 +76,7 @@
<div class="ui-body ui-body-e">
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-state="collapsed" data-theme="e">
<div data-role="collapsible" data-collapsed="true" data-theme="e">
<h3>I'm an themed collapsible</h3>
<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->

37
js/jquery.mobile.collapsible.js
View file

@ -4,23 +4,24 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* Note: Code is in draft form and is subject to change
*/
(function($){
$.fn.collapsible = function(options){
return $(this).each(function(){
var o = $.extend({
expandCueText: ' click to expand contents',
collapseCueText: ' click to collapse contents',
collapsed: $(this).is('[data-state="collapsed"]'),
heading: '>h1,>h2,>h3,>h4,>h5,>h6,>legend',
theme: $(this).data('theme'),
iconTheme: $(this).data('icontheme') || 'd'
},options);
(function ( $ ) {
$.widget( "mobile.collapsible", $.mobile.widget, {
options: {
expandCueText: ' click to expand contents',
collapseCueText: ' click to collapse contents',
collapsed: false,
heading: '>:header,>legend',
theme: undefined,
iconTheme: 'd'
},
_create: function(){
//define
var collapsibleContain = $(this).addClass('ui-collapsible-contain'),
collapsibleHeading = $(this).find(o.heading).eq(0),
var $el = this.element,
o = this.options,
collapsibleContain = $el.addClass('ui-collapsible-contain'),
collapsibleHeading = $el.find(o.heading).eq(0),
collapsibleContent = collapsibleContain.wrapInner('<div class="ui-collapsible-content"></div>').find('.ui-collapsible-content'),
collapsibleParent = $(this).closest('[data-role=collapsible-set]').addClass('ui-collapsible-set');
collapsibleParent = $el.closest('[data-role="collapsible-set"]').addClass('ui-collapsible-set');
//replace collapsibleHeading if it's a legend
if(collapsibleHeading.is('legend')){
@ -141,6 +142,6 @@ $.fn.collapsible = function(options){
return false;
});
});
};
})(jQuery);
}
});
})( jQuery );