E-Siber.com
M. Mekin Pesen
Sitede 1774 okunmaya de─čer yaz─▒ var.

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.

 

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


· · · · · · · · ·
Yazan: | 19.12.2011 | 6294 kez okundu.

Yaz─▒lar E-Posta Kutunuza Gelsin:

Bu yaz─▒y─▒ izinsiz olarak al─▒p ba┼čka herhangi bir yerde yay─▒nlayamazs─▒n─▒z (Bkz "dijital at h─▒rs─▒z─▒" kimdir?). Yaz─▒lar─▒n ba┼čka yerlerde yay─▒nlanmas─▒na ├╝creti mukabili izin veriyoruz. Yaz─▒lar─▒ izinsiz olarak ba┼čka bir yerde yay─▒nlaman─▒z, her t├╝rl├╝ hukuki sonucu kabul etti─činiz manas─▒na gelir. Yaz─▒lar─▒ izin almak ve kaynak g├Âstermek kayd─▒yla sadece kamu kurumlar─▒ ve akademik ara┼čt─▒rmac─▒lar ├╝cretsiz olarak kullanabilir. Bunlar─▒n d─▒┼č─▒nda kalan herkes ├╝cret ├Âder. Detaylar i├žin bize ula┼č─▒n.

Yorum altyap─▒s─▒: Disqus

Yukarı Çık

M. MEK─░N PESEN
© 2007-2015 E-S─░BER B─░LG─░-─░LET─░┼×─░M TEKNOLOJ─░LER─░
E-Siber.com | E-Siber.net | ESiber.com | ESiber.net | RSS | Facebook | Twitter | E-Posta Aboneli─či
IP: 54.81.2.151 | Y├╝klenme: 0.792 saniye. | Hakk─▒m─▒zda | ─░leti┼čim | Reklam Verin | Site Politikalar─▒ | At─▒flar