Question

我希望垂直分组的复选框带有搜索过滤器。

有没有办法将常规搜索过滤器列表设置为看起来像垂直分组的复选框？

或

我可以将搜索过滤器添加到复选框组吗？

Answer 1

您可以使用CSS让listview压缩到更小的空间：

/*remove background color from search input*/
.ui-listview-filter {
    background : none;
}
/*remove the vertical padding, background gradient, and border for each list-item*/
#dataPointList .ui-li {
    padding    : 0px 15px;
    background : none;
    border     : none;
}
/*remove the margin from the check-box container*/
#dataPointList .ui-li .ui-checkbox {
    margin : 0;
}
/*remove the rounded corners from all of the .ui-btn elements*/
#dataPointList .ui-li .ui-checkbox .ui-btn-corner-all {
    -webkit-border-radius : 0;
    -moz-border-radius    : 0;
    border-radius         : 0;
}
/*re-add the rounded corners (top only) for the first list-item element*/
#dataPointList .ui-li:first-child .ui-checkbox .ui-btn-corner-all {
    -webkit-border-top-left-radius  : 1em;
    -moz-border-top-left-radius     : 1em;
    border-top-left-radius          : 1em;
    -webkit-border-top-right-radius : 1em;
    -moz-border-top-right-radius    : 1em;
    border-top-right-radius         : 1em;
}
/*re-add the rounded corners (bottom only) for the last list-item element*/
#dataPointList .ui-li:last-child .ui-checkbox .ui-btn-corner-all {
    -webkit-border-bottom-left-radius  : 1em;
    -moz-border-bottom-left-radius     : 1em;
    border-bottom-left-radius          : 1em;
    -webkit-border-bottom-right-radius : 1em;
    -moz-border-bottom-right-radius    : 1em;
    border-bottom-right-radius         : 1em;
}

以下是演示：http://jsfiddle.net/NwbZu/2/

当您搜索时，这不会更新列表，例如，如果您在演示中搜索6，您将只获得一个项目，并且不会更新它的所有角落。但是，您可以使用JS实现此目的（我不确定您是否可以仅在CSS中选择可见元素）。

如果您有任何问题，请与我们联系。

Answer 2

如果我想使用选择菜单，但在第二页中使用过滤选项，该怎么办？这是个好主意吗？

在以下示例中，我在分隔的页面中创建了一个选择菜单和一个过滤的列表视图：

...
<select id="myselect" name="myselect" data-native-menu="false" multiple="multiple">
...
<ul id="dataPointList" data-role="listview" data-filter="true">
...

每次更改复选框时，我都会更新选择菜单。

回到第一页，我们可以看到选择了正确选项的选择菜单。

以下是代码：http://jsfiddle.net/leandrocosta/NwbZu/108/

jquery mobile groups checkboxes搜索过滤器

2 个答案: