Простой мини-скрипт Список.
js Размер 7 КБ добавляет интерактивности маркированным спискам в HTML. С помощью скрипта можно сделать удобный поиск, сортировку, редактирование списка с добавлением или удалением новых элементов (например адресная книга на странице) и т.д. Что-то напоминает Избранный , только там выпадающие списки были доработаны.
List.js — это обычный JavaScript, не требующий jQuery и безупречно работающий во всех браузерах.
Посмотрите пару примеров.
Список.
js опубликовано по открытой лицензии MIT. Например, вот функция для создания нового списка на веб-странице, когда пользователь нажимает кнопку.
HTML
JavaScript<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);Кнопки поиска и сортировки в списке.
HTML <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>
Javascript var options = {
valueNames: [ 'name', 'city' ]
};
var hackerList = new List('hacker-list', options);
В общем, все просто.
Скачать и убедитесь сами.
Теги: #list.js #список элементов #маркированный список #JavaScript
-
Обзор О Toshiba Nb255 N240
19 Oct, 24 -
Жж.ру
19 Oct, 24 -
Выпущен Asp.net Mvc 1.0
19 Oct, 24 -
Как Мне Искать Новую Работу?
19 Oct, 24
