2

I want all of my (data-role="button")'s to have a theme of (data-theme="b") light blue..

I know people who write jQuery don't seriously waste their lives retyping this thousands of times. So is it applied like a .css property is defined and I just need to put it in my header or link another .js file to it?

in CSS I know it would look like .button { data-theme: b; } easy as pie. and smart people save time by doing a task that needs to be repeated over and over, in one place.

but in jquery its seems to always be written like..

<div data-role="navbar">
    <ul>
        <li><a href="#home" data-role="button" data-icon="home" data-theme="b">Home</a></li>
        <li><a href="#" data-role="button"data-icon="arrow-r" data-theme="b">Blog</a></li>
        <li><a href="#videos" data-role="button" data-icon="arrow-r" data-theme="b">Videos</a></li>
        <li><a href="#photos" data-role="button" data-icon="arrow-r" data-theme="b">Photos</a></li>
        <li><a href="#tweets" data-role="button" data-icon="arrow-r" data-theme="b">Tweets</a></li>
    </ul>
</div>

is there a way around this or is it smarter to just leave it as the default theme?

JSuar
  • 21,056
  • 4
  • 39
  • 83
codey b
  • 135
  • 1
  • 1
  • 6
  • Is there a particular reason you aren't just styling it with CSS using the attribute selector (`a[data-role="button"] { ... }`)? – cimmanon Dec 18 '12 at 21:57

1 Answers1

2

You should be able achieve this with a JQuery selector combining the <a> tag and the button attribute.

$("a[data-role='button']").attr("data-theme","b");

EDIT

Apparently, it can be a little tricky to get the JQuery Mobile theme to refresh. It's be asked on SO a few times; here's some info. from the JQM FAQ.

Community
  • 1
  • 1
JSuar
  • 21,056
  • 4
  • 39
  • 83