HTML में खोजें, सॉर्ट और फ़िल्टर सूची

एक साधारण 7K List.js मिनी स्क्रिप्ट HTML में बुलेटेड सूचियों में अन्तरक्रियाशीलता जोड़ती है। स्क्रिप्ट का उपयोग करके, आप आसानी से नए तत्वों को जोड़ने या हटाने के साथ सूची को खोज, सॉर्ट, संपादित कर सकते हैं (उदाहरण के लिए, पृष्ठ पर पता पुस्तिका), आदि। चुना की याद ताजा करती है, केवल ड्रॉप-डाउन सूची को वहां संशोधित किया गया था।

List.js - नियमित जावास्क्रिप्ट जिसे jQuery की आवश्यकता नहीं है, सभी ब्राउज़रों में समस्याओं के बिना काम करता है। यहाँ और यहाँ कुछ उदाहरण देखें।

List.js को MIT पब्लिक लाइसेंस के तहत प्रकाशित किया जाता है।

उदाहरण के लिए, यहां उपयोगकर्ता द्वारा एक बटन के क्लिक पर एक वेब पेज पर एक नई सूची बनाने का कार्य है।

एचटीएमएल

<div id="hacker-list"> <ul class="list"></ul> </div> <div style="display:none;"> <!-- A template element is needed when list is empty, TODO: needs a better solution --> <li id="hacker-item"> <h3 class="name"></h3> <p class="city"></p> </li> </div> 

जावास्क्रिप्ट

 var options = { item: 'hacker-item' }; var values = [ { name: 'Jonny', city:'Stockholm' } , { name: 'Jonas', city:'Berlin' } ]; var hackerList = new List('hacker-list', options, values); 

सूची को खोजने और छाँटने के लिए बटन।

एचटीएमएल

 <div id="hacker-list"> <input class="search" /> <span class="sort" rel="name">Sort by name</span> <span class="sort" rel="city">Sort by city</span> <ul class="list"> <li> <h3 class="name">Jonny</h3> <p class="city">Stockholm</p> </li> <li> <h3 class="name">Jonas</h3> <p class="city">Berlin</p> </li> </ul> </div> 

जावास्क्रिप्ट

 var options = { valueNames: [ 'name', 'city' ] }; var hackerList = new List('hacker-list', options); 

सामान्य तौर पर, सब कुछ सरल है। डाउनलोड करें और अपने लिए देखें।