Question

I have the following HTML on a Jquery Mobile Page:

<div data-role="controlgroup" data-type="horizontal" class="panelSwitcher">
    <input type="button" data-theme="a" data-iconpos="notext" data-icon="gallery" value="Galley" class="viewGrid" />
    <input type="button" data-theme="a" data-iconpos="notext" data-icon="panels"  value="Panels" class="viewPanel" />
    <input type="button" data-theme="a" data-iconpos="notext" data-icon="detail" value="Detail" class="viewDetail"  />
</div>

This renders correctly. However, since I’m starting out in Gallery view, I would like the first button to have active state, when the page loads.

Question:
Is this possible in plain markup (no Jquery/Javascript). I tried a couple of things, like selected=”selected” and adding ui-btn-active, but none of them seem to work.

Thanks for some pointers!

Answer 1

If you make your buttons out of links then you can add the .ui-btn-active class to the links to give it the active state by default:

    <div data-role="controlgroup" data-type="horizontal" class="panelSwitcher">
        <a class="viewGrid ui-btn-active" data-role="button" data-theme="a" data-icon="gallery" data-iconpos="notext">Gallery</a>
        <a class="viewPanel" data-role="button" data-theme="a" data-icon="panels" data-iconpos="notext">Panels</a>
        <a class="viewDetail" data-role="button" data-theme="a" data-icon="detail" data-iconpos="notext">Detail</a>
    </div>

Here is a demo: http://jsfiddle.net/hJsJc/