jquery mobile grouped checkboxes Фильтр поиска

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

Что делать, если я хочу использовать меню выбора, но с фильтрованными параметрами на второй странице? Это хорошая идея?

В следующем примере я создал меню выбора и отфильтрованный ListView в разделенных страницах:

... 
<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/