"Enter"a basıp içeriğe geçin

Bootstrap Filter Plugin

Tahmini okuma süresi: 6 dakika

Form elementlerinin yan yana gösterilmesi yerine kullanıcı aksiyonu ile form elementinin gösterilmesini sağlar.

Bootstrap Filter Plugin Demo
Örnek Görüntü

Temel Form Elementleri

Filtre klasik form elementleri(text, radio, checkbox, select-one veya select-multiple) içeriyorsa bu kullanım önerilir. Örnek sayfa için tıklayınız.

HTML

Düğmelere “data-filter” özelliği eklenir. Filtrenin adı değer olarak verilir.

Düğmelere tıklandığında açılacak olan konteynırlara “data-filter-container” özelliği eklenir. Filtrenin adı değer olarak verilir.

Konteynır içerisinde text, radio, checkbox, select-one veya select-multiple form elementleri bulunabilir.

JS

Filtrelerin ismini, etiketini, versayılan metnini ve değerini içeren JSON nesnesi oluşturulur.
JSON’un anahtarı HTML’de eklenen “data-filter” değeri ile aynı olmalıdır.

nameKonteynırın içerisinde bulunan form elementinin ismi belirtilir.
labelFiltre düğmesinde filtrenin adını göstermek için kullanılır.
defaultTextForm elementinde seçim yoksa filtre düğmesinde varsayılan metni göstermek için kullanılır.
defaultValueSıfırla düğmesine veya filtreyi temizle düğmesine tıklandığında form elementinde seçilecek değeri belirtir.

Özel Form Elementleri

Filtre birden fazla form elementi veya farklı komponentler içeriyorsa bu kullanım önerilir. Örnek sayfa için tıklayınız.

JS

Her filtre için üç tane metot tanımlanır.
Filtrenin metnini dönen metot “getText” adıyla tanımlanır.
Filtrenin değerini dönen metot “getValue” adıyla tanımlanır.
Filtrenin temizlenmesi çağrılacak metot “clearValue “adıyla tanımlanır.
JSON’un anahtarı HTML’de eklenen “data-filter” değeri ile aynı olmalıdır.

Form Olaylarını Yakalama

Uygula veya sıfırla düğmelerine basıldığında olay tetiklenmesi isteniyorsa bu kullanım önerilir. Örnek sayfa için tıklayınız.

JS

İki tane metot tanımlanır.
Sıfırla düğmesine basıldığında çağrılacak metot “clickedFilterResetButton” adıyla tanımlanır.
Uygula düğmesine basıldığında çağrılacak metot “clickedFilterApplyButton” adıyla tanımlanır.
Filtre değerleri JSON formatında “clickedFilterApplyButton” metotuna parametre(payload) olarak geçirilir.

Kaynak koduna ve örneklere Github’dan erişebilirsiniz.

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir