Question

是否可以在jquery-mobile的分组按钮列表中设置复选框而不是分割按钮？似乎很容易将其更改为另一个按钮，但复选框..

我希望我的复选框显示在拆分按钮的右侧INSTEAD，而不是图片

感谢您的帮助..

Answer 1

这是 DEMO FIDDLE

UL不使用拆分图标，而是使用右侧带有复选框的绝对定位DIV。 CSS用于正确定位所有内容：

<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;
}

如果您不需要缩略图，只需省略IMG标签，就像小提琴中的第二个LI一样。

Answer 2

<!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>

jquery移动拆分列表将拆分按钮重新分配为复选框

2 个答案: