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

Merge branch 'collapsible-redesign'

Browse source
This commit is contained in:
gseguin 2011-09-24 22:12:22 -07:00
commit 5bd72c7b96
6 changed files with 222 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
docs/content/content-collapsible-set.html
View file

@ -72,6 +72,25 @@
</div>
</div>
<p>Here is an example of a collapsible with 3 sections and <code>data-content-theme</code> set</p>
<div data-role="collapsible-set" data-content-theme="c">
<div data-role="collapsible" data-collapsed="false">
<h3>Section F</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-role="collapsible">
<h3>Section G</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-role="collapsible">
<h3>Section H</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><!--/content-primary -->

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

@ -25,7 +25,9 @@
<h2>Collapsible content markup</h2>
<p>To create a collapsible blocks of content, create a container and add the <code> data-role="collapsible"</code> attribute.</p>
<p>Using <code>data-content-theme</code> attribute allows you to set a theme for the content of the collapsible.</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>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>
@ -63,9 +65,9 @@
<h2>Collapsible example</h2>
<p>This page has 4 collapsible containers with different types of content inside.</p>
<div data-role="collapsible" data-collapsed="true">
<div data-role="collapsible">
<h3>Section 1: Collapsed text block</h3>
<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 closed when the page loads because that's the default state of a collapsible.</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 -->
@ -106,6 +108,11 @@
<li><a href="index.html">Ford</a></li>
</ul>
</div><!-- /section 4 -->
<div data-role="collapsible" data-theme="c" data-content-theme="c">
<h3>Section 5: themed content</h3>
<p>I have <code>data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /section 5 -->
<h2>Nested Collapsibles</h2>
<div data-role="collapsible">

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

@ -24,10 +24,12 @@
<div class="content-primary">
<h2>Theming the content area</h2>
<p>The main content area of a page (container with the <code> data-role="content"</code> attribute) should be themed by adding the <code> data-theme</code> attribute to the <code> data-role="page"</code> container to ensure that the background colors are applied to the full page, regardless of the content length. (If you add to the <code> data-theme</code> to the content container, the background color will stop after the content so there may be a gap in color between the content and fixed footer.)</p>
<p>Additionally, the content area can be themed to match the theme of the collapsible header using the <code>data-content-theme</code> attribute.</p>
<code>
&lt;div data-role=&quot;page&quot; <strong> data-theme=&quot;a&quot;</strong>&gt;
</code>
&lt;div data-role=&quot;page&quot; <strong> data-theme=&quot;a&quot;</strong> <strong>data-content-theme=&quot;a&quot;</strong>&gt;
</code>
<h2>Theming collapsible blocks</h2>
<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>
@ -44,6 +46,10 @@
<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 -->
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>I'm a themed collapsible with a themed content</h3>
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div>
</div><!-- /themed container -->
<p><strong>B</strong> theme swatch on content &amp; collapsible</p>
@ -54,6 +60,10 @@
<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 -->
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h3>I'm a themed collapsible with a themed content</h3>
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div>
</div><!-- /themed container -->
<p><strong>C</strong> theme swatch on content &amp; collapsible</p>
@ -64,6 +74,10 @@
<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 -->
<div data-role="collapsible" data-theme="c" data-content-theme="c">
<h3>I'm a themed collapsible with a themed content</h3>
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div>
</div><!-- /themed container -->
<p><strong>D</strong> theme swatch on content &amp; collapsible</p>
@ -74,6 +88,10 @@
<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 -->
<div data-role="collapsible" data-theme="d" data-content-theme="d">
<h3>I'm a themed collapsible with a themed content</h3>
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div>
</div><!-- /themed container -->
<p><strong>E</strong> theme swatch on content &amp; collapsible</p>
@ -84,6 +102,10 @@
<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 -->
<div data-role="collapsible" data-theme="e" data-content-theme="e">
<h3>I'm a themed collapsible with a themed content</h3>
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div>
</div><!-- /themed container -->

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

@ -13,6 +13,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
collapsed: true,
heading: ">:header,>legend",
theme: null,
contentTheme: null,
iconTheme: "d",
initSelector: ":jqmData(role='collapsible')"
},
@ -20,11 +21,11 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
var $el = this.element,
o = this.options,
expandedCls = "ui-btn-up-" + (o.theme || "c"),
collapsible = $el.addClass( "ui-collapsible" ),
collapsibleHeading = $el.find( o.heading ).eq( 0 ),
collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
collapsibleParent = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" );
collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ),
colllapsiblesInSet = collapsibleSet.children( ":jqmData(role='collapsible')" );
// Replace collapsibleHeading if it's a legend
if ( collapsibleHeading.is( "legend" ) ) {
@ -32,6 +33,20 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
collapsibleHeading.next().remove();
}
// If we are in a collapsible set
if ( collapsibleSet.length ) {
// Inherit the theme from collapsible-set
if ( !o.theme ) {
o.theme = collapsibleSet.jqmData( "theme" );
}
// Inherit the content-theme from collapsible-set
if ( !o.contentTheme ) {
o.contentTheme = collapsibleSet.jqmData( "content-theme" );
}
}
collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-btn-up-" + o.contentTheme ) : "");
collapsibleHeading
//drop heading in before content
.insertBefore( collapsibleContent )
@ -47,21 +62,43 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
icon: "plus",
theme: o.theme
})
.find( ".ui-icon" )
.removeAttr( "class" )
.buttonMarkup({
shadow: true,
corners: true,
iconPos: "notext",
icon: "plus",
theme: o.iconTheme
});
if ( !collapsibleParent.length ) {
if ( !collapsibleSet.length ) {
collapsibleHeading
.find( "a:eq(0), .ui-btn-inner" )
.addClass( "ui-corner-top ui-corner-bottom" );
} else {
// If we are in a collapsible set
// Initialize the collapsible set if it's not already initialized
if ( !collapsibleSet.jqmData( "collapsiblebound" ) ) {
collapsibleSet
.jqmData( "collapsiblebound", true )
.bind( "expand", function( event ) {
$( event.target )
.closest( ".ui-collapsible" )
.siblings( ".ui-collapsible" )
.trigger( "collapse" );
});
}
colllapsiblesInSet.first()
.find( "a:eq(0)" )
.addClass( "ui-corner-top" )
.find( ".ui-btn-inner" )
.addClass( "ui-corner-top" );
colllapsiblesInSet.last()
.jqmData( "collapsible-last", true )
.find( "a:eq(0)" )
.addClass( "ui-corner-bottom" )
.find( ".ui-btn-inner" )
.addClass( "ui-corner-bottom" );
if ( collapsible.jqmData( "collapsible-last" ) ) {
collapsibleHeading
.find( "a:eq(0), .ui-btn-inner" )
@ -76,7 +113,9 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
event.preventDefault();
var isCollapse = ( event.type === "collapse" );
var $this = $( this ),
isCollapse = ( event.type === "collapse" ),
contentTheme = o.contentTheme;
collapsibleHeading
.toggleClass( "ui-collapsible-heading-collapsed", isCollapse)
@ -87,11 +126,10 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
.toggleClass( "ui-icon-minus", !isCollapse )
.toggleClass( "ui-icon-plus", isCollapse );
collapsible.toggleClass( "ui-collapsible-collapsed", isCollapse );
$this.toggleClass( "ui-collapsible-collapsed", isCollapse );
collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
collapsibleContent.toggleClass( expandedCls, !isCollapse );
if ( !collapsibleParent.length || collapsible.jqmData( "collapsible-last" ) ) {
if ( contentTheme && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
collapsibleHeading
.find( "a:eq(0), .ui-btn-inner" )
.toggleClass( "ui-corner-bottom", isCollapse );
@ -101,36 +139,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
})
.trigger( o.collapsed ? "collapse" : "expand" );
// Close others in a set
if ( collapsibleParent.length && !collapsibleParent.jqmData( "collapsiblebound" ) ) {
collapsibleParent
.jqmData( "collapsiblebound", true )
.bind( "expand", function( event ) {
$( event.target )
.closest( ".ui-collapsible" )
.siblings( ".ui-collapsible" )
.trigger( "collapse" );
});
var set = collapsibleParent.children( ":jqmData(role='collapsible')" );
set.first()
.find( "a:eq(0)" )
.addClass( "ui-corner-top" )
.find( ".ui-btn-inner" )
.addClass( "ui-corner-top" );
set.last()
.jqmData( "collapsible-last", true )
.find( "a:eq(0)" )
.addClass( "ui-corner-bottom" )
.find( ".ui-btn-inner" )
.addClass( "ui-corner-bottom" );
}
collapsibleHeading
.bind( "vclick", function( event ) {

45
tests/unit/collapsible/collapsible_core.js
View file

@ -116,5 +116,50 @@
]);
});
module( "Theming", {});
asyncTest( "Collapsible", 6, function(){
$.testHelper.pageSequence([
function(){
$.testHelper.openPage( "#collapsible-with-theming" );
},
function() {
var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a");
ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-a" ), "Content of first collapsible should NOT have class ui-btn-up-a");
ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b");
ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-b" ), "Content of second collapsible should have class ui-btn-up-b");
ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-c" ), "Heading of third collapsible should have class ui-btn-up-c");
ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-c" ), "Content of third collapsible should have class ui-btn-up-c");
start();
}
]);
});
asyncTest( "Collapsible Set", function(){
$.testHelper.pageSequence([
function(){
$.testHelper.openPage( "#collapsible-set-with-theming" );
},
function() {
var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a");
ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-a" ), "Content of first collapsible should NOT have class ui-btn-up-a");
ok( collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of first collapsible should NOT have class ui-btn-up-d");
ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b");
ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-b" ), "Content of second collapsible should have class ui-btn-up-b");
ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of third collapsible should have class ui-btn-up-d");
ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of third collapsible should have class ui-btn-up-d");
ok( !collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-collapsible-content-collapsed" ), "Content of third collapsible should NOT have class ui-collapsible-content-collapsed");
ok( collapsibles.eq(3).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of fourth collapsible should have class ui-btn-up-d");
ok( collapsibles.eq(3).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of fourth collapsible should have class ui-btn-up-d");
start();
}
]);
});
})( jQuery );

69
tests/unit/collapsible/index.html
View file

@ -89,6 +89,75 @@
have the "collapsed" state; you need to expand the header to see me.</p>
</div>
</div>
<div data-nstest-role="collapsible" >
<h3>Section E</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-with-theming'>
<div data-nstest-role="header">
<h1>Themed collapsibles</h1>
</div>
<div data-nstest-role="content">
<div data-nstest-role="collapsible" data-nstest-theme="a">
<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-theme="b" data-nstest-content-theme="b">
<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-theme="c" data-nstest-content-theme="c" 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>
<div data-nstest-role="page" id='collapsible-set-with-theming'>
<div data-nstest-role="header">
<h1>Themed collapsibles</h1>
</div>
<div data-nstest-role="content">
<div data-nstest-role="collapsible-set" data-nstest-theme="d" data-nstest-content-theme="d">
<div data-nstest-role="collapsible" data-nstest-theme="a">
<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-theme="b" data-nstest-content-theme="b">
<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="false">
<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">
<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>