Jquery Mobile - Radio button usage

This example demonstrates how the regular radio buttons can be styled using JQM and the various data-roles that can be used along with it.

by rwachtler

HTML

<div data-role="page" id="pageone">
    <div data-role="header">
         <h1>Welcome To My Homepage</h1>

    </div>
    <div data-role="main" class="ui-content">
        <p>Welcome!</p>
        <ul data-role="listview" data-filter="true" data-theme="b" style="margin-bottom: 50px;">
            <li> <a href="#" onclick="alert('the item!');">
              <h3>The item</h3>
            </a>
 <a href="#" onclick="alert('1st splitbutton!');" class="split-button-custom" data-role="button" data-icon="gear" data-iconpos="notext">1st link</a>
 <a href="#" onclick="alert('2nd splitbutton!');" class="split-button-custom" data-role="button" data-icon="arrow-r" data-iconpos="notext">2nd link</a>
 <a href="#" style="display: none;">Dummy</a>

            </li>
        </ul>
    </div>
</div>

CSS

.split-button-custom {
    float: right;
    margin-right: 10px;
    margin-top: -32px;
    border-bottom-left-radius: 1em 1em;
    border-bottom-right-radius: 1em 1em;
    border-top-left-radius: 1em 1em;
    border-top-right-radius: 1em 1em;
}
.split-button-custom span.ui-btn-inner {
    border-bottom-left-radius: 1em 1em;
    border-bottom-right-radius: 1em 1em;
    border-top-left-radius: 1em 1em;
    border-top-right-radius: 1em 1em;
    padding-right: 0px;
}
.split-button-custom span.ui-icon {
    margin-top: 0px;
    right: 0px;
    top: 0px;
    position: relative;
}