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

Question

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

我想要：

1. 过滤栏（因此用户可以先搜索项目的子组，然后在其中进行选择）
2. 无内嵌视图（全宽，无圆角）
3. 右侧的复选框指示当前是否选中该项目
4. 完整的项目表面激活复选框

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

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

感谢任何帮助。

使用 jQuery Mobile 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>

现在很容易在 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 页面和小部件的更多信息，请查看此 article。它附带了许多工作示例，包括为什么 !important 对于 jQuery Mobile 是必需的。