Native JavaScript Mobile Alphabetical Index List (Original)

Add-ons

2026-07-25 23:15 8 次浏览 • 0 次下载 7.6KB

Native JavaScript Mobile Alphabetical Index List (Original)

Plugin Description: A simple-to-use, customizable data list that does not depend on jQuery.

Last Updated: 2020-12-30 10:10:14

Usage

Import JS

1	`<script` `src="./index_selection.js"></script>`

Import CSS

<link rel="stylesheet" type="text/css" media="screen" href="./index_selection.css">

HTML Code

<div class="index_selection_page_container">
   <header>
      <div class="title">Select City</div>
      <div class="icon_container">
         <i class="iconfont icon-close"></i>
      </div>
   </header>
</div>

Usage - Data Example

var dataSource = [{
    key: 'A', // Text in the right floating sidebar and corresponding text in the list       
    dataList: [
        // Data under this pinyin initial       
        {
            label: 'Avatar', // Text displayed in the list               
            value: 'Content to retrieve after clicking' // Text to retrieve after clicking        
        },
        {
            label: 'Alibaba',
            value: 'Content to retrieve after clicking'
        }
    ],
    key: 'B',
    dataList: [{
        label: 'Content',
        value: 'Content to retrieve after clicking'
    }],
    key: '#',
    dataList: [{
        label: 'Liuzhou City',
        value: 'Liuzhou City, Guangxi'
    }]
}]
// Data is optional. If omitted, the default city list will be used.
new indexSelection(dataSource, function(value) {
    alert(value)
})