0

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

我想：

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

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

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

任何帮助表示赞赏。

使用 jQuery Mobile 1.2.0

4

1 回答 1

0

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

这是原始示例。

  <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 页面和小部件的信息，请查看这篇文章。它附带了许多工作示例，包括为什么 !important 对于 jQuery Mobile 是必需的。

于 2012-11-26T12:32:07.963 回答