Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

feature request: tabviewer = support for data-type="horizontal" on collapsible-sets #4865

Closed
wants to merge 6 commits into from
Closed

feature request: tabviewer = support for data-type="horizontal" on collapsible-sets #4865

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2462dfc
add support for collapsible-set tab-viewer
frequent Aug 19, 2012
7cfa414
add support for collapsible-set tab-viewer
frequent Aug 19, 2012
e41426d
add support for collapsible-set tab-viewer
frequent Aug 19, 2012
0316591
Merge remote-tracking branch 'jquery-mobile/master'
frequent Sep 10, 2012
6bfc959
updated tabview
frequent Sep 12, 2012
23f7ef0
bugfixes
frequent Sep 13, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions css/structure/jquery.mobile.collapsible.css
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -30,3 +30,38 @@
.ui-collapsible-set { margin: .5em 0; } .ui-collapsible-set { margin: .5em 0; }
.ui-collapsible-set .ui-collapsible { margin: -1px 0 0; } .ui-collapsible-set .ui-collapsible { margin: -1px 0 0; }
.ui-collapsible-set .ui-collapsible:first-child { margin-top: 0; } .ui-collapsible-set .ui-collapsible:first-child { margin-top: 0; }

/* horizontal tabs */
.ui-collapsible-set-horizontal { margin: .5em -15px; }
.ui-collapsible-no-inset { margin-left: 0px; margin-right: 0px;}
.ui-collapsible-set-horizontal .ui-collapsible h3 .ui-btn { border-bottom-width: 1px; }
.ui-collapsible-set-horizontal .ui-collapsible h3 .ui-btn .ui-btn-text { white-space: normal; }
.ui-collapsible-set .ui-collapsible { margin-top: 0;}
.ui-collapsible-set-horizontal.ui-collapsible-inset { margin: 0 15px; }
.ui-collapsible-set-horizontal .ui-collapsible-heading .ui-btn-inner { padding-left: 20px;}
.ui-collapsible-set-horizontal .ui-collapsible-heading .ui-btn-icon-left .ui-btn-inner { padding-left: 40px;}
.ui-collapsible-set-horizontal .ui-collapsible-heading { width: 100%; margin: 0; }
.ui-collapsible-set-horizontal .ui-collapsible-content { position: relative; margin: 0; padding: 0; }
/* 2tabs */
.ui-collapsible-set-horizontal.ui-grid-a .ui-block-a .ui-collapsible-content { width: 199.3%; }
.ui-collapsible-set-horizontal.ui-grid-a .ui-block-b .ui-collapsible-content { left: -99.19%; width: 198.5%;}
/* 3tabs */
.ui-collapsible-set-horizontal.ui-grid-b .ui-block-a .ui-collapsible-content { width: 299.5%; }
.ui-collapsible-set-horizontal.ui-grid-b .ui-block-b .ui-collapsible-content { width: 299.5%; left: -100%; }
.ui-collapsible-set-horizontal.ui-grid-b .ui-block-c .ui-collapsible-content { width: 299.5%; left: -200%; }
/* 4tabs */
.ui-collapsible-set-horizontal.ui-grid-c .ui-block-a .ui-collapsible-content { width: 399.5%; }
.ui-collapsible-set-horizontal.ui-grid-c .ui-block-b .ui-collapsible-content { width: 399.5%; left: -100%; }
.ui-collapsible-set-horizontal.ui-grid-c .ui-block-c .ui-collapsible-content { width: 399.5%; left: -200%; }
.ui-collapsible-set-horizontal.ui-grid-c .ui-block-d .ui-collapsible-content { width: 399.5%; left: -300%; }
/* 5tabs */
.ui-collapsible-set-horizontal.ui-grid-d .ui-block-a .ui-collapsible-content { width: 499.5%; }
.ui-collapsible-set-horizontal.ui-grid-d .ui-block-b .ui-collapsible-content { width: 499.5%; left: -100%; }
.ui-collapsible-set-horizontal.ui-grid-d .ui-block-c .ui-collapsible-content { width: 499.5%; left: -200%; }
.ui-collapsible-set-horizontal.ui-grid-d .ui-block-d .ui-collapsible-content { width: 499.5%; left: -300%; }
.ui-collapsible-set-horizontal.ui-grid-d .ui-block-e .ui-collapsible-content { width: 499.5%; left: -400%; }
/* misc */
.ui-collapsible-set-horizontal .ui-collapsible .ui-btn-active { border-bottom-width: 0; }
.ui-collapsible-set-horizontal .ui-collapsible-collapsed .ui-btn { border-bottom-width: 1px; }
.ui-collapsible-set-horizontal .ui-collapsible .ui-collapsible-content { border-top-width: 0; }
.ui-collapsible-set-horizontal .ui-collapsible-heading-status { position: absolute !important; left: -9999px; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
27 changes: 14 additions & 13 deletions js/widgets/collapsible.js
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
contentTheme: null, contentTheme: null,
inset: true, inset: true,
mini: false, mini: false,
direction: "",
initSelector: ":jqmData(role='collapsible')" initSelector: ":jqmData(role='collapsible')"
}, },
_create: function() { _create: function() {
Expand All @@ -31,7 +32,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
expandedIcon = $el.jqmData( "expanded-icon" ) || o.expandedIcon, expandedIcon = $el.jqmData( "expanded-icon" ) || o.expandedIcon,
collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).children( ".ui-collapsible-content" ), collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).children( ".ui-collapsible-content" ),
collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ); collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" );

// Replace collapsibleHeading if it's a legend // Replace collapsibleHeading if it's a legend
if ( collapsibleHeading.is( "legend" ) ) { if ( collapsibleHeading.is( "legend" ) ) {
collapsibleHeading = $( "<div role='heading'>"+ collapsibleHeading.html() +"</div>" ).insertBefore( collapsibleHeading ); collapsibleHeading = $( "<div role='heading'>"+ collapsibleHeading.html() +"</div>" ).insertBefore( collapsibleHeading );
Expand All @@ -40,6 +40,10 @@ $.widget( "mobile.collapsible", $.mobile.widget, {


// If we are in a collapsible set // If we are in a collapsible set
if ( collapsibleSet.length ) { if ( collapsibleSet.length ) {
// Add direction
if ( collapsibleSet.jqmData( "type" ) == "horizontal" ){
o.direction = "horizontal";
}
// Inherit the theme from collapsible-set // Inherit the theme from collapsible-set
if ( !o.theme ) { if ( !o.theme ) {
o.theme = collapsibleSet.jqmData( "theme" ) || $.mobile.getInheritedTheme( collapsibleSet, "c" ); o.theme = collapsibleSet.jqmData( "theme" ) || $.mobile.getInheritedTheme( collapsibleSet, "c" );
Expand All @@ -48,7 +52,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
if ( !o.contentTheme ) { if ( !o.contentTheme ) {
o.contentTheme = collapsibleSet.jqmData( "content-theme" ); o.contentTheme = collapsibleSet.jqmData( "content-theme" );
} }

// Get the preference for collapsed icon in the set // Get the preference for collapsed icon in the set
if ( !o.collapsedIcon ) { if ( !o.collapsedIcon ) {
o.collapsedIcon = collapsibleSet.jqmData( "collapsed-icon" ); o.collapsedIcon = collapsibleSet.jqmData( "collapsed-icon" );
Expand Down Expand Up @@ -77,15 +80,14 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
o.theme = $.mobile.getInheritedTheme( $el, "c" ); o.theme = $.mobile.getInheritedTheme( $el, "c" );
} }
} }

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

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


collapsedIcon = $el.jqmData( "collapsed-icon" ) || o.collapsedIcon || "plus"; collapsedIcon = $el.jqmData( "collapsed-icon" ) || o.collapsedIcon || ( o.direction == "horizontal" ? undefined : "plus" );
expandedIcon = $el.jqmData( "expanded-icon" ) || o.expandedIcon || "minus"; expandedIcon = $el.jqmData( "expanded-icon" ) || o.expandedIcon || ( o.direction == "horizontal" ? undefined : "minus" );


collapsibleHeading collapsibleHeading
//drop heading in before content //drop heading in before content
Expand All @@ -99,7 +101,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
.buttonMarkup({ .buttonMarkup({
shadow: false, shadow: false,
corners: false, corners: false,
iconpos: $el.jqmData( "iconpos" ) || o.iconPos || "left", iconpos: $el.jqmData( "iconpos" ) || o.iconPos || ( collapsedIcon == undefined ? null : "left" ),
icon: collapsedIcon, icon: collapsedIcon,
mini: o.mini, mini: o.mini,
theme: o.theme theme: o.theme
Expand All @@ -120,7 +122,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
contentTheme = o.contentTheme; contentTheme = o.contentTheme;


event.preventDefault(); event.preventDefault();

collapsibleHeading collapsibleHeading
.toggleClass( "ui-collapsible-heading-collapsed", isCollapse ) .toggleClass( "ui-collapsible-heading-collapsed", isCollapse )
.find( ".ui-collapsible-heading-status" ) .find( ".ui-collapsible-heading-status" )
Expand All @@ -129,14 +130,14 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
.find( ".ui-icon" ) .find( ".ui-icon" )
.toggleClass( "ui-icon-" + expandedIcon, !isCollapse ) .toggleClass( "ui-icon-" + expandedIcon, !isCollapse )
// logic or cause same icon for expanded/collapsed state would remove the ui-icon-class // logic or cause same icon for expanded/collapsed state would remove the ui-icon-class
.toggleClass( "ui-icon-" + collapsedIcon, ( isCollapse || expandedIcon === collapsedIcon ) ) .toggleClass( "ui-icon-" + collapsedIcon, ( isCollapse || expandedIcon === collapsedIcon ) )
.end() .end()
.find( "a" ).first().removeClass( $.mobile.activeBtnClass ); .find( "a" ).first()[o.direction == 'horizontal' ? 'toggleClass':'removeClass']( $.mobile.activeBtnClass , ( o.direction == "horizontal" ? !isCollapse : false ) );

$this.toggleClass( "ui-collapsible-collapsed", isCollapse ); $this.toggleClass( "ui-collapsible-collapsed", isCollapse );
collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse ); collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );


if ( contentTheme && !!o.inset && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) { if ( contentTheme && !!o.inset && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) && o.direction != "horizontal" ) {
collapsibleHeading collapsibleHeading
.find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) ) .find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
.toggleClass( "ui-corner-bottom", isCollapse ); .toggleClass( "ui-corner-bottom", isCollapse );
Expand Down Expand Up @@ -171,4 +172,4 @@ $( document ).bind( "pagecreate create", function( e ) {
})( jQuery ); })( jQuery );
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
}); });
//>>excludeEnd("jqmBuildExclude"); //>>excludeEnd("jqmBuildExclude");
75 changes: 55 additions & 20 deletions js/widgets/collapsibleSet.js
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -11,12 +11,19 @@ define( [ "jquery", "../jquery.mobile.widget", "./collapsible" ], function( $ )


$.widget( "mobile.collapsibleset", $.mobile.widget, { $.widget( "mobile.collapsibleset", $.mobile.widget, {
options: { options: {
initSelector: ":jqmData(role='collapsible-set')" grid: null,
inset: true
}, },
_create: function() { _create: function() {
var $el = this.element.addClass( "ui-collapsible-set" ), var $el = this.element.addClass( "ui-collapsible-set" ),
o = this.options; o = $.extend({ direction: $el.jqmData("type") || "" }, this.options );

toggleCorners = o.direction == "horizontal" ? [ "ui-corner-tl ui-corner-bl","ui-corner-tr ui-corner-br" ] : ["ui-corner-top ", "ui-corner-bottom" ];


// Add horizontal class and grid
if ( o.direction == "horizontal" ) {
$el.addClass("ui-collapsible-set-horizontal").grid({ grid: this.options.grid });
}
// Inherit the theme from collapsible-set // Inherit the theme from collapsible-set
if ( !o.theme ) { if ( !o.theme ) {
o.theme = $.mobile.getInheritedTheme( $el, "c" ); o.theme = $.mobile.getInheritedTheme( $el, "c" );
Expand All @@ -25,27 +32,55 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
if ( !o.contentTheme ) { if ( !o.contentTheme ) {
o.contentTheme = $el.jqmData( "content-theme" ); o.contentTheme = $el.jqmData( "content-theme" );
} }

if ( $el.jqmData( "inset" ) !== undefined ) { if ( $el.jqmData( "inset" ) !== undefined ) {
o.inset = $el.jqmData( "inset" ); o.inset = $el.jqmData( "inset" );
} }
o.inset = o.inset !== undefined ? o.inset : true; // Add inset class

if ( !!o.inset && o.direction == "horizontal" ){
$el.addClass( "ui-collapsible-no-inset" );
}
// Initialize the collapsible set if it's not already initialized // Initialize the collapsible set if it's not already initialized
if ( !$el.jqmData( "collapsiblebound" ) ) { if ( !$el.jqmData( "collapsiblebound" ) ) {
$el $el
.jqmData( "collapsiblebound", true ) .jqmData( "collapsiblebound", true )
.bind( "expand collapse", function( event ) { .bind( "expand collapse", function( event ) {
var isCollapse = ( event.type === "collapse" ), var isCollapse = ( event.type === "collapse" ),
collapsible = $( event.target ).closest( ".ui-collapsible" ), collapsible = $( event.target ).closest( ".ui-collapsible" ),
widget = collapsible.data( "collapsible" ); widget = collapsible.data( "collapsible" ),
if ( collapsible.jqmData( "collapsible-last" ) && !!o.inset ) { index = $el.find('.ui-collapsible').index( collapsible ),
collapsible.find( ".ui-collapsible-heading" ).first() togClass = "ui-corner-bottom",
.find( "a" ).first() tog = function() {
.toggleClass( "ui-corner-bottom", isCollapse ) if ( !!o.inset ){
.find( ".ui-btn-inner" ) // triggers on clicked or first&last collapsible
.toggleClass( "ui-corner-bottom", isCollapse ); for ( var i = 0; i < collapsible.length; i++ ){
index = i;
togClass = o.direction == "horizontal" ? ( index == 0 ? "ui-corner-bl" : "ui-corner-br") : "ui-corner-bottom";
collapsible.eq(i).find( widget.options.heading ).first()
.find( "a" ).first()
.toggleClass( togClass, isCollapse )
.find( ".ui-btn-inner" )
.toggleClass( togClass, isCollapse );
}
}
};

// toggle content bottom corners
if ( !!o.inset && ( o.direction == "horizontal" || collapsible.jqmData( "collapsible-last" ) ) ) {
collapsible.find( ".ui-collapsible-content" ).toggleClass( "ui-corner-bottom", !isCollapse ); collapsible.find( ".ui-collapsible-content" ).toggleClass( "ui-corner-bottom", !isCollapse );
}
if ( o.direction == "horizontal" ){
// set collapsible to first&last and set event
collapsible = $el.find('.ui-collapsible').first().add( $el.find('.ui-collapsible').eq( $el.find('.ui-collapsible').length-1) );
if ( event.type == "expand" ){
isCollapse = false;
tog();
} else if ( $el.find('.ui-collapsible').length == $el.find('.ui-collapsible-collapsed').length ) {
isCollapse = true;
tog();
}
// plain collapsibleSet
} else if (collapsible.jqmData( "collapsible-last" ) && !!o.inset ) {
tog();
} }
}) })
.bind( "expand", function( event ) { .bind( "expand", function( event ) {
Expand Down Expand Up @@ -77,7 +112,7 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
collapsiblesInSet = $el.children( ":jqmData(role='collapsible')" ); collapsiblesInSet = $el.children( ":jqmData(role='collapsible')" );


$.mobile.collapsible.prototype.enhance( collapsiblesInSet.not( ".ui-collapsible" ) ); $.mobile.collapsible.prototype.enhance( collapsiblesInSet.not( ".ui-collapsible" ) );

// clean up borders // clean up borders
if ( !!o.inset ) { if ( !!o.inset ) {
collapsiblesInSet.each(function() { collapsiblesInSet.each(function() {
Expand All @@ -92,18 +127,18 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
collapsiblesInSet.first() collapsiblesInSet.first()
.find( "a" ) .find( "a" )
.first() .first()
.addClass( "ui-corner-top" ) .addClass( toggleCorners[0] )
.find( ".ui-btn-inner" ) .find( ".ui-btn-inner" )
.addClass( "ui-corner-top" ); .addClass( toggleCorners[0] );

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


Expand All @@ -115,4 +150,4 @@ $( document ).bind( "pagecreate create", function( e ) {
})( jQuery ); })( jQuery );
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
}); });
//>>excludeEnd("jqmBuildExclude"); //>>excludeEnd("jqmBuildExclude");