Loading...

Search jQuery

Search

jQuery Forum

Custom theme not working with jquery

in jQuery Mobile • 3 months ago

Hi,

I've created a custom theme with theme roller.

When i add like

<ul data-role="controlgroup" data-type="horizontal" class="localnav">

<li><a href="#" data-role="button" data-transition="fade" id="id1" class="ui-body-g">N/A</a></li>

<li><a href="#" data-role="button" data-transition="fade" id="id2" class="ui-body-h">OK</a></li>

<li><a href="#" data-role="button" data-transition="fade" id="id3" class="ui-body-i" >TBC</a></li>

<li><a href="#" data-role="button" data-transition="fade" id="id4" class="ui-body-j">No</a></li>

</ul>

Its working fine.

When i try to change the theme via script , its not working.

code :

$("#id1).tap(function(){

$(this).removeClass('ui-body-g').addClass('ui-body-h');

});

1

Replies(5)

s4ty

Re: Custom theme not working with jquery

3 months ago

$(this).removeClass('ui-body-g').addClass('ui-body-h').trigger('create');

Re: Custom theme not working with jquery

3 months ago

Oh Buddy !!

Its not working for me ..

Similarly i tried with data-theme attribute.

Its works fine when i specify

.<ul data-role="controlgroup" data-type="horizontal" class="localnav">

<li><a href="#" data-role="button" data-transition="fade" id="id1" data-theme="g">N/A</a></li>

<li><a href="#" data-role="button" data-transition="fade" id="id2" data-theme="h">OK</a></li>

<li><a href="#" data-role="button" data-transition="fade" id="id3" data-theme="i">TBC</a></li>

<li><a href="#" data-role="button" data-transition="fade" id="id4" data-theme="j">No</a></li>

</ul>

But when i tried to change the data-theme attribute from jquery ...

Its not working...

Code :

$("#id1").attr('data-theme' , 'h').trigger('create');

s4ty

Re: Custom theme not working with jquery

3 months ago

Does it work that way? http://jsbin.com/ewopaw/2

haga0054

Re: Custom theme not working with jquery

3 months ago

It's usually a lot more complex than just removing one class and adding another. JQM adds a lot of markup and you really need to inspect each element to figure out what you need to change. If you can explain or show us what you are looking for, we may be able to help. What widget type are you trying to change? How many? Is it just for the one page? Etc.

Re: Custom theme not working with jquery

3 months ago

Thanks Guys !!!

<ul data-role="controlgroup" data-type="horizontal" class="localnav">

<li><a href="#" data-role="button" data-transition="fade" id="id1" data-theme="g">N/A</a></li>

<li><a href="#" data-role="button" data-transition="fade" id="id2" data-theme="h">OK</a></li>

<li><a href="#" data-role="button" data-transition="fade" id="id3" data-theme="i">TBC</a></li>

<li><a href="#" data-role="button" data-transition="fade" id="id4" data-theme="j">No</a></li>

</ul>

This is my widget ...Horizontal buttons group of 4 buttons ...

When one button is selected, that needs to be highlighted with a specific color and others not highlighted.

eg :- selecting id1 should show gray colour , others not highlighted

selecting id2 should show green colour , others not highlighted

selecting id3 should show yellow colour, others not highlighted

selecting id4 should show red colour, others not highlighted

code :

Trying to work with custom theme from g to j and trying but not working ....

$('#id1').click(function () {

$(this).attr('data-theme', 'g');

$("#id2").attr('data-theme', 'c');

$("#id3").attr('data-theme', 'c');

$("#id4").attr('data-theme','c');

});

$('#id2').click(function () {

$(this).attr('data-theme', 'h');

$("#id1").attr('data-theme', 'c');

$("#id3").attr('data-theme', 'c');

$("#id4").attr('data-theme','c');

});

$('#id3).click(function () {

$(this).attr('data-theme', 'i);

$("#id2").attr('data-theme', 'c');

$("#id1").attr('data-theme', 'c');

$("#id4").attr('data-theme','c');

});

$('#id4).click(function () {

$(this).attr('data-theme', 'j');

$("#id2").attr('data-theme', 'c');

$("#id3").attr('data-theme', 'c');

$("#id1).attr('data-theme','c');

});