Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added support for grouped collapsibles that make accordions. Parent element just needs a data-role of collapsible-set. Fixes #87, Fixes #178

Browse source
This commit is contained in:
scottjehl 2010-10-23 10:20:06 -04:00
parent ceca38b8e0
commit 25c2ce5ce6
3 changed files with 105 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -101,8 +101,33 @@
</ul>
</div><!-- /section 4 -->
<h2>Nested Collapsibles</h2>
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
<div data-role="collapsible">
<h3>I'm a nested collapsible header</h3>
<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
</div>
</div>
<h2>Collapsible sets</h2>
<p>By giving a parent element a data-role of collapsible-set, you can cause other collapsibles within that parent to close whenever a new one is opened, acting like an accordion widget:</p>
<div data-role="collapsible-set">
<div data-role="collapsible">
<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">
<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">
<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>
</div><!-- /content -->

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

@ -19,7 +19,8 @@ $.fn.collapsible = function(options){
//define
var collapsibleContain = $(this).addClass('ui-collapsible-contain'),
collapsibleHeading = $(this).find(o.heading).eq(0),
collapsibleContent = collapsibleContain.wrapInner('<div class="ui-collapsible-content"></div>').find('.ui-collapsible-content');
collapsibleContent = collapsibleContain.wrapInner('<div class="ui-collapsible-content"></div>').find('.ui-collapsible-content'),
collapsibleParent = $(this).closest('[data-role=collapsible-set]').addClass('ui-collapsible-set');
//replace collapsibleHeading if it's a legend
if(collapsibleHeading.is('legend')){
@ -36,17 +37,12 @@ $.fn.collapsible = function(options){
.wrapInner('<a href="#" class="ui-collapsible-heading-toggle"></a>')
.find('a:eq(0)')
.buttonMarkup({
shadow: true,
shadow: !!!collapsibleParent.length,
corners:false,
iconPos: 'left',
icon: 'plus',
theme: o.theme
})
.removeClass('ui-btn-corner-all')
.addClass('ui-corner-all')
.find('.ui-btn-inner')
.removeClass('ui-btn-corner-all')
.addClass('ui-corner-all')
.find('.ui-icon')
.removeAttr('class')
.buttonMarkup({
@ -56,35 +52,91 @@ $.fn.collapsible = function(options){
icon: 'plus',
theme: o.iconTheme
});
if( !collapsibleParent.length ){
collapsibleHeading
.find('a:eq(0)')
.addClass('ui-corner-all')
.find('.ui-btn-inner')
.addClass('ui-corner-all');
}
else {
if( collapsibleContain.data('collapsible-last') ){
collapsibleHeading
.find('a:eq(0), .ui-btn-inner')
.addClass('ui-corner-bottom');
}
}
//events
collapsibleContain
.bind('collapse', function(){
collapsibleHeading
.addClass('ui-collapsible-heading-collapsed')
.find('.ui-collapsible-heading-status').text(o.expandCueText);
collapsibleHeading.find('.ui-icon').removeClass('ui-icon-minus').addClass('ui-icon-plus');
collapsibleContent.addClass('ui-collapsible-content-collapsed').attr('aria-hidden',true);
.bind('collapse', function(event){
if( !event.isDefaultPrevented() ){
event.preventDefault();
collapsibleHeading
.addClass('ui-collapsible-heading-collapsed')
.find('.ui-collapsible-heading-status').text(o.expandCueText);
collapsibleHeading.find('.ui-icon').removeClass('ui-icon-minus').addClass('ui-icon-plus');
collapsibleContent.addClass('ui-collapsible-content-collapsed').attr('aria-hidden',true);
if( collapsibleContain.data('collapsible-last') ){
collapsibleHeading
.find('a:eq(0), .ui-btn-inner')
.addClass('ui-corner-bottom');
}
}
})
.bind('expand', function(){
collapsibleHeading
.removeClass('ui-collapsible-heading-collapsed')
.find('.ui-collapsible-heading-status').text(o.collapseCueText);
collapsibleHeading.find('.ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-minus');
collapsibleContent.removeClass('ui-collapsible-content-collapsed').attr('aria-hidden',false);
.bind('expand', function(event){
if( !event.isDefaultPrevented() ){
event.preventDefault();
collapsibleHeading
.removeClass('ui-collapsible-heading-collapsed')
.find('.ui-collapsible-heading-status').text(o.collapseCueText);
collapsibleHeading.find('.ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-minus');
collapsibleContent.removeClass('ui-collapsible-content-collapsed').attr('aria-hidden',false);
if( collapsibleContain.data('collapsible-last') ){
collapsibleHeading
.find('a:eq(0), .ui-btn-inner')
.removeClass('ui-corner-bottom');
}
}
})
.trigger(o.collapsed ? 'collapse' : 'expand');
//close others in a set
if( collapsibleParent.length && !collapsibleParent.data("collapsiblebound") ){
collapsibleParent
.data("collapsiblebound", true)
.bind("expand", function( event ){
$(this).find( ".ui-collapsible-contain" )
.not( $(event.target).closest( ".ui-collapsible-contain" ) )
.not( "> .ui-collapsible-contain .ui-collapsible-contain" )
.trigger( "collapse" );
})
var set = collapsibleParent.find('[data-role=collapsible]')
set.first()
.find('a:eq(0)')
.addClass('ui-corner-top')
.find('.ui-btn-inner')
.addClass('ui-corner-top');
set.last().data('collapsible-last', true)
}
collapsibleHeading.click(function(){
if( collapsibleHeading.is('.ui-collapsible-heading-collapsed') ){
collapsibleContain.triggerHandler('expand');
collapsibleContain.trigger('expand');
}
else {
collapsibleContain.triggerHandler('collapse');
collapsibleContain.trigger('collapse');
}
return false;
});

5
themes/default/jquery.mobile.collapsible.css
View file

@ -12,4 +12,7 @@
.ui-collapsible-heading a span.ui-btn .ui-icon { left: 0; margin-top: -10px; }
.ui-collapsible-heading-status { position:absolute; left:-99999px; }
.ui-collapsible-content { display: block; padding: 10px 0 10px 8px; }
.ui-collapsible-content-collapsed { display: none; }
.ui-collapsible-content-collapsed { display: none; }
.ui-collapsible-set { margin: .5em 0; }
.ui-collapsible-set .ui-collapsible-contain { margin: -1px 0 0; }