Loading...

Search jQuery

Search

jQuery Forum

hardik

Change theme of Collapsible set list view using jquery.

in jQuery Mobile • 5 months ago

Hi

I have used Jqm Collapsible set list view and it is working fine. list view

My requirement is that differentiates last update list view.

My list view code is :

<div data-role="collapsible-set" data-theme="a" data-content-theme="a">
<div data-role="collapsible" id="div_1">
<h3>ALL</h3>]
<p>
<select name="onoff_switch_1" id="onoff_switch_1" data-role="slider" data-mini="true" onchange="switch_status(this.value,1,'div_1');">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</p>
</div>
<div>

I have tried to change of theme is :

function switch_status(sts,index,col)
{
alert(col);
$("#"+col).removeAttr('data-theme');
$("#"+col).attr('data-theme','b');
}

Thanks,
Hardik

1

Replies(2)

John Chacko

Re: Change theme of Collapsible set list view using jquery.

5 months ago

its not straight forward to change theme as above.

jQM enhances all controls including collapsibles by adding new css classes and wrapping new elements etc....

Its the basic concept of jqm.

UI which you are seeing in jqm is not based on the initial markup, but they are enhanced.

.

You can do an 'inspect Element' (hopes you are familiar with that) and see how your initial markup is changed.

I don't think there is any method exposed with which you can change themes..

only way is to toggle css of enhanced elements from js.

See below sample. Its just a sample, you must put effort to optimise it further.

http://jsfiddle.net/CGhb4/

Hardik

Re: Change theme of Collapsible set list view using jquery.

5 months ago

Thanks for reply

I have see your sample on jsfiddle and apply in my code.

Currently its works great

Thanks,
Hardik