jquery mobile分組複選框搜索過濾器

Question

我想用搜索過濾器垂直分組複選框。

有沒有一種方法可以將常規搜索過濾器列表設置爲垂直分組複選框？

或

我可以將搜索過濾器添加到複選框組嗎？

實例開始：http://jsfiddle.net/NwbZu/

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/