首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onApril 28, 2017

效果图：

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>

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

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

- Author -

longqd

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用JS写的一个TableView控件代码
Jan 23 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 #Javascript
d3.js入门教程之数据绑定详解
Apr 28 #Javascript
jQuery tip提示插件（实例分享）
Apr 28 #jQuery
JS实现动态添加DOM节点和事件的方法示例
Apr 28 #Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 #jQuery
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 #Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 #Javascript
tkFileDialog(1) T-SQL(1) SeaTunnel(1) ftpserver(1) 批处理(1) NFS(1) Logrotate(1) 黑名单(1) ElementTree(1) Odoo(1)
You might like
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
php中opendir函数用法实例
2014/11/15 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
完善的jquery处理机制
2016/02/21 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
详解webpack 打包文件体积过大解决方案（code splitting）
2018/04/10 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python之wxPython应用实例
2014/09/28 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
俄罗斯商务邀请函
2014/01/26 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
运动会加油稿100字
2014/09/19 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
单位接收函范文
2015/01/30 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
python实现剪贴板的操作
2021/07/01 Python