<!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 rel="stylesheet" type="text/css" href="../css/public.css"/>
<link href="../css/mui.indexedlist.css" rel="stylesheet" />
<style>
/*修改mui*/
html,body {height: 100%;overflow: hidden;}
.mui-bar {-webkit-box-shadow: none;box-shadow: none;}
.mui-icon-back:before, .mui-icon-left-nav:before{content: '\e460';color: #000;}
.mui-indexed-list-bar{width: 40px;background: #fff;}
.mui-indexed-list-bar.active{background: #fff;}
.mui-indexed-list-bar.active a{color: #ffd401;}
.mui-indexed-list-bar a{color: #ffd401;}
.mui-indexed-list-group{background: #fff;padding-top: 15px;padding-bottom: 15px;}
.mui-table-view-divider:after,.mui-table-view-divider:before,.mui-table-view:before{height: 0;}
.mui-indexed-list,.mui-indexed-list-search{border: none;}
/*添加class*/
.module-indexed-box{
padding-right: 50px;
}
.module-address{
padding:0 15px;
padding-right: 0;
font-size: 16px;
color: #656566;
background: #fff;
height: 50px;
line-height: 50px;
margin: 0;
position: relative;
}
.module-address span{
display: block;
border: 1px solid #d9d9d9;
border-radius: 4px;
height: 40px;
line-height: 40px;
margin-top:5px ;
padding: 0 13px;
}
.trading-area,.recent-area{padding: 10px 15px;font-size: 0;}
.trading-area li{
float: left;
color: #999999;
background: #f5f5f5;
border: 1px solid #f5f5f5;
font-size: 16px;
padding: 5px 8px;
border-radius: 16px;
margin: 10px 15px 10px 0;
}
.trading-area li.active{
background: #fff;
color: #000;
border: 1px solid #ffd401;
}
.recent-area li{
display: inline-block;
padding: 8px 14px;
color: #8b8b8c;
border: 1px solid #dbdbdb;
border-radius: 4px;
width: 30%;
margin-right: 5%;
font-size: 16px;
text-align: center;
}
.recent-area li:nth-child(3n){margin-right: 0;}
.hot-area li{margin-top: 15px;margin-bottom: 15px;}
</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">当前定位-成都市</h1>
</header>
<div class="mui-content">
<div id='list' class="mui-indexed-list">
<div class="mui-indexed-list-search mui-input-row mui-search">
<!--<p class="module-address">
</p>-->
</div>
<div class="mui-indexed-list-bar">
<a>定位</a>
<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>
</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">
<div class="module-indexed-box">
<!--定位-->
<div>
<p data-group="定位" class="module-address module-limit-after">
当前定位城市
<span class="fr">成都·<em id="trading">双楠商圈</em></span>
</p>
<ul class="trading-area clear">
<li class="active">双楠商圈</li>
<li>骡马市商圈</li>
<li>新会展商圈</li>
<li>会展商圈</li>
<li>神仙树商圈</li>
<li>火车南站商圈</li>
</ul>
</div>
<!--最近访问城市-->
<div>
<p data-group="最近" class="module-address module-limit-before">
最近访问城市
</p>
<ul class="recent-area clear">
<li>北京</li>
<li>成都</li>
<li>广州</li>
</ul>
</div>
<!--热门城市-->
<div>
<p data-group="热门" class="module-address">
热门城市
</p>
<ul class="recent-area hot-area clear">
<li>北京</li>
<li>上海</li>
<li>成都</li>
<li>广州</li>
<li>深圳</li>
<li>杭州</li>
<li>重庆</li>
<li>武汉</li>
<li>西安</li>
<li>长沙</li>
<li>苏州</li>
<li>南京</li>
<li>大连</li>
<li>沈阳</li>
<li>青岛</li>
</ul>
</div>
</div>
<!--全部城市-->
<p data-group="定位" class="module-address">
全部城市
</p>
<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
<li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item">安阳</li>
<li data-value="BPL" data-tags="ALaShanKou" class="mui-table-view-cell mui-indexed-list-item">安顺</li>
<li data-value="AAT" data-tags="ALeTai" class="mui-table-view-cell mui-indexed-list-item">安庆</li>
<li data-value="NGQ" data-tags="ALiKunSha" class="mui-table-view-cell mui-indexed-list-item">安山</li>
<li data-value="AQG" data-tags="AnQingTianZhuShan" class="mui-table-view-cell mui-indexed-list-item">安庆天柱山机场</li>
<li data-value="MFM" data-tags="AoMenGuoJi" class="mui-table-view-cell mui-indexed-list-item">澳门国际机场</li>
<li data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li>
<li data-value="BSD" data-tags="BaoShan" class="mui-table-view-cell mui-indexed-list-item">保山机场</li>
<li data-value="BAV" data-tags="BaoTou" class="mui-table-view-cell mui-indexed-list-item">包头机场</li>
<li data-value="BHY" data-tags="BeiHaiFuCheng" class="mui-table-view-cell mui-indexed-list-item">北海福成机场</li>
<li data-value="NAY" data-tags="BeiJingNanYuan" class="mui-table-view-cell mui-indexed-list-item">北京南苑机场</li>
<li data-value="PEK" data-tags="BeiJingShouDuGuoJi" class="mui-table-view-cell mui-indexed-list-item">北京首都国际机场</li>
<li data-group="C" class="mui-table-view-divider mui-indexed-list-group">C</li>
<li data-value="NBS" data-tags="ChangBaiShan" class="mui-table-view-cell mui-indexed-list-item">长白山机场</li>
<li data-value="CGQ" data-tags="ChangChunLongJiaGuoJi" class="mui-table-view-cell mui-indexed-list-item">长春龙嘉国际机场</li>
<li data-value="CGD" data-tags="ChangDeTaoHuaYuan" class="mui-table-view-cell mui-indexed-list-item">常德桃花源机场</li>
<li data-value="BPX" data-tags="ChangDuBangDa" class="mui-table-view-cell mui-indexed-list-item">昌都邦达机场</li>
<li data-value="CSX" data-tags="ChangShaHuangHuaGuoJi" class="mui-table-view-cell mui-indexed-list-item">长沙黄花国际机场</li>
<li data-value="CIH" data-tags="ChangZhiWangCun" class="mui-table-view-cell mui-indexed-list-item">长治王村机场</li>
<li data-value="CZX" data-tags="ChangZhouBenNiu" class="mui-table-view-cell mui-indexed-list-item">常州奔牛机场</li>
<li data-value="CTU" data-tags="ChengDuShuangLiuGuoJi" class="mui-table-view-cell mui-indexed-list-item">成都双流国际机场</li>
<li data-value="CIF" data-tags="ChiFeng" class="mui-table-view-cell mui-indexed-list-item">赤峰机场</li>
<li data-group="D" class="mui-table-view-divider mui-indexed-list-group">D</li>
<li data-value="DLU" data-tags="DaLi" class="mui-table-view-cell mui-indexed
没有合适的资源?快使用搜索试试~ 我知道了~
mui ---- 搜索列表自定义
共7个文件
css:3个
js:2个
html:1个
4星 · 超过85%的资源 需积分: 3 81 下载量 176 浏览量
2017-11-03
18:34:39
上传
评论 1
收藏 70KB RAR 举报
温馨提示
1,直接添加引用indexed-list.js和indexed-list.css; 2,修改indexed-list.js的self.el.bar.offsetHeight - 40为 self.el.bar.offsetHeight - self.el.search.offsetHeight 此处的作用是防止你将搜索框去掉,导致的右侧导航不协调 3,修改group && group.length == 1为group 此处是因为你添加的热门等字符串长度大于1而不能触发定位函数 4,禁止self.bindSearchEvent(); 此处是由于我的页面不需要搜索,所以讲搜索的触发事件禁止 5,添加你要添加的模块同时在模块的外层div加上data-group="xxxx"你导航处的名字 特别注意此处在utf-8的编码下可以是汉字,但是建议不要采取汉字 最后上边说的这几个地方在我的demo中都已修改好,你可以下载直接使用。 特别说明:如果你的页面需要哪个搜索框,只用放开第四步禁止的代码就好,然后将输入框加入进来,依然可以执行!
资源推荐
资源详情
资源评论
收起资源包目录
muiIndexedList.rar (7个子文件)
muiIndexedList
fonts
mui.ttf 29KB
js
mui.indexedlist.js 7KB
mui.min.js 119KB
css
mui.indexedlist.css 2KB
mui.min.css 74KB
public.css 3KB
page
indexed-list.html 28KB
共 7 条
- 1
资源评论
- lizzy3022019-07-17还行吧 对我没用
- hd_luckydog2019-04-19如果你的页面需要哪个搜索框,搜索框放哪啊Rattenking2019-04-19特别说明:如果你的页面需要哪个搜索框,只用放开第四步禁止的代码就好,然后将输入框加入进来,依然可以执行!
- qq_237852532019-01-18这个可以的 可用不忽悠
- maanshanunity2018-12-29厉害啊
- 蘑菇工程师2017-11-27感谢 楼主
Rattenking
- 粉丝: 3w+
- 资源: 40
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Android 凭证交换和更新协议 - “你只需登录一次”.zip
- 2024 年 ICONIP 展会.zip
- 微信小程序毕业设计-基于SSM的电影交流小程序【代码+论文+PPT】.zip
- 微信小程序毕业设计-基于SSM的食堂线上预约点餐小程序【代码+论文+PPT】.zip
- 锐捷交换机的堆叠,一个大问题
- 微信小程序毕业设计-基于SSM的校园失物招领小程序【代码+论文+PPT】.zip
- MATLAB《结合萨克拉门托模型和遗传算法为乐安河流域建立一个水文过程预测模型》+项目源码+文档说明
- 基于人工神经网络/随机森林/LSTM的径流预测项目
- 微信小程序毕业设计-基于SSM的驾校预约小程序【代码+论文+PPT】.zip
- Aspose.Words 18.7 版本 Word转成PDF无水印
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功