Düz HTML Listelerini Dinamik Listelere Çevirin



List.js, sadece 7 kb boyutunda ve web tarayıcısı üzerinden düz listelere sanki sunucu üzerinden yapılıyormuş gibi dinamik ve efektif özellikler kazandıran çok inovatif bir listeleme scriptidir.

List.js ile statik HTML listelerine PHP ya da ASP gibi dinamik kodlamalardan bağımsız olarak her türlü arama, sıralama, filtreleme, madde ekleme-çıkarma ve güncelleme özellikleri kazandırılabiliyor. List.js ile sadece var olan düz metin listelerinize birkaç class adı ekleyerek listelerinizi oldukça dinamik bir hale dönüştürebilirsiniz. Örneğin düz HTML’de:

<div id="example-list">
    <input class="search" />
    <span class="sort" data-sort="feature">Sort features</span>
    <ul class="list">                               
       <li>
           <span class="feature">Search</span>
           <small class="description">Search through all items.</small>
       </li>                           
       <li>
           <span class="feature">Sort</span>
           <small class="description">Sort lists by value that
               you choose.</small>
       </li>                           
       <li>
           <span class="feature">Filter</span>
           <small class="description">Write your own filter functions.</small>
       </li>
    </ul>
</div>

olarak görünen kodlara sadece class=”search” ve class=”feature” gibi birkaç tane kullanacağınız class adı ekleniyor. Ardından script çağrılıyor:

var templates = {
    valueNames: [ 'feature', 'description' ]
};
var values = [
    { feature: 'Add', description:'Add items on the fly.' }
    , { feature: 'Get', description:'Get item based on value.' }
    , { feature: 'Update', description:'Update items as you go.' }
];
var featureList = new List('example-list', templates, values);
 
var newFeature = {
    feature: 'Remove'
    , description:'Remove items whenever you feel like.'
};
featureList.add(newFeature);

Kullanımı oldukça basit olan List.js’nin kaynak kodlarına bakabilir, yapılmış örnekleri inceleyebilirsiniz.

Anasayfası


Yorum Ekle

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

Captcha