原生js移动端字母索引列表(原创)

所属分类:UI,APP模板-滚动,手机导航

 6830  57  查看评论 (0)
分享到微信朋友圈
X
原生js移动端字母索引列表(原创) ie兼容12

更新时间:2020-12-30 10:10:14

使用方法

引入js 

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

引入css 

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

html代码 

<div class="index_selection_page_container">
   <header>
      <div class="title">选择城市</div>
      <div class="icon_container">
         <i class="iconfont icon-close"></i>
      </div>
   </header>
</div>

调用-数据示例

var dataSource = [{
    key: 'A', //右侧悬浮栏的文字和列表对应的文字       
    dataList: [
        //此拼音下的数据       
        {
            label: '阿凡达', //列表显示的文字               
            value: '点击后想要的获取的内容' //点击后想获取的文字        
        },
        {
            label: '阿里巴巴',
            value: '点击后想要的获取的内容'
        }
    ],
    key: 'B',
    dataList: [{
        label: '内容',
        value: '点击后想要的获取的内容'
    }],
    key: '#',
    dataList: [{
        label: '柳州市',
        value: '广西 柳州市'
    }]
}]
//数据可不传,不传默认为城市列表
new indexSelection(dataSource, function(value) {
    alert(value)
})
相关插件-滚动,手机导航

jQueryScrollPage单页全屏滚动效果

漂亮的jQuery单页全屏滚动,带视差效果
  滚动
 35919  393

jquery模拟滚动条(未封装)

jquery模拟滚动条,支持自定义滚动条样式,兼容pad,web手机端未测试;支持同一网页多个滚动条;支持添加和删除(本人对封装不太了解,未封装)
  滚动
 38776  340

jQuery仿淘宝网右侧悬浮返回顶部和建议代码

jQuery仿淘宝网右侧悬浮返回顶部和建议代码
  滚动
 42610  355

jQuery横向全屏切换滚动

jQuery横向全屏切换滚动兼容ie6
  滚动
 50130  456

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复