jQuery Mobile：结合listview和复选框fieldset

Question

在jQuery Mobile中，我想要一个垂直的项目列表，用户可以通过点击它们来选择。

我想：

1. 过滤杆（因此用户可以首先搜索的项目的子群，并且在这些之中选择）
2. 没有插图视图（全宽，没有圆角）
3. 上的右手侧上的复选框，其指示该项目是否当前选择
4. 充满物品表面激活复选框

这意味着将jQM缩略图列表视图与过滤器（点1和2以上）和复选框fieldset（点3和4）的行为组合在一起。

我attemps到目前为止失败： - 一个checkfox字段集没有过滤器并且总是插图 - 列表视图不显示JQM风格的复选框，即使在<input>和<label>项目用于（据我可以告诉）

任何帮助表示赞赏。

使用jQuery移动1.2.0

Answer 1

看this例子，并添加任何你想它。这不是你的全部要求，但它可以建立。

这是原创example。

<li data-icon="false"> 
    <div class="checkBoxLeft"> 
     <input type="checkbox" name="checkbox-0" id="checkbox-0"/> 
    </div> 
    <a href="#" class="detailListText"> Message 1 </a> 
    </li> 

现在很容易创建李元素和其子复选框之间的关联。

为了能够激活/停用chechbox同时用li元素我们这个代码交互：

长：

$('li').bind('click', function(e) { 
    if($(this).find('input[type="checkbox"]').is(':checked')) { 
     $(this).find('input[type="checkbox"]').prop('checked', false)  
    } else { 
     $(this).find('input[type="checkbox"]').prop('checked', true) 
    } 
}); 

简称：

$('li').bind('click', function(e) { 
    $(this).find('input[type="checkbox"]').prop('checked', ($(this).find('input[type="checkbox"]').is(':checked')) ? false : true);  
}); 

这应该jQuery的1.6版工作以上。

最后说明

如果您想了解更多有关如何自定义jQuery Mobile的页面和窗口小部件，然后看看这个article。它附带了很多工作示例，其中包括为什么对于jQuery Mobile来说非常重要。