List.jsJavaScript生成灵活的列表

联合创作 · 2023-09-22 14:41

List.js 是一个轻量级(7kb)的 JavaScript 类库,支持多种浏览器,并且不依赖于其它任何框架。使用它能够生成相当灵活的 HTML 列表,将普通的 UL 列表变成拥有查找、排序和过滤功能的列表。除此之外,它还给列表增加了添加、修改和删除的功能,极大的扩展了现有列表的功能。

示例代码:

HTML

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

JavaScript

var options = {
    item: 'hacker-item'
};

var values = [
    { name: 'Jonny', city:'Stockholm' }
    , { name: 'Jonas', city:'Berlin' }
];

var hackerList = new List('hacker-list', options, values);

浏览 3
点赞
评论
收藏
分享

手机扫一扫分享

编辑
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑
举报