List Index

    List Index allows to access a particular section of the list view instantly without scrolling through each section.

    Single List Index layout is pretty simple:

    List Index App Methods

    Let’s look at related App methods to work with List Index:

    app.listIndex.create(parameters)- create List Index instance

    • parameters - object. Object with list index parameters

    app.listIndex.destroy(el)- destroy List Index instance

    • el - HTMLElement or string (with CSS Selector) or object. List Index element or List Index instance to destroy.

    app.listIndex.get(el)- get List Index instance by HTML element

    • el - HTMLElement or string (with CSS Selector). List Index element.

    Method returns List Index’s instance

    Now let’s look at list of available parameters we need to create List Index:

    List Index Methods & Properties

    After that we have its initialized instance (like listIndex variable in example above) with useful methods and properties:

    List Index will fire the following DOM events on list index element and events on app and list index instance:

    App and List Index Instance Events

    List Index instance emits events on both self instance and app instance. App instance events has same names prefixed with listIndex.

    List Index Auto Initialization

    If you don’t need to use List Index API and your List Index is inside of the page and presented in DOM on moment of page initialization then it can be auto initialized with just adding additional class:

    1. <!-- Add list-index-init class -->
    2. <div class="list-index list-index-init"></div>

    When using auto init you may need to pass additional parameters. you can set all available parameters via data- attributes on list index element:

    1. <div class="page">
    2.   ...
    4.   <!-- parameters set via data- attributes -->
    5.   <div class="list-index"
    6.     data-list-el=".contacts-list"
    7.     data-label="true"
    8.     data-indexes="auto"
    9.   ></div>
    11.   <div class="page-content">
    13.     </div>
    14.   </div>
    15. </div>
    1. var app = new Framework7();
    3. var listIndex = app.listIndex.create({
    4.   // ".list-index" element
    5.   el: '.list-index',
    6.   // List el where to look indexes and scroll for
    7.   listEl: '.contacts-list',
    8.   // Generate indexes automatically based on ".list-group-title" and ".item-divider"
    9.   indexes: 'auto',
    10.   // Scroll list on indexes click and touchmove
    11.   scrollList: true,
    12.   // Enable bubble label when swiping over indexes