移动端JQuery城市选择插件

最新推荐文章于 2024-08-17 11:31:53 发布
码农一念间
最新推荐文章于 2024-08-17 11:31:53 发布
阅读量1.1k
点赞数
分类专栏： javascript 文章标签： html javascript
本文链接：https://blog.csdn.net/qq_32454921/article/details/95449181
版权
javascript 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
移动端JQuery城市选择插件
仿美团城市选择插件
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>蚁传播</title>
    <script src="assets/js/global.js"></script>
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/sprite.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <style type="text/css">
      html,body{
        height: 100%;
        background: #f2f2f2;
      }
      .layui-m-layer .layui-m-layer-msg{bottom:0!important}
      .layui-m-layer0 .layui-m-layerchild{
        width: auto!important;
        border-radius: 0px;
      }
    </style>
</head>
<body>
  <div class="itemBI pd_b_50">
    <div id="rightNavContainer" class="itemBI-divB">
      <div class="itemBI-spanC">目前</div>
      <div class="itemBI-spanC">开通</div>
      <div class="itemBI-spanC">城市</div>
      <ul id="rightNav" class="itemBI-uDA"></ul>
    </div>
    <div class="itemBI-divA">所选城市/最近访问</div>
    <div id="nearbyCityList" class="itemBI-ulA clearfix">
      <a href="" class="itemBI-liA">
        <span class="itemBI-spanA"></span>
        <span id="curCity">深圳市</span>
      </a>
      <a href="/index.html?cityId=6905&cityName=上海市&provId=793" class="itemBI-liA">上海市</a>
      <a href="/index.html?cityId=926&cityName=杭州市&provId=925" class="itemBI-liA">杭州市</a>
    </div>

    <div class="itemBI-divA">热门城市</div>
    <div class="itemBI-ulA clearfix">
      <a href="/index.html?cityId=1968&cityName=深圳市&provId=1943" class="itemBI-liA">深圳市</a>
      <a href="/index.html?cityId=6905&cityName=上海市&provId=793" class="itemBI-liA">上海市</a>
      <a href="/index.html?cityId=926&cityName=杭州市&provId=925" class="itemBI-liA">杭州市</a>
      <a href="/index.html?cityId=2028&cityName=惠州市&provId=1943" class="itemBI-liA">惠州市</a>
    </div>
    <ul id="cityList" class="itemBI-ulB"></ul>
  </div>
  <div style="width:100%;height:86%"></div>
<script src="assets/js/lib/jquery-3.1.1.min.js"></script>
<script src="assets/js/lib/fastclick.js"></script>
<script src="assets/js/lib/layer.js"></script>
<script src="assets/js/common.js"></script>
<script>
  // 设置当前城市
  var curProvId= localStorage.getItem('provId');
  var curCityId= localStorage.getItem('cityId');
  var curCityName= localStorage.getItem('cityName');
  var href = '/index.html?cityId='+curCityId+'&cityName='+curCityName+'&provId='+curProvId;
  $("#curCity").text(curCityName).closest(".itemBI-liA").attr("href",href);

  // 设置城市列表
  var cityList = '<%= JSON.stringify(cityList)%>';
  var reg = /&#34;/g;
  var timer = null;

  cityList = cityList.replace(reg,'"');
  cityList = JSON.parse(cityList);
  // console.log("cityList : ",cityList);

  // 弹窗
  function alertMsg(content, time) {
      if (content) {
          layer.open({
              content: content,
              skin: 'msg',
              time: time || 1.5,
              shade: false
          })
      }
  }

  // 获取数据
  function setSort(arr,json){
    var res = [];
    var tmp = {};
    for(var i=0;i<arr.length;i++){
      if(tmp[arr[i]])continue;
      var item = json[arr[i]];
      tmp[arr[i]] = true;
      for(var j=0;j<item.length;j++)res.push(item[j]);
    }
    return res;
  }

  // 将字母排序
  function cityListSortFn(cityList){
    var arr = [];
    var json = {};
    var res = null;
    // 缓存城市
    for(var i=0;i<cityList.length;i++){
      var item = cityList[i];
      arr.push(item.szm);
      if(!json[item.szm])json[item.szm]=[];
      json[item.szm].push(item);
    }
    // 排序城市
    arr = arr.sort()
    // 整理数据
    res = setSort(arr,json);
    return res;
  }

  var list = cityListSortFn(cityList);
  var listNav = [];
  var listTop = [];

  // 设置最近访问
  function setNearbyCityFn(){
    var provId = localStorage.getItem('provId');
    var cityId = localStorage.getItem('cityId');
    var cityName = localStorage.getItem('cityName');
    var setNearbyCityJson = localStorage.getItem('setNearbyCityJson')?JSON.parse(localStorage.getItem('setNearbyCityJson')):{};
    var json = setNearbyCityJson.json?setNearbyCityJson.json:{};
    var array = setNearbyCityJson.array?setNearbyCityJson.array:[];
    if(json[cityId] != null)array.splice(json[cityId],1);
    array.unshift({
      provId:provId,
      cityId:cityId,
      cityName:cityName
    })
    array = array.splice(0,4);
    var elStr = '';
    var list = array;
    for(var i=0;i<list.length;i++){
      var item = list[i];
      elStr += '<a href="/index.html?cityId=' + item.cityId + '&amp;cityName=' + item.cityName + '&amp;provId=' + item.provId + '" class="itemBI-liA">' + ((!i)?'<span class="itemBI-spanA"></span><span>' + item.cityName + '</span>':item.cityName) + '</a>';
      json[item.cityId] = i;
    }
    $("#nearbyCityList").html(elStr);
    setNearbyCityJson = {
      json:json,
      array:array
    }
    localStorage.setItem('setNearbyCityJson',JSON.stringify(setNearbyCityJson));
  }
  setNearbyCityFn();


  // 获取所有首字母的Top数组
  function getListTopArrFn(){
    var $dataNav = $("#cityList [data-nav]");
    $dataNav.each(function(){
      listTop.push($(this).offset().top);
    })
  }

  // 设置右侧导航自动定位
  function setRightNavScroll(){
    var $rightNavActive = $("#rightNav .itemBI-liD.active");
    var top = $rightNavActive.position().top;
    $("#rightNav").scrollTop(top);
  }

  // 定位右侧导航
  function setRightNavFn(list,scrollTop){
    var thisIndex = 0;
    for(var i=0;i<list.length;i++){
      var item = list[i];
      if(item < scrollTop){
        thisIndex = i
      }else{
        continue;
      }
    }
    return thisIndex;
  }

  // 右侧导航渲染
  function setRightNavRenderFn(list){
    var elStr  = '';
    for(var i=0;i<list.length;i++){
      var item = list[i];
      elStr += '<li class="itemBI-liD ' + ((!i)?'active':'') + '">' + item + '</li>';
    }
    $("#rightNav").html(elStr);
  }

  // 页面渲染
  function setPageRenderFn(list){
    var elStr = '';
    var letterStr = '';
    var letterBol = false;
    var index  = 0;
    for(var i=0;i<list.length;i++){
      var item = list[i];
      if(letterStr != item.szm[0]){
        letterStr = item.szm[0];
        listNav.push(letterStr);
        letterBol = true;
        index = 0;
      }else{
        index++;
        letterBol = false;
      }
      // 每个字母的最后一个 
      if((letterBol && i)){
          elStr += '\
              </ul>\
            </li>\
          ';
      }
      // 第一个
      if(letterBol && !index){
          elStr += '\
            <li class="itemBI-liB" data-nav="' + letterStr + '">\
              <div class="itemBI-spanB">' + letterStr + '</div>\
              <div class="itemBI-ulC">';
      }
      elStr += '\
                <a href="/index.html?cityId=' + item.cityId + '&cityName=' + item.cityName + '&provId=' + item.pid + '" class="itemBI-liC" data-cityId="' + item.cityId + '">' + item.cityName + '</a>';
      // 最后一个 
      if(i == list.length-1){
          elStr += '\
              </div>\
            </li>\
          ';
      }
    }
    setRightNavRenderFn(listNav)
    $("#cityList").html(elStr);
    getListTopArrFn();
  }
  setPageRenderFn(list);

  // 右侧导航悬浮效果
  function setRightNavHoverFn(){
      $("#rightNavContainer").addClass("hover");
      timer = setTimeout(function() {
        $("#rightNavContainer").removeClass("hover");
      }, 2000);
  }

  function setNavEventFn(){
    // 由右侧导航定位列表
    $("#rightNav").on("click",".itemBI-liD",function(){
      setRightNavHoverFn();
      $(this).addClass("active").siblings().removeClass("active");
      var dataNav = $(this).text();
      alertMsg(dataNav);
      var $dataNav = $('[data-nav='+dataNav+']');
      var top = $dataNav.offset().top;
      $(document).scrollTop(top+1);
    })
    // 由列表定位到右侧导航
    var topIndex = 0;
    $(document).scroll(function(){
      var scrollTop = $(document).scrollTop();
      var thisIndex = setRightNavFn(listTop,scrollTop);
      if(topIndex != thisIndex){
        $("#rightNav .itemBI-liD").eq(thisIndex).addClass("active").siblings().removeClass("active");
        topIndex = thisIndex;
        setRightNavScroll();
        alertMsg($("#rightNav .itemBI-liD").eq(topIndex).text());
      }else if(topIndex == 0){
        $("#rightNav .itemBI-liD").eq(0).addClass("active").siblings().removeClass("active");
      }
    })
  }
  setNavEventFn();

  // 右侧导航滑动事件
  // 背景色变透明黑色
  /*单指拖动*/
  var rightNavContainer = document.getElementById('rightNavContainer');
  rightNavContainer.addEventListener('touchstart', function(event) {
    setRightNavHoverFn();
  }, false); 
  rightNavContainer.addEventListener('touchmove', function(event) {
    setRightNavHoverFn();
  }, false); 
  rightNavContainer.addEventListener('touchend', function(event) {
    setRightNavHoverFn();
  }, false); 
</script>
</body>
</html>
页面效果链接：
http://w.in-shequ.com/location.html?returnUrl=/index.html