Question

I have a controlgroup and I am dynamically adding and removing ui-btn-active class to toggle the active button. The button toggles just fine, but I can’t seem to find a way to change the active button theme.

I want the in-active buttons to use the d theme and the active
buttons to use the a theme.

Does anyone know how I can do this?

HTML:

<div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-inline="true" data-mini="true" id="myApptBtn">My Appointments</a>
    <a href="#" data-role="button" data-inline="true" data-mini="true" id="allApptBtn">All Appointments</a>
</div>

Answer 1

OK so this is what I ended up doing.

jQuery:

$('[data-role="page"]').live('pageshow', function () {
    $('#myApptBtn').addClass('ui-btn-active');

    $('#myApptBtn').click(function () {
        $('#allApptBtn').removeClass('ui-btn-active');
        $('#myApptBtn').addClass('ui-btn-active');
    });

    $('#allApptBtn').click(function () {
        $('#myApptBtn').removeClass('ui-btn-active');
        $('#allApptBtn').addClass('ui-btn-active');
    });
});

HTML:

<li data-theme="d" class="li-state-small" style="text-align: center;">
    <div data-role="controlgroup" data-type="horizontal" class="btnFontSize12">
        <a href="#" data-role="button" data-inline="true" data-mini="true" id="myApptBtn">My Appointments</a>
        <a href="#" data-role="button" data-inline="true" data-mini="true" id="allApptBtn">All Appointments</a>
    </div>
</li>

Answer to Question:

So as it turns out, you can’t override the theme via the markup.

Global “Active” state

The jQuery Mobile framework uses a swatch called “active” (bright blue
in the default theme) to consistently indicate the selected state,
regardless of the individual swatch of the given widget. We apply this
in navigation and form controls whenever there is a need to indicate
what is currently selected. Because this theme swatch is designed for
clear, consistent user feedback, it cannot be overridden via the
markup; it is set once in the theme and applied by the framework
whenever a selected or active state is needed. The styling for this
state is in the theme stylesheet under the ui-btn-active style rules.