jQuery Mobile 的 Listview 小部件中的复选框列

Question

我正在尝试使用 jQuery 移动设备来完成类似的事情。

如何向列表视图小部件添加一列复选框？

Answer 1

将您的列表视图设置为常规拆分列表视图，然后为复选框添加一个 DIV 并将其与一些 CSS:

<ul class="has-listCheck" data-role="listview" data-split-icon="info" data-split-theme="d">
  <li>
    <a href="#">
      <h3>Line Item 1</h3>
      <p>Sub title 1</p>
    </a>
    <a href="#"></a>
    <div class="listCheck">
      <label>
        <input type="checkbox">
      </label>
    </div>
  </li>
</ul>


.has-listCheck > li > a:first-child {
  margin-left: 40px !important;
}

.has-listCheck >li.ui-last-child > .listCheck {
  border-bottom: 1px solid rgb(221, 221, 221);
}

.listCheck {
  position: absolute;
  top: 0px;width: 40px;bottom: 0px;z-index: 100;
  border-top: 1px solid rgb(221, 221, 221);
  border-right: 1px solid rgb(221, 221, 221);
  background-color: rgb(246, 246, 246);
}

.listCheck .ui-checkbox,
.listCheck .ui-checkbox label {
  position: absolute;
  top: 0px;bottom: 0px;right: 0px;left: 0px;padding: 0;margin: 0;
}

.listCheck input {
  display: none;
}

.listCheck label {
  background-image: none;
  background-color: transparent;
  border: 0;
}

DEMO