最后的笔记

Question

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

我想：

过滤条（因此用户可以先搜索项目的子组，然后在这些项目中进行选择）
没有插图（全宽，没有圆角）
右侧的复选框，指示当前是否选择了该项目
完整项目表面激活复选框

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

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

感谢任何帮助。

使用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 。它附带了许多工作示例，包括为什么对jQuery Mobile来说是必不可少的。

jQuery Mobile：结合listview和checkbox fieldset

1 个答案:

最后的笔记