0

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

我希望我的复选框出现在拆分按钮的右侧而不是图片上

感谢帮助..

4

2 回答 2

4

这是一个演示小提琴

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

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

于 2013-12-09T15:07:21.530 回答
1 
<!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>
于 2013-12-09T13:33:07.773 回答