Filtrelenebilir Elemanları
Birden fazla çocuk eleman Tüm elemanlar, filtre edilebilir.
Nasıl Arama alan oluşturmak için:
- Eğer Filtrelenebilir olmak istiyorum eleman içermelidir data-filter="true" özniteliği.
- Bir oluşturma <input> belirtilen kimliği ile eleman ve eklemek data-type="search" özelliğini. Bu temel bir arama alanını oluşturur. Sarın <input> bir formda ve eklemek "ui-filterable" için sınıf <form> elemanı - Bu arama alanı ve filtre edilebilir eleman arasındaki marj ayarlayacaktır.
- Ardından eklemek data-input Filtrelenebilir elemana niteliğini. Onun değeri kimliğiyle eşleşmelidir <input> elemanı.
Aşağıda, filtrelenebilir liste görünümünü oluşturduk:
Bir listedeki elementlerin ara
<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> Kendin dene " İpucu: Arama alanına beklenen değerini açıklayan kısa ipucu belirtmek için bir yer tutucu kullanın:
Özel Filtre
Her bir alt öğe içindeki metin (gibi filtreleme için kullanılan gerçek metin "Adele" ya da "B" için "Billy" ). Bunun yerine özel bir filtre metnine arama filtrelemek istiyorsanız Ancak, ekleyebilir data-filtertext herhangi bir çocuk elemana niteliğini:
Eğer kullanırsanız data-filtertext bir eleman üzerinde niteliğini, o belirli elemanın orijinal metin / içerik Yukarıdaki örnekte, artık liste öğesi için arama yapabilir (filtreleme için yok sayılır "Adele" . Yalnızca bulabilirsiniz Anahtar kelimeleri yazarak Adele "f, a, v veya fav ".)
Diğer Örnekler
Katlanır Listeleri Filtre
Nasıl listelerin bir katlanabilir kümesini filtrelemek için.
Filtre Tabloları
Nasıl bir tablo filtrelemek için.
Filtre <div> öğelerini
Bir filtre nasıl <div> çocuk içeren elemanı <p> elemanları.