Najnowsze tutoriale tworzenie stron internetowych
 

jQuery Mobile filtry



odsączyć Elements

Wszystkie elementy, które mają więcej niż jeden element podrzędny może być filtrowane.

Jak utworzyć pole wyszukiwania:

  • Element chcesz być odsączyć, musi zawierać data-filter="true" atrybutu.
  • Załóż <input> element o określonym id i dodaj data-type="search" atrybut. Spowoduje to utworzenie podstawowego pola wyszukiwania. Owiń <input> w formie i dodać "ui-filterable" klasę do <form> elementu - to będzie dostosować margines pomiędzy polu wyszukiwania i elementu sączenia.
  • Następnie dodać data-input atrybut do elementu sączenia. Jej wartość musi być zgodna z id <input> elementu.

Poniżej stworzyliśmy filtrować widoku listy:

Wyszukiwanie elementów listy

<form class="ui-filterable">
  <input id="myFilter" data-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 sam "

Wskazówka: Użyj zastępczy, aby podać krótki podpowiedź opisujący oczekiwaną wartość pola wyszukiwania:

Przykład

<input id="myFilter" data-type="search" placeholder="Search for names.." >
Spróbuj sam "

Filtr niestandardowy

Tekst wewnątrz każdego elementu podrzędnego jest rzeczywisty tekst, który służy do filtrowania (jak "Adele" lub "B" do "Billy" ). Jednakże, jeśli chcesz filtrować wyszukiwanie do tekstu niestandardowego filtra zamiast tego można dodać atrybut danych filtertext do dowolnego elementu podrzędnego:

Przykład

<li data-filtertext="fav" ><a href="#">Adele</a></li>
Spróbuj sam "

W przypadku korzystania z data-filtertext atrybut w elemencie, oryginalny tekst / treść danego elementu jest ignorowany do filtrowania (W powyższym przykładzie, nie jesteś już w stanie wyszukać element listy "Adele" . Można tylko znaleźć Adele, wpisując słowa kluczowe "f, a, v lub fav ").


Więcej przykładów

Filtr składane list
Jak filtrować składany zestaw list.

Filtr Stoły
Jak filtrowania tabeli.

Filtr <div> elementy
Jak filtrować <div> elementu zawierającego podrzędne <p> elementy.