From c85441599879490e682e71493f439c8e03189582 Mon Sep 17 00:00:00 2001 From: Ducas Francis Date: Fri, 22 Jul 2011 13:19:50 +1000 Subject: [PATCH 1/3] added iconpos support for collapsible with fix for wrong casing of iconpos option. --- js/jquery.mobile.collapsible.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index 7a842524115..f09e8a07d29 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -46,7 +46,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { .buttonMarkup({ shadow: !collapsibleParent.length, corners: false, - iconPos: "left", + iconpos: $el.jqmData("iconpos") || "left", icon: "plus", theme: o.theme }) @@ -55,7 +55,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { .buttonMarkup({ shadow: true, corners: true, - iconPos: "notext", + iconpos: "notext", icon: "plus", theme: o.iconTheme }); From 4beaec1675ccad97593c8e63522766c6235a1043 Mon Sep 17 00:00:00 2001 From: Ducas Francis Date: Fri, 22 Jul 2011 14:05:45 +1000 Subject: [PATCH 2/3] added data-icon-collapsed & data-icon-expanded support. --- js/jquery.mobile.collapsible.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index f09e8a07d29..e2093eb5a2c 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -47,7 +47,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { shadow: !collapsibleParent.length, corners: false, iconpos: $el.jqmData("iconpos") || "left", - icon: "plus", + icon: $el.jqmData("icon-collapsed") || "plus", theme: o.theme }) .find( ".ui-icon" ) @@ -56,7 +56,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { shadow: true, corners: true, iconpos: "notext", - icon: "plus", + icon: $el.jqmData("icon-collapsed") || "plus", theme: o.iconTheme }); @@ -88,8 +88,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, { .text( o.expandCueText ) .end() .find( ".ui-icon" ) - .removeClass( "ui-icon-minus" ) - .addClass( "ui-icon-plus" ); + .removeClass( "ui-icon-" + ( collapsibleContain.jqmData("icon-expanded") || "minus" ) ) + .addClass( "ui-icon-" + ( collapsibleContain.jqmData("icon-collapsed") || "plus" ) ); collapsibleContent.addClass( "ui-collapsible-content-collapsed" ).attr( "aria-hidden", true ); @@ -109,7 +109,9 @@ $.widget( "mobile.collapsible", $.mobile.widget, { .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" ); + collapsibleHeading.find( ".ui-icon" ) + .removeClass( "ui-icon-" + ( collapsibleContain.jqmData("icon-collapsed") || "plus" ) ) + .addClass( "ui-icon-" + ( collapsibleContain.jqmData("icon-expanded") || "minus" ) ); collapsibleContent.removeClass( "ui-collapsible-content-collapsed" ).attr( "aria-hidden", false ); From 5ad105f843c6b123b8351593098abd2d64031613 Mon Sep 17 00:00:00 2001 From: Ducas Francis Date: Wed, 5 Oct 2011 11:20:58 +1100 Subject: [PATCH 3/3] added animation and customizable icons to collapsible --- js/jquery.mobile.collapsible.js | 56 ++++++++++++++++++++------------- 1 file changed, 35 insertions(+), 21 deletions(-) diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index a416276eb7c..a03c8f69f8c 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -15,7 +15,12 @@ $.widget( "mobile.collapsible", $.mobile.widget, { theme: null, contentTheme: null, iconTheme: "d", - initSelector: ":jqmData(role='collapsible')" + initSelector: ":jqmData(role='collapsible')", + animate: true, + expandAnimation: "slideDown", + collapseAnimation: "slideUp", + expandDuration: "500", + collapseDuration: "300" }, _create: function() { @@ -58,8 +63,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, { .buttonMarkup({ shadow: false, corners: false, - iconPos: "left", - icon: "plus", + iconpos: $el.jqmData("iconpos") || "left", + icon: $el.jqmData("icon-collapsed") || "plus", theme: o.theme }); @@ -117,24 +122,33 @@ $.widget( "mobile.collapsible", $.mobile.widget, { isCollapse = ( event.type === "collapse" ), contentTheme = o.contentTheme; - collapsibleHeading - .toggleClass( "ui-collapsible-heading-collapsed", isCollapse) - .find( ".ui-collapsible-heading-status" ) - .text( isCollapse ? o.expandCueText : o.collapseCueText ) - .end() - .find( ".ui-icon" ) - .toggleClass( "ui-icon-minus", !isCollapse ) - .toggleClass( "ui-icon-plus", isCollapse ); - - $this.toggleClass( "ui-collapsible-collapsed", isCollapse ); - collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse ); - - if ( contentTheme && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) { - collapsibleHeading - .find( "a:eq(0), .ui-btn-inner" ) - .toggleClass( "ui-corner-bottom", isCollapse ); - collapsibleContent.toggleClass( "ui-corner-bottom", !isCollapse ); - } + if (!!o.animate) { + collapsibleContent[isCollapse ? o.collapseAnimation : o.expandAnimation](isCollapse ? o.collapseDuration : o.expandDuration); + } + + collapsibleContent + .queue(function () { + collapsibleHeading + .toggleClass("ui-collapsible-heading-collapsed", isCollapse) + .find(".ui-collapsible-heading-status") + .text(isCollapse ? o.expandCueText : o.collapseCueText) + .end() + .find(".ui-icon") + .toggleClass("ui-icon-" + (collapsible.jqmData("icon-expanded") || "minus"), !isCollapse) + .toggleClass("ui-icon-" + (collapsible.jqmData("icon-collapsed") || "plus"), isCollapse); + + $this.toggleClass("ui-collapsible-collapsed", isCollapse); + collapsibleContent.toggleClass("ui-collapsible-content-collapsed", isCollapse).attr("aria-hidden", isCollapse); + + if (contentTheme && (!collapsibleSet.length || collapsible.jqmData("collapsible-last"))) { + collapsibleHeading + .find("a:eq(0), .ui-btn-inner") + .toggleClass("ui-corner-bottom", isCollapse); + collapsibleContent.toggleClass("ui-corner-bottom", !isCollapse); + } + collapsibleContent.css('display',''); + $(this).dequeue(); + }); } }) .trigger( o.collapsed ? "collapse" : "expand" );