<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/mui.indexedlist.css" rel="stylesheet" />
<style>
html,body {
height: 100%;
overflow: hidden;
}
.mui-bar {
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-indexed-list-group{
background-color: #efeff4;
font-size: 12px;
height: 25px;
}
.con {
margin-top: 12px;
font-size: 16px;
color: #333;
}
.mui-indexed-list-bar{
background-color:transparent;
}
.mui-search{
display: none;
}
img{
border-radius:8px ;
}
#order{
height: 60px;
line-height: 60px;
text-align: center;
background-color: #efeff4;
color: #333;
}
#new{
background-color: #EC971F;
}
#group{
background-color: #2AC845;
}
#tag{
background-color: #0062CC;
}
#off{
background-color: #0062CC;
}
#Top-bar{
height: 0px !important;
padding-top: 0px;
padding-bottom: 0px;
}
</style>
</head>
<body>
<!-- <header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">indexed list（索引列表）</h1>
</header> -->
<div class="mui-content">
<div id='list' class="mui-indexed-list">
<div class="mui-indexed-list-search mui-input-row mui-search">
<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索好友">
</div>
<div class="mui-indexed-list-bar">
<a>↑</a>
<a>☆</a>
<a>A</a>
<a>B</a>
<a>C</a>
<a>D</a>
<a>E</a>
<a>F</a>
<a>G</a>
<a>H</a>
<a>I</a>
<a>J</a>
<a>K</a>
<a>L</a>
<a>M</a>
<a>N</a>
<a>O</a>
<a>P</a>
<a>Q</a>
<a>R</a>
<a>S</a>
<a>T</a>
<a>U</a>
<a>V</a>
<a>W</a>
<a>X</a>
<a>Y</a>
<a>Z</a>
<a>#</a>
</div>
<div class="mui-indexed-list-alert"></div>
<div class="mui-indexed-list-inner">
<div class="mui-indexed-list-empty-alert">没有数据</div>
<ul class="mui-table-view" id="list">
<li data-group="↑" class="mui-table-view-divider mui-indexed-list-group" id="Top-bar"></li>
<li data-value="new" data-tags="NewFriends" class="mui-table-view-cell mui-indexed-list-item"><a href="javascript:;"><img id="new" class="mui-media-object mui-pull-left" src="img/icon/my-fill.png"><div class="con">New Friends</div></a></li>
<li data-value="new" data-tags="NewFriends" class="mui-table-view-cell mui-indexed-list-item"><a href="javascript:;"><img id="group" class="mui-media-object mui-pull-left" src="img/icon/group-fill.png"><div class="con">Group Chats</div></a></li>
<li data-value="new" data-tags="NewFriends" class="mui-table-view-cell mui-indexed-list-item"><a href="javascript:;"><img id="tag" class="mui-media-object mui-pull-left" src="img/icon/tag-fill.png"><div class="con">Tags</div></a></li>
<li data-value="new" data-tags="NewFriends" class="mui-table-view-cell mui-indexed-list-item"><a href="javascript:;"><img id="off" class="mui-media-object mui-pull-left" src="img/icon/like-fill.png"><div class="con">Official Accounts</div></a></li>
<li data-group="☆" class="mui-table-view-divider mui-indexed-list-group">Starred</li>
<div id="Top"></div>
<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
<div id="A"></div>
<li data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li>
<div id="B"></div>
<li data-group="C" class="mui-table-view-divider mui-indexed-list-group">C</li>
<div id="C"></div>
<li data-group="D" class="mui-table-view-divider mui-indexed-list-group">D</li>
<div id="D"></div>
<li data-group="E" class="mui-table-view-divider mui-indexed-list-group">E</li>
<div id="E"></div>
<li data-group="F" class="mui-table-view-divider mui-indexed-list-group">F</li>
<div id="F"></div>
<li data-group="G" class="mui-table-view-divider mui-indexed-list-group">G</li>
<div id="G"></div>
<li data-group="H" class="mui-table-view-divider mui-indexed-list-group">H</li>
<div id="H"></div>
<li data-group="J" class="mui-table-view-divider mui-indexed-list-group">J</li>
<div id="J" ></div>
<li data-group="K" class="mui-table-view-divider mui-indexed-list-group">K</li>
<div id="K"></div>
<li data-group="L" class="mui-table-view-divider mui-indexed-list-group">L</li>
<div id="L"></div>
<li data-group="M" class="mui-table-view-divider mui-indexed-list-group">M</li>
<div id="M"></div>
<li data-group="N" class="mui-table-view-divider mui-indexed-list-group">N</li>
<div id="N"></div>
<li data-group="P" class="mui-table-view-divider mui-indexed-list-group">P</li>
<div id="P"></div>
<li data-group="Q" class="mui-table-view-divider mui-indexed-list-group">Q</li>
<div id="Q"></div>
<li data-group="R" class="mui-table-view-divider mui-indexed-list-group">R</li>
<div id="R"></div>
<li data-group="S" class="mui-table-view-divider mui-indexed-list-group">S</li>
<div id="S"></div>
<li data-group="T" class="mui-table-view-divider mui-indexed-list-group">T</li>
<div id="T"></div>
<li data-group="W" class="mui-table-view-divider mui-indexed-list-group">W</li>
<div id="W"></div>
<li data-group="X" class="mui-table-view-divider mui-indexed-list-group">X</li>
<div id="X"></div>
<li data-group="Y" class="mui-table-view-divider mui-indexed-list-group">Y</li>
<div id="Y"></div>
<li data-group="Z" class="mui-table-view-divider mui-indexed-list-group">Z</li>
<div id="Z"></div>
<li data-group="#" class="mui-table-view-divider mui-indexed-list-group">#</li>
<div id="other"></div>
</ul>
<div id="order">
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/mui.indexedlist.js"></script>
<script src="js/Convert_Pinyin.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.ready(function() {
});
var header = document.querySelector('header.mui-bar');
var list = document.getElementById('list');
var bar = document.getElementsByClassName("mui-indexed-list-bar")[0];
//calc hieght
list.style.height = parseInt(document.body.offsetHeight)*1.0 + 'px';
//create
window.indexedList = new mui.IndexedList(list);
var xing = ["安","白","陈","大","峨","分","高","好","九","卡","来","马","皮","钱","任","谁","它","我","先","与","之李","魏","沈","张","徐","常","念","王","赵","钱","孙","周","吴","郑","欧阳"];
var ming = ["彪","巨昆","锐","花","小小","可爱","杰新","国伟","宁","徐天","宝信","来福","常威","刚","伟人","李伟","姚明","陆渡","帅新","阳刚"];
function getname(c, d) {//随机姓名
let xingming =c[Math.floor(Math.random() * (c.length))] + d[Math.floor(Math.random() * (d.length))];
return xingming;
}
function loaddata(){
var sum = 0;
for(let i=0;i<300;i++){
sum++;
var name = getname(xing, ming);
var qp= pinyin.getFullChars(name);//全拼
var jp = pinyin.getCamelChars(name);//简拼
var doc = document.getElementById(jp[0]);
var headon = parseInt(Math.random()*100);
//console.log(name,qp,jp)
if(doc != null){
doc.innerHTML+='<li data-value="'+jp+'" data-tags="'+qp+'" class="mui-table
mui仿微信页面.zip （192个子文件） 
mui.css 95KB mui.min.css 74KB font-awesome.css 37KB font-awesome.min.css 30KB icons-extra.css 3KB mui.indexedlist.css 2KB fontawesome-webfont.eot 162KB
head (91).gif 3KB head (41).gif 3KB head (49).gif 3KB head (14).gif 3KB head (84).gif 3KB head (5).gif 3KB head (38).gif 3KB head (63).gif 3KB head (51).gif 3KB head (32).gif 3KB head (15).gif 3KB head (95).gif 3KB head (9).gif 3KB head (87).gif 3KB head (81).gif 3KB head (12).gif 3KB head (3).gif 3KB head (27).gif 3KB head (13).gif 3KB head (30).gif 3KB head (16).gif 3KB head (45).gif 3KB head (35).gif 3KB head (39).gif 3KB head (20).gif 3KB head (43).gif 3KB head (76).gif 3KB head (86).gif 3KB head (88).gif 3KB head (90).gif 3KB head (46).gif 3KB head (2).gif 3KB head (31).gif 3KB head (8).gif 3KB head (17).gif 3KB head (83).gif 3KB head (60).gif 3KB head (68).gif 3KB head (89).gif 3KB head (80).gif 3KB head (47).gif 3KB head (96).gif 3KB head (53).gif 3KB head (62).gif 3KB head (78).gif 3KB head (11).gif 3KB head (56).gif 3KB head (99).gif 3KB head (36).gif 3KB head (29).gif 3KB head (79).gif 3KB head (67).gif 3KB head (58).gif 3KB head (19).gif 3KB head (73).gif 3KB head (52).gif 3KB head (1).gif 3KB head (37).gif 3KB head (54).gif 3KB head (42).gif 3KB head (75).gif 3KB head (92).gif 3KB head (21).gif 3KB head (85).gif 3KB head (72).gif 3KB head (0).gif 3KB head (71).gif 3KB head (55).gif 3KB head (26).gif 3KB head (69).gif 3KB head (24).gif 3KB head (82).gif 3KB head (22).gif 3KB head (50).gif 3KB head (93).gif 3KB head (18).gif 3KB head (48).gif 3KB head (6).gif 3KB head (65).gif 3KB head (33).gif 3KB head (34).gif 3KB head (97).gif 3KB head (74).gif 3KB head (28).gif 3KB head (57).gif 2KB head (4).gif 2KB head (66).gif 2KB head (25).gif 2KB head (70).gif 2KB head (59).gif 2KB head (94).gif 2KB head (44).gif 2KB head (77).gif 2KB共 192 条
- 1
- 2
资源评论
漏扫老司机2020-06-28效果还不错
