代码网站建设/成都网站seo费用

蚂蚁分类信息系统H5端增加信息发布选择城市支持字母索引和热门城市

效果如下图

实现方法
1.用到的JS库 jquery1.10 betterscroll
2.修改模板文件 m/template/post.html

  <dl class="cfix"><dt>城市</dt><div class="form-item"><div class="controls controls-store controls-city"><input type="hidden" name="provinceid" id="provinceid" value="{$provinceid}"/><input type="hidden" name="cityid" id="cityid" value="{$cityid}"/><input type="hidden" name="areaid" id="areaid" value="{$areaid}"/><input type="hidden" name="letter" id="letter" value="{$firstLetter}"/><div class="city-wrapper"><input type="text" id="city" name="city" value="{$cityname}" class="current-city" readonly="" placeholder="请选择"><i class="icon-down"></i></div><div class="area-wrapper"><input type="text" id="district" name="district" value="{$areaname}" class="current-area" readonly="" placeholder="请选择"><i class="icon-down"></i></div></div></div><div class="masker hidden"></div><div class="city-box hidden"><section class="express-city-box"><div class="hot-city-title"><i></i><h4>热门城市</h4></div><div id="city-sidaber" class="city-sidaber"><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>F</p><p>G</p><p>H</p><p>J</p><p>K</p><p>L</p><p>M</p><p>N</p><p>P</p><p>Q</p><p>R</p><p>S</p><p>T</p><p>W</p><p>X</p><p>Y</p><p>Z</p></div><div class="hot-city"><div class="hot"><!--{php $hotcities1=getHotCityByNum(8);}--><!--{loop $hotcities1 $city}--><adata-value="{$city['cityname']}"data-id="{$city['cityid']}"data-pid="{$city['provinceid']}"data-letter="{echo strtoupper(substr($city['citypy'],0,1));}">{$city['cityname']}</a><!--{/loop}--></div></div><article id="cityBox" class="wrappernode"><section class="content"></section></article></section></div><div class="area-box hidden"><div class="hot-city-title"><i></i><h4>区/县</h4></div><ul class="citylist"><li class="cityitem" values=""></li></ul></div></dl>

底部增加

<script src="template/js/better-scroll.js"></script>
<script src="template/js/city.js"></script><script language="javascript">var options = {scrollY: true,scrollX: true,mouseWheel: true,click: true}var wrapper = document.querySelector('.wrappernode');var scroll = new BScroll(wrapper, options);// 城市选择$('input[name="city"]').on('click',function(){$('.city-box').slideDown(500,function(){scroll.refresh();});$('.masker').removeClass('hidden');setTimeout(function(){var preValue = $('#letter').val();if(preValue) {var alphabet = $('.letter-title');alphabet.map(function (i, item) {if (item.innerHTML == preValue) {scroll.scrollToElement(item);}})}},500);})$('.masker').on('click', function(){$('.masker').addClass('hidden');$('.city-box').slideUp(500);$('.area-box').slideUp(500);})$('.city-box .content').on('click', 'li',  function(e){$('input[name="city"]').val(e.target.innerHTML);$('#cityid').val($(this).attr('data-id'));$('#areaid').val("");$('#provinceid').val($(this).attr('data-pid'));$('#letter').val($(this).attr('data-letter'));$('input[name="district"]').val('');$('.city-box').slideUp(500);$('.masker').addClass('hidden');})$('.hot-city').on('click', 'a',  function(e){$(this).addClass('active');var hotValue = $(this).attr('data-value');$('input[name="city"]').val(hotValue);$('input[name="district"]').val('');$('#cityid').val($(this).attr('data-id'));$('#areaid').val("");$('#provinceid').val($(this).attr('data-pid'));$('#letter').val($(this).attr('data-letter'));$('.city-box').slideUp(500, function(){$('.hot-city a').removeClass('active');});$('.masker').addClass('hidden');})$('.city-sidaber').on('click',function(e){var value = e.target.innerHTML;var alphabet = $('.letter-title');alphabet.map(function(i,item){if(item.innerHTML == value){scroll.scrollToElement(item);}})})$('input[name="district"]').on('click',function(){var preValue = $('input[name="city"]').val();if(preValue){traverseArea(preValue);$('.area-box').slideDown(500);$('.masker').removeClass('hidden');}})$('.citylist').on('click', 'li',  function(e){$('input[name="district"]').val(e.target.innerHTML);$('#areaid').val($(this).attr('data-id'));//$('.n-msg-city').removeClass('tip-active').text("(必填项)");$('.area-box').slideUp(500);$('.masker').addClass('hidden');})
</script>

3 city.js内容

var res 
$.getJSON("./city.json", function (data){res = data;traverseCity(data);}) function traverseCity(data) {var cityStr = '';for(var key in data){cityStart = `<div class="letter-title">${key}</div><ul class="item-list">`;var citySoon = '';for(var i = 0;i < data[key].length;i ++){var result = data[key][i].city;citySoon += `<li data-pid="${result.pid}" data-letter="${result.letter}" data-id="${result.code}" class="item border-bottom">${result.name}</li>`}citySoon += `</ul>`;cityStr += (cityStart + citySoon);}$('.content').html(cityStr);}function traverseArea (name) {$('.citylist').html('');var oArea = '';for(var key in res){for(var i = 0;i < res[key].length;i ++){var result = res[key][i].city;if( result.name == name ){for(var k = 0;k < result.areaList.length;k ++){oArea += `<li data-id="${result.areaList[k].code}" class="cityitem">${result.areaList[k].name}</li>`;}}}}$('.citylist').html(oArea);}

4.PHP代码实现在m目录下生成city.json城市文件

	$allcities = get_allcities();$data = array();foreach ($allcities as $ck=>$cv){$tmp = array();$letter = strtoupper(trim($cv['firstletter']));$tmp['city']['name'] = trim($cv['cityname']);$tmp['city']['code'] = trim($cv['cityid']);$tmp['city']['pid']  = trim($cv['provinceid']);$tmp['city']['letter']  = $letter;$tmp['city']['areaList'] = array();$areaList = get_city_caches($cv['cityid']);if($areaList && $areaList['area']){$tmp1 = array();foreach ($areaList['area'] as $ak=>$av){$tmp1['name'] = $av['areaname'];$tmp1['code'] = $av['areaid'];$tmp['city']['areaList'][] = $tmp1;}unset($tmp1);}$data[$letter][] = $tmp;unset($tmp);}$file = MYMPS_ROOT."/m/city.json";file_put_contents($file,json_encode($data));