首页
所有分类
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 相关文章推荐
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）
Jul 11 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
小程序实现背景音乐播放和暂停
Jun 19 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
鸿蒙3.0(1) HarmonyOS(1) 鸿蒙(2) Debian(1) 华为(1) 虚拟键盘(1) RustDesk(1) 蓝牙(1) 蓝牙耳机(1) xhunter1.sys(1)
You might like
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
xmlplus组件设计系列之路由（ViewStack)（7）
2017/05/02 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
jQuery中的类名选择器（.class）用法简单示例
2018/05/14 jQuery
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
flask框架视图函数用法示例
2018/07/19 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
Python实现代码统计工具
2019/09/19 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
Python如何实现定时器功能
2020/05/28 Python
python接入支付宝的实例操作
2020/07/20 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
惠普美国官方商店：HP Official Store
2016/08/28 全球购物
小学教师的个人自我鉴定
2013/10/26 职场文书
陈欧广告词
2014/03/14 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
创先争优个人承诺书
2014/08/30 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL