欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js实现移动端编辑添加地址【模仿京东】

程序员文章站 2023-01-03 16:50:33
效果图: 注:这里的数据格式用的是jsonp,json在这里存在跨域问题 代码如下:

效果图:

js实现移动端编辑添加地址【模仿京东】

注:这里的数据格式用的是jsonp,json在这里存在跨域问题

代码如下:

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no,">
 <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
 <title>examples</title>
 <meta name="description" content="">
 <meta name="keywords" content="">
 <style type="text/css">
  html, body {
   font-size: 10px
  }
  @media screen and (min-width:321px) and (max-width:375px) {
   html {
    font-size: 10px
   }
  }
  @media screen and (min-width:376px) and (max-width:414px) {
   html {
    font-size: 10px
   }
  }
  @media screen and (min-width:415px) and (max-width:639px) {
   html {
    font-size: 12px
   }
  }
  @media screen and (min-width:640px) and (max-width:719px) {
   html {
    font-size: 12px
   }
  }
  @media screen and (min-width:720px) {
   html {
    font-size: 16px
   }
  }
  html, body, ol, ul, li, a, div, input, label, form, textarea, span, h1, h2, h3, h4, h5, h6, p {
   padding: 0;
   margin: 0;
   font-weight: normal;
   box-sizing: border-box
  }
  html, body {
   font-family: "microsoft yahei", arial;
   width: 100%;
   height: auto;
   overflow-x: hidden
  }
  i, article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
   display: block
  }
  ul, ul li {
   list-style-type: none
  }
  a {
   outline: none;
   text-decoration: none;
   color: black
  }
  img {
   outline: none !important;
   border: none
  }
  input, textarea {
   outline: none;
   font-family: "microsoft yahei", arial;
   font-size: 1.6rem
  }
  header.public-header {
   height: 50px;
   padding: 0 10px;
   background: white;
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   z-index: 99;
   box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.08);
   -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.08);
   -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.08);
  }

  /* public-banner */
  header.public-header ..public-header-content {
   width: 100%;
  }
  header.public-header .public-header-content .public-logo a {
   display: block;
   height: 50px;
   width: 170px;
  }
  header.public-header .public-logo img {
   height: 100%;
   width: 100%;
  }
  header.public-header .public-header-content .btn-back {
   position: absolute;
   left: 0.5rem;
   top: 1rem;
   font-size: 3rem;
  }
  header.public-header .public-header-content .btn-back::after{
   content: "";
   height: 15px;
   width: 15px;
   border-left: 1px solid #393a3f;
   border-bottom: 1px solid #393a3f;
   background: white;
   position: absolute;
   left: 10px;
   top: 5px;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg)
  }
  header.public-header .public-header-content h1 {
   font-size: 1.8rem;
   text-align: center;
   line-height: 50px;
  }


  /* form-group */
  .form-group {
   height: 40px;
   line-height: 40px;
   padding: 0 10px;
   position: relative
  }
  .form-group::after {
   border-bottom: 1px solid #ccc;
   content: ' ';
   display: block;
   width: 100%;
   position: absolute;
   left: 0;
   bottom: 0;
   -webkit-transform-origin: left bottom;
   -webkit-transform: scaley(0.5);
   transform: scaley(0.5)
  }
  .form-group .form-label {
   font-size: 1.6rem
  }
  .form-group .input-flex {
   flex: 1;
   -webkit-flex: 1;
   -moz-flex: 1;
   ms-flex: 1;
   border: none;
   font-size: 1.4rem
  }
  .icon-trangle {
   height: 10px;
   width: 10px;
   border-top: 1px solid #b1b0b0;
   border-right: 1px solid #b1b0b0;
   background: white;
   position: absolute;
   right: 10px;
   top: 15px;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg)
  }

  /* toogle-address-mask */
  .toogle-address-mask {
   height: 100%;
   width: 100%;
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   background: rgba(0, 0, 0, 0.2);
   z-index: 99;
   opacity: 0
  }
  .toogle-address {
   height: 300px;
   width: 100%;
   background: white;
   position: fixed;
   z-index: 99;
   bottom: -300px;
   left: 0;
  }
  .toogle-address .toogle-address-title {
   height: 40px;
   line-height: 40px;
   font-size: 1.6rem;
   text-align: center
  }
  .icon-close {
   height: 25px;
   width: 25px;
   display: block;
   position: absolute;
   right: 10px;
   top: 5px;
   background: red;
   background-size: 15px 15px;
  }
  .address {
   width: 100%;
   position: relative;
   font-size: 1.4rem;
  }
  .address-header {
   height: 40px;
   line-height: 40px;
   border-bottom: 1px solid #eaeaea;
   padding: 0 10px;
  }
  .address-header .address-info {
   font-size: 1.4rem;
   float: left;
   padding: 0 5px;
  }
  .address-content {
   width: 100%;
   height: 320px;
   overflow: hidden;
  }
  .address-now {
   position: relative;
  }
  .address-now::after {
   position: absolute;
   content: "";
   left: 0;
   bottom: 0;
   background: #008aff;
   height: 2px;
   width: 100%;
  }
  .box-flex {
   display: -webkit-flex;
   display: -moz-flex;
   display: -ms-flex;
   display: flex
  }
  .flex {
   flex: 1;
   -webkit-flex: 1;
   -moz-flex: 1;
   ms-flex: 1
  }
  .address-cont {
   height: 320px;
   display: flex;
   display: -webkit-flex;
   display: -moz-flex;
   display: -ms-flex;
   width: 300%;
   overflow-y: scroll;
  }
  .provienc-part, .city-part, .county-part {
   height: 100%;
   width: 100%;
  }
  .provienc-part {

   /* background: red; */
  }
  .city-part {

   /* background: green; */
  }
  .county-part {

   /* background: yellow; */
  }
  .address-cont ul{
   padding: 0.5rem 1rem ;
  }
  .address-cont ul li {
   font-size: 1.4rem;
   padding: 0.5rem 0;
  }
  .linow {
   color: #008aff;
  }
  #city, #county {
   display: none;
  }
  /* address part */
  .section-address {
   margin-top: 50px;
  }
 </style>
</head>
<body class="">
<!-- public header start-->
<header class="public-header">
 <div class="public-header-content clearfixed">
  <a href="javascript:history.back()" rel="external nofollow" class="btn btn-back">
  </a>
  <h1>配送地址</h1>
 </div>
</header>
<!-- public header end-->
<!-- address start -->
<section class="section-address bg-eae pt-5">
 <form action='#' method="post" class="bg-fff">
  <div class="form-group box-flex clearfixed">
   <label class="form-label">收件人:</label>
   <input type="text" name="" class="input-flex" placeholder="请输入姓名">
  </div>
  <div class="form-group box-flex clearfixed">
   <label class="form-label">联系电话:</label>
   <input type="text" name="" class="input-flex" placeholder="请输入收件人电话">
  </div>
  <div class="form-group box-flex clearfixed">
   <label class="form-label">配送区域:</label>
   <div id="address" class="flex address"></div>
   <i class="icon icon-trangle"></i>
  </div>
 </form>
</section>
<!-- address end -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
 $("#address").on("click",function(){
  $("#address").selectaddress({
   "ajaxurl":"http://www.zxhuan.com/jsontext/addressjsonp.json",
   storagebox:$("#address"),
   callback:function(string){
    //执行回调
    console.log("选择的是:"+string);
   }
  });
 });
 (function($,window,document,undefined){
  $.fn.selectaddress=function(options){
   self.flag=false;//boolean,通过控制true or false, 防止恶意切换
   self.text=null;//回调时,用来储存选择到的地址数据
   this.default={
    "ajaxurl":"#",//ajax请求数据的地址
    "speed":300,//切换的速度
    storagebox:"",//在选择地址用,用来储存地址数据的盒子
    callback:function(){}
   }
   this.option=$.extend({},this.default,options);
   var arrtext="";//储存选择到的数据,添加到storagebox中
   var op=this.option;
   // 初始化入口
   this.init=function(){
    var self=this;
    this.createele();
    this.createprovince();
    // 点击关闭按钮的时候按钮的时候
    self.closebtn.on("click",function(){
     self.maskhidie();
    })
    self.ainfo.on("click",function(){
     var index=$(this).index();
     self.clickinfo($(this),index);
    });
    self.mask.on("click",function(event){
     if($(event.target).attr("id")=="toogle-mask"){
      self.maskhidie();
     }
    })
   }
   // 创建toogle-mask模块
   this.createele=function(){
    var self=this;
    self.mask=$('<div class="toogle-address-mask" id="toogle-mask"></div>');
    self.maskchild=$('<div class="toogle-address" id="togglecont"><div class="toogle-address-title border-b">请选择地址<i class="icon icon-close" id="closebtn"></i></div><div id="address" class="address"><div class="address-header"><span class="address-info address-now" id="provience">请选择</span><span class="address-info" id="city">请选择</span><span class="address-info" id="county">请选择</span></div><div class="address-content"><div class="address-cont"><ul class="provienc-part" data-create="createcity" data-index="1"></ul><ul class="city-part" data-create="createcounty" data-index="2"></ul><ul class="county-part" data-index="3"></ul></div></div></div></div>');
    $("body").append(self.mask);
    self.mask.append(self.maskchild);
    self.closebtn=$("#closebtn",self.mask);//关闭按钮
    self.tooglemask=$("#togglecont",self.mask);//选择地址的内容区
    self.ainfo=$(".address-info",self.mask);//选择省市区选项
    self.addresscont=$(".address-cont",self.mask);//三个地址列表包裹的层
    self.mask.animate({
     opacity:1
    },100,function(){
     self.maskchild.css({"bottom":'-300px'}).animate({
      "left":"0",
      "bottom":"0"
     },op.speed);
    })
   }
   // 创建省模块
   this.createprovince=function(){
    var self=this;
    self.addressajax(self.addresscont.find('.provienc-part'),null,1);
   }
   // 创建市模块
   this.createcity=function(datavalue){
    var self=this;
    self.mask.find("#city").show();
    self.addresscont.find('.city-part').empty();
    self.addressajax(self.addresscont.find('.city-part'),datavalue,2);
   }
   // 创建区域模块
   this.createcounty=function(datavalue){
    var self=this;
    self.mask.find("#county").show();
    self.addresscont.find('.county-part').empty();
    self.addressajax(self.addresscont.find('.county-part'),datavalue,3);
   }
   // 点击选择地址
   this.clickfn=function (district){
    var self=this;
    district.on('click',function(event){
     var _this=$(this);
     var parent=_this.parent();
     var datavalue=_this.data("value");
     var parentcreate=parent.data("create");
     var dataindex=parent.data("index");
     _this.parent().find('li').removeclass("linow");
     _this.addclass("linow");
     self.ainfo.eq(dataindex-1).html(_this.text());
     if(parentcreate=='createcity'){
      self.createcity(datavalue);
     }else if(parentcreate=="createcounty"){
      self.createcounty(datavalue);
     }
     if(dataindex==3){
      // 如果dataindex=3,说明选择的是区域,执行移除toogle-address模块
      self.maskhidie();
     }else{
      // 如果dataindex小于3,执行clickinfo
      self.clickinfo(self.ainfo.eq(dataindex),dataindex);
     }
    })
   }
   // 移除toogle-address模块
   this.maskhidie=function(){
    var self=this;
    self.tooglemask.animate({
     bottom:"-300px"
    },op.speed,function(){
     self.mask.animate({
      'opacity':0
     },200,function(){
      self.addressinput();
      if(op.callback&& typeof op.callback=="function"){
       // 执行回调函数
       op.callback(self.text);
      }
     })
    })
   }
   // 将数据存放到input表单中
   this.addressinput=function(){
    var self=this;
    var boxhtml="";
    var text="";
    for(var i=0;i<op.storagebox.find("span").length;i++){
     boxhtml+=op.storagebox.find("span").eq(i).text()+" ";
    }
    for(var i=0;i<$(".linow").length;i++){
     arrtext+="<span>"+$(".linow").eq(i).text()+"</span>";
     text+=$(".linow").eq(i).text()+" ";
    };
    // 如果arrtext不为空
    if(arrtext!=""){
     op.storagebox.html(arrtext);
     self.text=text;
    }else{
     self.text=boxhtml;
    }
    self.mask.remove();
   }
   this.clickinfo=function(ele,index){
    var self=this;
    self.flag=true;
    if(self.flag){
     self.flag=false;
     ele.addclass("address-now").siblings().removeclass("address-now");
     self.addresscont.animate({
      "margin-left":"-"+index*100+"%"
     },op.speed);
     self.flag=true;
    }
   }
   // 通过ajax请求数据
   this.addressajax = function(district, cvalue, ov,type) {
    var self=this;
    var otype = null;
    district.empty();
    $.ajax({
     url: this.option.ajaxurl,
     datatype: 'jsonp',//这里用的是jsonp,json的地址是http://www.zxhuan.com/jsontext/address.json
     async: false,
     data:"",
     jsonpcallback:"addressjonp",//如果上面用datatype:json,那么这里去掉
     success: function(data) {
      console.log(data);
      district.empty();
      if (ov == 3) {
       otype = data.county; //请求区的数据
      } else if (ov == 2) {
       otype = data.city; //请求市的数据
      } else if (ov == 1) {
       otype = data.provience; //请求省的数据
      }
      this.countyitem='';
      $.each(otype, function(key, value) {
       if (cvalue == null) {
        this.countyitem = $("<li data-value='" + value.id + "'>" + value.name + "</li>");
       } else if (cvalue == value.cid) {
        this.countyitem = $("<li data-value='" + value.id + "'>" + value.name + "</li>");
       }
       district.append(this.countyitem);
      });
      self.clickfn(district.find("li"));
     },
     error: function() {
      console.log('ajax error')
     }
    })
   }
   return this.init();
  }
 })(jquery,window,document);
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!