CODEWITHSUNDEEP
jquerycssmobilebutton
codey b
codey b

Reputation: 135

jQuery mobile how to apply a single button theme to all buttons

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?

Upvotes: 2

Views: 442

Answers (1)

JSuar
JSuar

Reputation: 21101

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.

Upvotes: 2

Related Questions