首页
所有分类
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 相关文章推荐
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
探讨跨域请求资源的几种方式（总结）
Dec 02 Javascript
清除输入框内的空格
Dec 21 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
redux.js详解及基本使用
May 24 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
vue项目中微信登录的实现操作
Sep 08 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
数调机(1) 频率(1) ICF-7600(1) SONY(15) TOSHIBA(1) 东芝(1) 德劲(5) RP-F11(1) 手调机(1) 高放电路(1)
You might like
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
兰蔻俄罗斯官方网站：Lancome俄罗斯
2019/12/09 全球购物
党委书记个人对照检查材料
2014/09/15 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
护理医院见习报告
2014/11/03 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
预备党员的思想汇报，你真的会写吗？
2019/06/28 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
python scrapy简单模拟登录的代码分析
2021/07/21 Python
python实现学员管理系统(面向对象版)
2022/06/05 Python