在ListView中的複選框列jQuery Mobile的小部件

Question

我正在嘗試使用jQuery Mobile來完成類似這樣的事情。

我如何添加一個複選框列到ListView控件？

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