jQuery Mobile:组合列表视图和复选框字段集

Question

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

我想要：

1. 筛选器栏（以便用户可以首先搜索项目的子组，然后在其中中进行选择）
无
2. 插图视图（全宽，无圆角）
3. 右侧的复选框，指示当前是否选择了该项目
4. "完整项目图面"激活复选框

这意味着将jQM缩略图列表视图的行为与过滤器（上面的第1和第2点）和复选框字段集（第3点和第4点）结合起来。

到目前为止，我的尝试失败了：- 校验狐字段集没有过滤器，并且始终是内嵌的- listview不显示jQM样式的复选框，即使使用<input>和<label>项（据我所知）

任何帮助，不胜感激。

使用 jQuery Mobile 1.2.0

Answer 1

看看这个例子，并添加你想要的任何内容。这不是您的全部要求，但可以在此基础上进行构建。

这是原始示例。

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

现在，很容易在 li 元素及其子复选框之间创建关联。

为了能够在与li元素交互时激活/停用chechbox，我们以下代码：

长：

$('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页面和小部件的更多信息，请查看本文。它带有许多工作示例，包括为什么对jQuery Mobile很重要。