html手机索引列表,HUI

HUI 索引列表

HUI - 索引列表完整代码html>

HUI 

#hui-index-list-bar{width:25px; height:100%; position:fixed; z-index:2; top:46px; right:0px; background:#E4E4E4; padding-top:8px;}

#hui-index-list-bar a{display:block; width:100%; height:20px; line-height:20px; text-align:center; font-size:13px; color:#A3A3A3;}

.hui-index-list-title{height:44px; background:#F8F8F8; line-height:44px; padding:0px 10px; border-bottom:1px solid #E4E3E6;}

#hui-index-list-search{width:100%; height:26px; border-bottom:1px solid #E4E3E6; position:fixed; top:44px; left:0px; background:#FFFFFF;  z-index:1; padding:10px 0px;}

#hui-index-list-search input{width:100%; padding:0px 44px; height:26px; line-height:26px; border:0px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; webkit-appearance:none; -moz-appearance:none; appearance:none;}

#hui-index-list-search:before{content:'\e714'; width:44px; height:44px; line-height:44px; text-align:center; display:block; position:absolute; left:0px; top:0px; font-family:"hui-font"; font-size:16px;}

HUI 索引列表

A

阿坝

阿拉善

阿里

安康

安庆

鞍山

安顺

安阳

澳门

B

北京

白银

保定

宝鸡

保山

包头

巴中

北海

蚌埠

本溪

毕节

滨州

百色

亳州

C

重庆

成都

长沙

长春

沧州

常德

昌都

长治

常州

巢湖

潮州

承德

郴州

赤峰

池州

崇左

楚雄

滁州

朝阳

D

大连

东莞

大理

丹东

大庆

大同

大兴安岭

德宏

德阳

德州

定西

迪庆

东营

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

hui.plusReady(function(){

//头部搜索适应沉浸式【非app开发可移除】

hui('#hui-index-list-search').css({top: 44 + hui.immersedStatusbarHeight + 'px'});

hui('#hui-index-list-bar').css({top: 44 + hui.immersedStatusbarHeight + 'px'});

});

/*

* 说明:

* 城市例子展示到了 D，真实项目开发按照结构完成部署即可

* 请按照以下js实现 indexList

*/

//1、右侧字母序号点击事件绑定

hui('#hui-index-list-bar').find('a').click(function(){skipToIndex(this.innerHTML);});

//2、跳转到指定字母开头处函数定义

function skipToIndex(index){

var listTitle = hui('#hui-index-list-title_'+index);

if(listTitle.length 

var sets = listTitle.offset();

//减掉46是头部导航的高度 根据实际需求设置

hui.scrollTop(sets.top - 90);

}

//3、定义列表数据点击函数 根据实际需求自行编写代码即可

function selectTodo(val){

hui.toast(val);

}

//4、搜索

var sreachInput = document.getElementById('hui-index-list-search-input');

sreachInput.addEventListener('keyup', function(){

var k = this.value;

if(k.length 

var lists = hui('.hui-list-text');

for(var i = 0; i 

var _sobj = lists.dom[i];

if(_sobj.innerHTML.indexOf(k) != -1){

var sets = hui.offset(_sobj);

console.log(sets.top);

setTimeout(function(){hui.scrollTop(sets.top - 90 - hui.immersedStatusbarHeight);}, 300);

break;

}

}

});