jquery mobile split list reassign a split button to be a checkbox

Question

jquery mobile split list reassign a split button to be a checkbox

1k Views Asked by tania At 20 October 2024 at 00:07

Is it possible to set a checkbox instead of a split button in a split-button-list in jquery-mobile?? It seems to be easy to change it to be another button, but checkbox..

I want my checkbox to appear on a RIGHT side INSTEAD of a split button, not instead of a picture

Thanks for help..

Original Q&A

There are 2 best solutions below

Ved On 09 December 2013 at 13:33

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style>
   .ui-btn-up-c{border:none;}
   .ui-btn-hover-c{border:none;}
   .ui-btn-hover-c:visited, .ui-btn-hover-c:hover, .ui-btn-hover-c a.ui-link-inherit { color:none;background:none;border:0px; }
</style>
</head>
<body>
<div data-role="page" id="myPage1">
  <ul data-role="listview">
    <li>
        <div class="ui-grid-b">
            <div class="ui-block-a" style="width: 30%;">

                <div data-role="fieldcontain">
                    <img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg">

                </div>

            </div>
            <div class="ui-block-b" style="width: 60%;">
                <div data-role="fieldcontain">
                    <h2>Phoenix</h2>
                    <p>Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix</p>
                </div>
            </div>
            <div class="ui-block-c" style="width: 6%; padding-top: 55px; float: right;">
                <div style="float: right;">
                    <label>
                        <input name="checkbox-0 " type="checkbox">
                    </label>
                </div>
            </div>
        </div>
    </li>
  </ul>
</div>
</body>
</html>

**ezanker** · Accepted Answer

Here is a DEMO FIDDLE

The UL does not use split icon, but instead an absolutely positioned DIV on the right with a checkbox inside. The CSS is used to position everything correctly:

<ul class="has-right-radio" data-role="listview" data-inset="true">
    <li data-icon="false"> 
        <a href="#">
             <img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg" />
             <h3>Picture</h3>
             <p>List item with thumbnail and right radio</p>
        </a>

        <div class="right-radio">
            <input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="" />
            <label for="checkbox-1a"></label>
        </div>
    </li>
</ul>

.has-right-radio .ui-link-inherit {
    margin-right: 48px !important;
}
.right-radio {
    position: absolute;
    top: 0px; bottom: 0px; right: 0px;
    width: 48px;
    border-left: 1px solid rgb(204, 204, 204);
}
.right-radio .ui-checkbox input {
    visibility: hidden;
}
.right-radio .ui-checkbox, .right-radio .ui-checkbox label {
    position: absolute;
    top: 0px; bottom: 0px; right: 0px; left: 0px;
}
.right-radio .ui-checkbox label {
    background-image: none;
    background-color: transparent;
    border: 0;
}
.right-radio .ui-checkbox label .ui-btn-inner {
    position: absolute;
    top: 50%;
    margin-top: -10px;
}

If you do not need the thumbnail, just leave out the IMG tag like the second LI in the fiddle.

jquery mobile split list reassign a split button to be a checkbox

There are 2 best solutions below

Related Questions in JQUERY-MOBILE

Related Questions in CHECKBOX

Related Questions in SPLIT-BUTTON

Trending Questions

Popular # Hahtags

Popular Questions