Change Swatch of Collapsible in runtime
Posted: Thu Jul 24, 2014 11:23 pm
Whats the js command to change the swatch on a collapsible at runtime?
Thanks in advance!
Catch up wih the Appery.io community on our forum. Here you'll find information on the lastest questions and issues Appery.io developers are discussing.
https://forum.appery.io/
Whats the js command to change the swatch on a collapsible at runtime?
Thanks in advance!
Hi Aeneas,
Unfortunalty collapsible JQM component currently not supports theme change with JS.
But here is workaround for you.
Please use following code:
pre
Code: Select all
//You can change here goal swatch.
var goalSwatch = "a";
//Note: you need to replace "mobilecollapsblock_2" with your collapsible component name.
var collapsibleBlock = Appery("mobilecollapsblock_2");
//Change swatch for header:
var headerClasses = 'ui-btn-a ui-btn-b ui-btn-c ui-btn-d';
var headerGoalClass = "ui-btn-" + goalSwatch;
var headerButton = collapsibleBlock.find(".ui-collapsible-heading .ui-btn");
headerButton.removeClass(headerClasses);
headerButton.addClass(headerGoalClass);
//Change swatch for content:
var contentClasses = 'ui-body-a ui-body-b ui-body-c ui-body-d';
var contentGoalClass = "ui-body-" + goalSwatch;
var content = collapsibleBlock.find(".ui-collapsible-content");
content.removeClass(contentClasses);
content.addClass(contentGoalClass); /pre
Regards.