首页
所有分类
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 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
ExtJS4 组件化编程，动态加载，面向对象，Direct
May 12 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
js实现打字小游戏
Dec 17 Javascript
vue实现计算器功能
Feb 22 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
mysql.user(1) offset(1) 锁(1) 逻辑架构(1) 性能优化(3) limit(1) 缓存(3) 事务(5) 内存(1) 策略(1)
You might like
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
PHP多线程类及用法实例
2014/12/03 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
JavaScript实现重置表单（reset）的方法
2015/04/02 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
python mysqldb连接数据库
2009/03/16 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
python3操作mysql数据库的方法
2017/06/23 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
Molton Brown美国官网：奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
自荐信要包含哪些内容
2013/11/06 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
投标诚信承诺书
2014/05/26 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL
Hive常用日期格式转换语法
2022/06/25 数据库