mui----搜索列表自定义_mui搜索,mui搜索资源-CSDN文库

共7个文件

css：3个

js：2个

html：1个

4星 · 超过85%的资源需积分: 3 4 浏览量 2017-11-03 18:34:39 上传评论 1 收藏 70KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

muiIndexedList.rar （7个子文件）

muiIndexedList

fonts

mui.ttf 29KB

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

<!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">  </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

评论收藏

内容反馈

lizzy302

2019-07-17

还行吧对我没用
hd_luckydog

2019-04-19

如果你的页面需要哪个搜索框，搜索框放哪啊

Rattenking
上传者
2019-04-19

特别说明：如果你的页面需要哪个搜索框，只用放开第四步禁止的代码就好，然后将输入框加入进来，依然可以执行！
qq_23785253

2019-01-18

这个可以的可用不忽悠
maanshanunity

2018-12-29

厉害啊
蘑菇工程师

2017-11-27

感谢楼主