JQuery мобильные сгруппированные флажки Фильтр поиска

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/