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

added animation and customizable icons to collapsible #2611

Closed
wants to merge 11 commits into from
Closed

added animation and customizable icons to collapsible #2611

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c854415
added iconpos support for collapsible with fix for wrong casing of ic…
ducas Jul 22, 2011
4beaec1
added data-icon-collapsed & data-icon-expanded support.
ducas Jul 22, 2011
dfd16ed
Merge branch 'master' of https://github.com/jquery/jquery-mobile
ducas Aug 2, 2011
879c08d
Merge branch 'master' of https://github.com/jquery/jquery-mobile
ducas Aug 4, 2011
422ffe0
Merge branch 'master' of https://github.com/jquery/jquery-mobile
ducas Aug 15, 2011
e9b7daa
Merge branch 'master' of https://github.com/jquery/jquery-mobile
ducas Aug 17, 2011
3fa590c
Merge branch 'master' of https://github.com/jquery/jquery-mobile
ducas Aug 23, 2011
6c5b575
Merge branch 'master' of https://github.com/jquery/jquery-mobile
ducas Sep 5, 2011
5827997
Merge branch 'master' of https://github.com/jquery/jquery-mobile
ducas Sep 9, 2011
502f867
Merge branch 'master' of https://github.com/jquery/jquery-mobile
ducas Oct 4, 2011
5ad105f
added animation and customizable icons to collapsible
ducas Oct 5, 2011
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
56 changes: 35 additions & 21 deletions js/jquery.mobile.collapsible.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {

Expand Down Expand Up @@ -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
});

Expand Down Expand Up @@ -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" );
Expand Down