max-indexed-list v0.1.7

indexed-list

索引列表组件（类似通讯录那种）

HTML 结构

<div class="indexed-list">
    <div class="indexed-list-alert">A</div>
    <div class="indexed-list-bar">
        <a>A</a>
        <a>B</a>
        <a>C</a>
        <a>D</a>
        <!-- ... -->
    </div>
    <div class="indexed-list-inner">
        <ul>
            <!-- A组 -->
            <li data-group="A" class="indexed-list-group">A</li>
            <li class="indexed-list-item">AAAAA1</li>
            <li class="indexed-list-item">AAAAA1</li>
            <li class="indexed-list-item">AAAAA1</li>
            <li class="indexed-list-item">AAAAA1</li>

            <!-- B组 -->
            <li data-group="B" class="indexed-list-group">B</li>
            <li class="indexed-list-item">BBBBB1</li>
            <li class="indexed-list-item">BBBBB1</li>
            <li class="indexed-list-item">BBBBB1</li>
            <li class="indexed-list-item">BBBBB1</li>

            <!-- C组 -->
            <li data-group="C" class="indexed-list-group">C</li>
            <li class="indexed-list-item">CCCCC1</li>
            <li class="indexed-list-item">CCCCC1</li>
            <li class="indexed-list-item">CCCCC1</li>
            <li class="indexed-list-item">CCCCC1</li>

            <!-- ... -->
        </ul>
    </div>
</div>

使用

引入文件

<script src="indexed-list"></script>

或者

import IndexedList from 'max-indexed-list';

组件初始化

var indexedList = new IndexedList();

初始化参数

var options = {
    box: '.indexed-list'
};
var indexedList = new IndexedList(option);

API