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

Posted 2023-05-09

【中文标题】jQuery Mobile 的 Listview 小部件中的复选框列

【英文标题】：Checkbox Column in Listview Widget of jQuery Mobile

【发布时间】：2016-08-18 02:40:49

【问题描述】：

我正在尝试使用 jQuery Mobile 来完成类似的事情。

如何向 Listview 小部件添加一列复选框？

【参考方案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