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

    Method returns created List Index’s 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

    So to create List Index we have to call:

    1. var listIndex = app.listIndex.create({ /* parameters */ })

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

    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 list-index-init class:

    In this case if you need to access created List Index instance you can use the app.listIndex.get app method:

    1. var listIndex = app.listIndex.get('.list-index');
    3. var indexes = listIndex.indexes;
    4. // do something with indexes

    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"
    7.     data-indexes="auto"
    8.   ></div>
    10.   <div class="page-content">
    11.     <div class="list contacts-list">
    12.       ...
    13.     </div>
    14.   </div>
    15. </div>

    Below is the list of related CSS variables (CSS custom properties).

    Examples

    1. <div class="page">
    2.   <div class="navbar">
    3.     ...
    4.   </div>
    6.   <!-- List index element -->
    7.   <div class="list-index"></div>
    9.   <div class="page-content">
    11.     <!-- Contacts list -->
    12.     <div class="list simple-list contacts-list">
    13.       <div class="list-group">
    14.         <ul>
    15.           <li class="list-group-title">A</li>
    16.           <li>Aaron</li>
    17.           <li>Adam</li>
    18.           ...
    19.         </ul>
    20.       </div>
    21.       <div class="list-group">
    22.           <li class="list-group-title">B</li>
    23.           <li>Benjamin</li>
    24.           <li>Blake</li>
    25.           <li>Bobby</li>
    26.         </ul>
    27.       </div>
    28.       <div class="list-group">
    29.         <ul>
    30.           <li class="list-group-title">C</li>
    31.           <li>Caleb</li>
    32.           <li>Callum</li>
    33.           ...
    34.         </ul>
    35.       </div>
    36.       ...
    37.     </div>
    38.   </div>
    39. </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