Düz HTML Listelerini Dinamik Listelere Çevirin

Web tasarım, Web Programlama ve script dilleri konuları buraya
Cevapla
Kullanıcı avatarı
velociraptor
Yottabyte3
Yottabyte3
Mesajlar: 28205
Kayıt: 14 Mar 2006, 02:33
cinsiyet: Erkek

Düz HTML Listelerini Dinamik Listelere Çevirin

Mesaj gönderen velociraptor » 11 Haz 2012, 15:27

Resim

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:

Kod: Tümünü seç

<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:

Kod: Tümünü seç

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.

Adres:
http://listjs.com/
İndir:
https://raw.github.com/javve/list/master/list.min.js

ALINTIDIR
Knowledge determines destiny, And ye shall know the Truth and the Truth shall make you free



Cevapla