Latest web development tutorials

Filtr jQuery komórkowy

Można filtrować elementu

Wszystkie te elementy, gdy jeden lub więcej pod-elementy mogą być filtrowane.

Jak utworzyć pole wyszukiwarki:

  • Chcesz filtrować elementy muszą korzystać z danych filtra = "true" atrybutu.
  • Tworzenie <input> element i podać identyfikator, plus dane typu na elemencie = "Szukaj" atrybut. Spowoduje to utworzenie podstawowego pola wyszukiwania. <Input> element jest umieszczony w formie, forma <form> Element wykorzystuje klasę "UI-filtrować" - Ta klasa będzie dostosowana poza polem wyszukiwania i od elementu filtrującego.
  • Następnie dodać atrybut danych wejściowych dla elementu filtrującego. Wartość ta musi być id <input> elementów.

Następnie utworzyć filtrowaną listę:

Elementy listy wyszukiwania

<Class = formą "ui-odsączyć ">
<Input id = "Dane" myFilter -type = "search">
</ Form>

<Ul data-role = "ListView " data-filter = "true" data-input = "# myFilter">
<Li> <a href="#"> Adele </a> </ li>
<Li> <a href="#"> Billy </a> </ li>
<Li> <a href="#"> Calvin </a> </ li>
</ Ul>

Spróbuj »

Wskazówka: Można użyć atrybutu zastępczy w polu wyszukiwania, aby ustawić wiadomość:

Przykłady

<Input id = "Dane" myFilter -type = "search" placeholder = " według wyszukać nazwę ..">

Spróbuj »

filtry niestandardowe

Na ogół dodaje się do tekstu każdego elementu listy jest użycie jako tekst filtracyjny (taki jak odpowiadające "Adele" lub "B" odpowiada "Billy"). Ale jeśli chcesz, aby określić filtr niestandardowy tekst, trzeba użyć atrybutu danych-filtertext w elementach podrzędnych:

Przykłady

<Li danych filtertext = "FAV "> <a href="#"> Adele </a> </ li>

Spróbuj »
uwaga Jeśli używasz atrybut danych filtertext w elemencie, elementy treści tekstu źródłowego będą ignorowane, gdy filtr, a następnie, jeśli trzeba spojrzeć na listę pozycji "Adele", wymaga użycia słów kluczowych jak: F, A, V lub fav.
Przykłady

Więcej przykładów

Filtracja składany Lista
Jak złożyć listę filtrów.

Filtr tabelę
Jak filtrować zawartości tabeli.

Filtr <div>
Jak filtrować dziecko <div> zawiera <p> element.