Skip to content
This repository

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

Closed
wants to merge 6 commits into from

3 participants

Sven Franck Todd Parker Jasper de Groot
Sven Franck

I've been working on this for a while and wanted to share, because I think tabs are still something that's missing in JQM.

The tabviewer is a collapsible set with data-type="horizontal" specified. It's based on button controlgroups and content-grids, which I both fiddled into the collapsible widgets.

It's not a lot of changes (except for the CSS), so I gave up trying to make this a standalone widget/plugin.

A demo page can be found here.

The trickiest parts are getting the corner toggles right and embedding a tabviewer within page contents without having to specify a height for the collapsible set. Both are working ok now. It needs some polishing (data-inset, content-corners, active class, small displays), but I'm already using it in production and it's working well.

added some commits August 19, 2012
Sven Franck add support for collapsible-set tab-viewer
- Adding direction and checking for it in a collapsible-set. The direction is specified like in a controlgroup by setting data-type="horizontal".
- Adding a check for direction when toggling the bottom class of the last collapsible in a set to prevent adding bottom-corners on the last tab.
2462dfc
Sven Franck add support for collapsible-set tab-viewer
- Adding `grid` to use JQM grids on the collapsible
- Adding `direction` for collapsible-sets with `data-type="horizontal"`
- Adding `toggleCorners` which sets corners for horizontal/regular collapsibles
- Adding an `index` (which collapsible), `togClass` (which class to toggle) to event handler
- Moved toggling of classes into function `tog()`
- In `tog()` loop through variable `collapsible`, which will be a single collapsible (default) or the first and last collapsible in a horizontal set
- Setting `index` to loop count `i`(0 or 1) will switch between toggling bottom left/right corners on the first/last collapsible in a horizontal set. On regular collapsible sets, `togClass` defaults to `ui-corner-bottom` and `index` will always be 0, as there is only one element passed into the function.
- The function `tog()` is called from the following `if statement`. In horizontal collapsibles, the variable `collapsible` is changed to first AND last collapsible. The opening `expand` sets `isCollapse=false` to remove corners. Adding corners must only be done on the single `collapse` event and not the `collapse` events triggered together with the single `expand`. Therefore I'm comparing all collapsible to open collapsibles. If both match the `collapse` event was from closing a collapsible, so this triggers `tog()` with first/last collapsible and `isCollapse=true` to add back the bottom corners. 
- Inside `refresh` cleaning the corners has been changed to clean depending on `toggleCols` which in horizontal collapsible-sets defaults to top-left/bottom-left and top-right/bottom-right, while regular sets get the default top/bottom corners removed.
7cfa414
Sven Franck add support for collapsible-set tab-viewer
- Added rules for horizontal collapsibles based on JQM grid.
e41426d
Todd Parker

@frequent - this is a very cool idea. I really like the idea of just using data-type="horizontal" on the collapsible sets to make a tab. Two bits of feedback:

  • I think these should default to not showing an icon, just like we do for the horizontal checks/radios. Maybe if you set the icons explicitly for the expanded/collapsed, we can show them but by default, not having icons leaves more room for text and makes these look more like tabs.

  • Since there isn't a physical connection between the header and content as there is in an accordion, I'd like to apply the active class to the expanded collapsible to show an on state.

Is this coded to handle any number of tabs (within reason)?
I also wonder if we should apply a content theme by default or just document that you should add this.

Maybe @uGoMobi can work with you to refine this a bit and we can try to land this for 1.3.

Jasper de Groot
Owner

@frequent

Nice idea! I am going to look into your PR and @toddparker his comments.

Jasper

BTW - It's better to create a branch for a PR.

Sven Franck

@toddparker

Sounds good. I agree with the icons (need a lot of space, will try to remove) and content-theme (make an option). I have set it up for 4 tabs right now, but maybe it can be done like the navbar to wrap to multiple lines (checking). Active state should already by there. I might have overwritten the CSS to not show it (also checking).

@uGoMobi

I'm only "white-belt" in Github. So I set up a branch in my local repo, make my changes in there. Then do a normal pull-request?

Jasper de Groot
Owner

@frequent

Yes. If you do it like that you will see that the PR will be a request to merge [your branch name] into master.
If you want to make changes afterwards you can commit local and push that branch again. The new commits will be added to the PR.
It's better to keep your master branch in sync with the jQuery Mobile repo to avoid git conflicts and unrelated commits being added to this PR.

Sven Franck

@uGoMobi - Ok. I will try that. I have the non-icon default working (based on radios). Looking at active state and 4+ tabs next. I guess the easiest way to do 4+ is to mimic the footer, which is also based on JQM grids, isn't it? If I can get it to work the tabs would "break" to two rows if more than 5 are used. Let see if I can get this to work.

Todd Parker

@frequent - yeah, take a look at how we approached the navbar, that will be a very solid start.

Todd Parker

One thing to consider is whether the is enough shared logic with collapsibles to make tabs part of that plugin. I like the elegance of the idea, but if there is a lot of difference in the appearance or behavior that requires you to have to work against collapsibles, we can build a separate tabs plugin.

Sven Franck

@toddparker - Ok. Trying to fit into collapsibles first. Seems to work so far without bloating up the code

Sven Franck

@uGoMobi, @toddparker: need your feedback on some points.

1) (done) - keep active class on active collaspibles
2) (done) - if not specified, tabs are without icons by default
3) (need input!) - max number of tabs: This is tricky... 5 is no problem, also breaking to multiple lines if more than 5 tabs (same as navbar). I have been fiddling with another approach (dummy), where I'm trying to get by without setting any width/min-width on the tabs and just expand depending on text size while breaking to multiple lines on smaller screens. I have pretty much tried all CSS trickery I know but I can't fill the top row gaps when the screen shrinks. Do you have any idea if this is possible at all? If so, I would try making element four and five into first and last, so they would shrink/grow independently (so I can set corners).

Todos:
4) (will do next) data-inset not working yet
5) (will do next) set up with/without data-content-theme
6) (what do you think?) data-icons-only="true" on small screens if icons are specified on all collapsibles
7) (what do you think?) data-bottom-bar="true" to add a footer to the content section (sample coming up)
8) (what do you think?) data-tabs="left|right|bottom|top" just an idea, but I saw a nice native app using sidebars along header/footer. I would give it a try and see if this is settable with a class and CSS, so the tabs would be the sidebar.

Todd Parker

Hi @frequent - Good to hear you're making progress. In general, I'd rather keep this simpler wherever possible but here are a few answers...

1 & 2 - Great. Is there an updated demo?
3 - I can see this getting complex. I'd vote to just to just max be 5 to avoid needing to stack to multiple rows because that's not good UI.
4 - this will be a good one to get working
5 - this should work without, but I can see us recommending that they use a theme for better visual connection
6 - i see the appeal, but let's just truncate text for now and look at this later
7 - seems like we could just allow people to add a footer to the content and we can make sure the styles look ok. I wouldn't add anything more than that.
8 - this would be nice, but i'd like to get the minimum in and see how much that adds to the code, then decide what to add. Bottom would be a good next step imho.

Sven Franck

@Toddparker, @uGoMobi

I have updated the tabview sample page to show with/without icons/content-theme and data-inset options.

So far it looks ok, although I will need to polish small displays and see how to fine tune the content-theme width. Let me know what else you find, so I can try to include it in my next edits (hopefully in the branch, which I still haven't figured out how to commit to...)

Todd Parker

Looks like these will need some more styling cleanup but we can help out there - maybe hop on IRC to discuss.

Is there a way for me to see a diff of what changes you've made to the JS and CSS so far?

Sven Franck

@Toddparker - yeah, I'll hop on later today.

I have made a repo with commented collapsible.js, collapsibleSet.js and jquery.mobile.collapsible.css.

Just follow my xxx frequent labelled comments on all changes and let me know if this is workable.

Jasper de Groot
Owner

hi @frequent

Thanks for all the work so far!

I had a look at your sample page and was wondering if we can think of a different approach to make the collapsible content full width and stick to the left. The problem with the fixed width is that you have to set the padding of the collapsible content to 0. Using box-sizing border-box would solve this for most browsers, but unfortunately IE7/8 and WP don't support this.

Let's discuss on IRC.

Sven Franck

@uGoMobi - ok. I'm on.

Jasper de Groot
Owner

@frequent - I can't get on IRC because IRCCloud is down due to maintenance. Will keep trying or look for another IRC client if it takes too long.

Sven Franck

@uGoMobi - I'm using Firefox Chatzilla extension. No IRC expert, but it seems to do it's job.

Sven Franck

@uGoMobi - did you have any luck in css- ing the collapsle content section? not so easy...

Jasper de Groot
Owner

@frequent - I tried some different approaches, but didn't find a good solution yet. I have to spend some more time on it.

Todd Parker

We've decided to look at pulling in the UI tab widget for 1.5 so we probably won't pursue this approach since it will be duplicative. @frequent - if you end up getting this to work as an extension, please release it and we'll promote it ont eh resources page.

Todd Parker toddparker closed this November 07, 2012
Sven Franck

@toddparker: yeah, I saw it in the roadmap. I will try to polish it some and let you know once it's working.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 6 unique commits by 1 author.

Aug 19, 2012
Sven Franck add support for collapsible-set tab-viewer
- Adding direction and checking for it in a collapsible-set. The direction is specified like in a controlgroup by setting data-type="horizontal".
- Adding a check for direction when toggling the bottom class of the last collapsible in a set to prevent adding bottom-corners on the last tab.
2462dfc
Sven Franck add support for collapsible-set tab-viewer
- Adding `grid` to use JQM grids on the collapsible
- Adding `direction` for collapsible-sets with `data-type="horizontal"`
- Adding `toggleCorners` which sets corners for horizontal/regular collapsibles
- Adding an `index` (which collapsible), `togClass` (which class to toggle) to event handler
- Moved toggling of classes into function `tog()`
- In `tog()` loop through variable `collapsible`, which will be a single collapsible (default) or the first and last collapsible in a horizontal set
- Setting `index` to loop count `i`(0 or 1) will switch between toggling bottom left/right corners on the first/last collapsible in a horizontal set. On regular collapsible sets, `togClass` defaults to `ui-corner-bottom` and `index` will always be 0, as there is only one element passed into the function.
- The function `tog()` is called from the following `if statement`. In horizontal collapsibles, the variable `collapsible` is changed to first AND last collapsible. The opening `expand` sets `isCollapse=false` to remove corners. Adding corners must only be done on the single `collapse` event and not the `collapse` events triggered together with the single `expand`. Therefore I'm comparing all collapsible to open collapsibles. If both match the `collapse` event was from closing a collapsible, so this triggers `tog()` with first/last collapsible and `isCollapse=true` to add back the bottom corners. 
- Inside `refresh` cleaning the corners has been changed to clean depending on `toggleCols` which in horizontal collapsible-sets defaults to top-left/bottom-left and top-right/bottom-right, while regular sets get the default top/bottom corners removed.
7cfa414
Sven Franck add support for collapsible-set tab-viewer
- Added rules for horizontal collapsibles based on JQM grid.
e41426d
Sep 10, 2012
Sven Franck Merge remote-tracking branch 'jquery-mobile/master' 0316591
Sep 13, 2012
Sven Franck updated tabview 6bfc959
Sven Franck bugfixes 23f7ef0
This page is out of date. Refresh to see the latest.
35  css/structure/jquery.mobile.collapsible.css
@@ -30,3 +30,38 @@
30 30
 .ui-collapsible-set { margin: .5em 0; }
31 31
 .ui-collapsible-set .ui-collapsible { margin: -1px 0 0; }
32 32
 .ui-collapsible-set .ui-collapsible:first-child { margin-top: 0; }
  33
+
  34
+/* horizontal tabs */
  35
+.ui-collapsible-set-horizontal { margin: .5em -15px; }
  36
+.ui-collapsible-no-inset { margin-left: 0px; margin-right: 0px;}
  37
+.ui-collapsible-set-horizontal .ui-collapsible h3 .ui-btn { border-bottom-width: 1px; }	
  38
+.ui-collapsible-set-horizontal .ui-collapsible h3 .ui-btn .ui-btn-text { white-space: normal; }
  39
+.ui-collapsible-set .ui-collapsible { margin-top: 0;}
  40
+.ui-collapsible-set-horizontal.ui-collapsible-inset { margin: 0 15px;  }
  41
+.ui-collapsible-set-horizontal .ui-collapsible-heading .ui-btn-inner { padding-left: 20px;} 
  42
+.ui-collapsible-set-horizontal .ui-collapsible-heading .ui-btn-icon-left .ui-btn-inner { padding-left: 40px;} 
  43
+.ui-collapsible-set-horizontal .ui-collapsible-heading { width: 100%; margin: 0; }
  44
+.ui-collapsible-set-horizontal .ui-collapsible-content { position: relative; margin: 0; padding: 0; }	
  45
+/* 2tabs */
  46
+.ui-collapsible-set-horizontal.ui-grid-a .ui-block-a .ui-collapsible-content { width: 199.3%; }	
  47
+.ui-collapsible-set-horizontal.ui-grid-a .ui-block-b .ui-collapsible-content { left: -99.19%; width: 198.5%;}
  48
+/* 3tabs */
  49
+.ui-collapsible-set-horizontal.ui-grid-b .ui-block-a .ui-collapsible-content { width: 299.5%; }
  50
+.ui-collapsible-set-horizontal.ui-grid-b .ui-block-b .ui-collapsible-content { width: 299.5%; left: -100%; }
  51
+.ui-collapsible-set-horizontal.ui-grid-b .ui-block-c .ui-collapsible-content { width: 299.5%; left: -200%; }
  52
+/* 4tabs */
  53
+.ui-collapsible-set-horizontal.ui-grid-c .ui-block-a .ui-collapsible-content { width: 399.5%; }
  54
+.ui-collapsible-set-horizontal.ui-grid-c .ui-block-b .ui-collapsible-content { width: 399.5%; left: -100%; }
  55
+.ui-collapsible-set-horizontal.ui-grid-c .ui-block-c .ui-collapsible-content { width: 399.5%; left: -200%; }
  56
+.ui-collapsible-set-horizontal.ui-grid-c .ui-block-d .ui-collapsible-content { width: 399.5%; left: -300%; }
  57
+/* 5tabs */
  58
+.ui-collapsible-set-horizontal.ui-grid-d .ui-block-a .ui-collapsible-content { width: 499.5%; }
  59
+.ui-collapsible-set-horizontal.ui-grid-d .ui-block-b .ui-collapsible-content { width: 499.5%; left: -100%; }
  60
+.ui-collapsible-set-horizontal.ui-grid-d .ui-block-c .ui-collapsible-content { width: 499.5%; left: -200%; }
  61
+.ui-collapsible-set-horizontal.ui-grid-d .ui-block-d .ui-collapsible-content { width: 499.5%; left: -300%; }
  62
+.ui-collapsible-set-horizontal.ui-grid-d .ui-block-e .ui-collapsible-content { width: 499.5%; left: -400%; }
  63
+/* misc */
  64
+.ui-collapsible-set-horizontal .ui-collapsible .ui-btn-active { border-bottom-width: 0; }
  65
+.ui-collapsible-set-horizontal .ui-collapsible-collapsed .ui-btn { border-bottom-width: 1px; }
  66
+.ui-collapsible-set-horizontal .ui-collapsible .ui-collapsible-content { border-top-width: 0;  }
  67
+.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  js/widgets/collapsible.js
@@ -19,6 +19,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
19 19
 		contentTheme: null,
20 20
 		inset: true,
21 21
 		mini: false,
  22
+		direction: "",
22 23
 		initSelector: ":jqmData(role='collapsible')"
23 24
 	},
24 25
 	_create: function() {
@@ -31,7 +32,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
31 32
 			expandedIcon = $el.jqmData( "expanded-icon" ) || o.expandedIcon,
32 33
 			collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).children( ".ui-collapsible-content" ),
33 34
 			collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" );
34  
-
35 35
 		// Replace collapsibleHeading if it's a legend
36 36
 		if ( collapsibleHeading.is( "legend" ) ) {
37 37
 			collapsibleHeading = $( "<div role='heading'>"+ collapsibleHeading.html() +"</div>" ).insertBefore( collapsibleHeading );
@@ -40,6 +40,10 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
40 40
 
41 41
 		// If we are in a collapsible set
42 42
 		if ( collapsibleSet.length ) {
  43
+			// Add direction
  44
+			if ( collapsibleSet.jqmData( "type" ) == "horizontal" ){
  45
+				o.direction = "horizontal";
  46
+			}
43 47
 			// Inherit the theme from collapsible-set
44 48
 			if ( !o.theme ) {
45 49
 				o.theme = collapsibleSet.jqmData( "theme" ) || $.mobile.getInheritedTheme( collapsibleSet, "c" );
@@ -48,7 +52,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
48 52
 			if ( !o.contentTheme ) {
49 53
 				o.contentTheme = collapsibleSet.jqmData( "content-theme" );
50 54
 			}
51  
-
52 55
 			// Get the preference for collapsed icon in the set
53 56
 			if ( !o.collapsedIcon ) {
54 57
 				o.collapsedIcon = collapsibleSet.jqmData( "collapsed-icon" );
@@ -77,15 +80,14 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
77 80
 				o.theme = $.mobile.getInheritedTheme( $el, "c" );
78 81
 			}
79 82
 		}
80  
-		
81 83
 		if ( !!o.inset ) {
82 84
 			collapsible.addClass( "ui-collapsible-inset" );
83 85
 		}
84  
-		
  86
+
85 87
 		collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
86 88
 
87  
-		collapsedIcon = $el.jqmData( "collapsed-icon" ) || o.collapsedIcon || "plus";
88  
-		expandedIcon = $el.jqmData( "expanded-icon" ) || o.expandedIcon || "minus";
  89
+		collapsedIcon = $el.jqmData( "collapsed-icon" ) || o.collapsedIcon || ( o.direction == "horizontal" ? undefined : "plus" );
  90
+		expandedIcon = $el.jqmData( "expanded-icon" ) || o.expandedIcon || ( o.direction == "horizontal" ? undefined : "minus" );
89 91
 
90 92
 		collapsibleHeading
91 93
 			//drop heading in before content
@@ -99,7 +101,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
99 101
 				.buttonMarkup({
100 102
 					shadow: false,
101 103
 					corners: false,
102  
-					iconpos: $el.jqmData( "iconpos" ) || o.iconPos || "left",
  104
+					iconpos: $el.jqmData( "iconpos" ) || o.iconPos || ( collapsedIcon == undefined ? null : "left" ),
103 105
 					icon: collapsedIcon,
104 106
 					mini: o.mini,
105 107
 					theme: o.theme
@@ -120,7 +122,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
120 122
 						contentTheme = o.contentTheme;
121 123
 
122 124
 					event.preventDefault();
123  
-
124 125
 					collapsibleHeading
125 126
 						.toggleClass( "ui-collapsible-heading-collapsed", isCollapse )
126 127
 						.find( ".ui-collapsible-heading-status" )
@@ -129,14 +130,14 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
129 130
 						.find( ".ui-icon" )
130 131
 							.toggleClass( "ui-icon-" + expandedIcon, !isCollapse )
131 132
 							// logic or cause same icon for expanded/collapsed state would remove the ui-icon-class
132  
-							.toggleClass( "ui-icon-" + collapsedIcon, ( isCollapse || expandedIcon === collapsedIcon ) )
  133
+							.toggleClass( "ui-icon-" + collapsedIcon, ( isCollapse || expandedIcon === collapsedIcon )  )
133 134
 						.end()
134  
-						.find( "a" ).first().removeClass( $.mobile.activeBtnClass );
135  
-
  135
+						.find( "a" ).first()[o.direction == 'horizontal' ? 'toggleClass':'removeClass']( $.mobile.activeBtnClass , ( o.direction == "horizontal" ? !isCollapse : false ) );
  136
+						
136 137
 					$this.toggleClass( "ui-collapsible-collapsed", isCollapse );
137 138
 					collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
138 139
 
139  
-					if ( contentTheme && !!o.inset && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
  140
+					if ( contentTheme && !!o.inset && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) )  && o.direction != "horizontal" ) {
140 141
 						collapsibleHeading
141 142
 							.find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
142 143
 							.toggleClass( "ui-corner-bottom", isCollapse );
@@ -171,4 +172,4 @@ $( document ).bind( "pagecreate create", function( e ) {
171 172
 })( jQuery );
172 173
 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
173 174
 });
174  
-//>>excludeEnd("jqmBuildExclude");
  175
+//>>excludeEnd("jqmBuildExclude");
75  js/widgets/collapsibleSet.js
@@ -11,12 +11,19 @@ define( [ "jquery", "../jquery.mobile.widget", "./collapsible" ], function( $ )
11 11
 
12 12
 $.widget( "mobile.collapsibleset", $.mobile.widget, {
13 13
 	options: {
14  
-		initSelector: ":jqmData(role='collapsible-set')"
  14
+		grid: null,
  15
+		inset: true
15 16
 	},
16 17
 	_create: function() {
17 18
 		var $el = this.element.addClass( "ui-collapsible-set" ),
18  
-			o = this.options;
  19
+			o = $.extend({  direction: $el.jqmData("type") || "" }, this.options );
  20
+			
  21
+		toggleCorners = o.direction == "horizontal" ? [ "ui-corner-tl ui-corner-bl","ui-corner-tr ui-corner-br" ] : ["ui-corner-top ", "ui-corner-bottom" ];
19 22
 
  23
+		// Add horizontal class and grid
  24
+		if ( o.direction == "horizontal" ) {
  25
+			$el.addClass("ui-collapsible-set-horizontal").grid({ grid: this.options.grid });
  26
+		}
20 27
 		// Inherit the theme from collapsible-set
21 28
 		if ( !o.theme ) {
22 29
 			o.theme = $.mobile.getInheritedTheme( $el, "c" );
@@ -25,12 +32,13 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
25 32
 		if ( !o.contentTheme ) {
26 33
 			o.contentTheme = $el.jqmData( "content-theme" );
27 34
 		}
28  
-
29 35
 		if ( $el.jqmData( "inset" ) !== undefined ) {
30 36
 			o.inset = $el.jqmData( "inset" );
31 37
 		}
32  
-		o.inset = o.inset !== undefined ? o.inset : true;
33  
-
  38
+		// Add inset class
  39
+		if ( !!o.inset && o.direction == "horizontal" ){
  40
+			$el.addClass( "ui-collapsible-no-inset" );
  41
+		}
34 42
 		// Initialize the collapsible set if it's not already initialized
35 43
 		if ( !$el.jqmData( "collapsiblebound" ) ) {
36 44
 			$el
@@ -38,14 +46,41 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
38 46
 				.bind( "expand collapse", function( event ) {
39 47
 					var isCollapse = ( event.type === "collapse" ),
40 48
 						collapsible = $( event.target ).closest( ".ui-collapsible" ),
41  
-						widget = collapsible.data( "collapsible" );
42  
-					if ( collapsible.jqmData( "collapsible-last" ) && !!o.inset ) {
43  
-						collapsible.find( ".ui-collapsible-heading" ).first()
44  
-							.find( "a" ).first()
45  
-							.toggleClass( "ui-corner-bottom", isCollapse )
46  
-							.find( ".ui-btn-inner" )
47  
-							.toggleClass( "ui-corner-bottom", isCollapse );
  49
+						widget = collapsible.data( "collapsible" ),
  50
+						index = $el.find('.ui-collapsible').index( collapsible ),
  51
+						togClass = "ui-corner-bottom",
  52
+						tog = function() {	
  53
+							if ( !!o.inset ){
  54
+								// triggers on clicked or first&last collapsible
  55
+								for ( var i = 0; i < collapsible.length; i++ ){
  56
+									index = i;
  57
+									togClass = o.direction == "horizontal" ? ( index == 0 ? "ui-corner-bl" : "ui-corner-br") : "ui-corner-bottom";
  58
+									collapsible.eq(i).find( widget.options.heading ).first()
  59
+										.find( "a" ).first()
  60
+										.toggleClass( togClass, isCollapse )
  61
+										.find( ".ui-btn-inner" )
  62
+										.toggleClass( togClass, isCollapse );
  63
+								}
  64
+							}
  65
+						};
  66
+					
  67
+					// toggle content bottom corners
  68
+					if ( !!o.inset && ( o.direction == "horizontal" || collapsible.jqmData( "collapsible-last" ) ) ) {
48 69
 						collapsible.find( ".ui-collapsible-content" ).toggleClass( "ui-corner-bottom", !isCollapse );
  70
+						}			
  71
+					if ( o.direction == "horizontal" ){
  72
+						// set collapsible to first&last and set event
  73
+						collapsible = $el.find('.ui-collapsible').first().add( $el.find('.ui-collapsible').eq( $el.find('.ui-collapsible').length-1)  );
  74
+						if ( event.type == "expand" ){
  75
+							isCollapse = false;
  76
+							tog();
  77
+						} else if ( $el.find('.ui-collapsible').length == $el.find('.ui-collapsible-collapsed').length ) {
  78
+							isCollapse = true;
  79
+							tog();
  80
+						}
  81
+					// plain collapsibleSet
  82
+					} else if (collapsible.jqmData( "collapsible-last" ) && !!o.inset ) {
  83
+						tog();
49 84
 					}
50 85
 				})
51 86
 				.bind( "expand", function( event ) {
@@ -77,7 +112,7 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
77 112
 			collapsiblesInSet = $el.children( ":jqmData(role='collapsible')" );
78 113
 
79 114
 		$.mobile.collapsible.prototype.enhance( collapsiblesInSet.not( ".ui-collapsible" ) );
80  
-
  115
+		
81 116
 		// clean up borders
82 117
 		if ( !!o.inset ) {
83 118
 			collapsiblesInSet.each(function() {
@@ -92,18 +127,18 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
92 127
 			collapsiblesInSet.first()
93 128
 				.find( "a" )
94 129
 					.first()
95  
-					.addClass( "ui-corner-top" )
  130
+					.addClass( toggleCorners[0] )
96 131
 					.find( ".ui-btn-inner" )
97  
-						.addClass( "ui-corner-top" );
98  
-	
  132
+						.addClass(  toggleCorners[0] );
  133
+
99 134
 			collapsiblesInSet.last()
100 135
 				.jqmData( "collapsible-last", true )
101 136
 				.find( "a" )
102 137
 					.first()
103  
-					.addClass( "ui-corner-bottom" )
  138
+					.addClass( toggleCorners[1] )
104 139
 					.find( ".ui-btn-inner" )
105  
-						.addClass( "ui-corner-bottom" );
106  
-		}
  140
+						.addClass( toggleCorners[1] );
  141
+		} 
107 142
 	}
108 143
 });
109 144
 
@@ -115,4 +150,4 @@ $( document ).bind( "pagecreate create", function( e ) {
115 150
 })( jQuery );
116 151
 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
117 152
 });
118  
-//>>excludeEnd("jqmBuildExclude");
  153
+//>>excludeEnd("jqmBuildExclude");
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.