首页
所有分类
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面向对象编程代码
Dec 19 Javascript
JavaScript 基础篇（一）
Mar 30 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
Angular 4依赖注入学习教程之组件服务注入（二）
Jun 04 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
vue监听用户输入和点击功能
Sep 27 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
KVM(1) persistedstate(1) vuex(1) HashSet集合(1) 本地化存储(1) Vue(10) click(1) 自定义组件(1) Storage(1) Set接口(1)
You might like
聊天室php&amp;mysql(六)
2006/10/09 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
PHP中list方法用法示例
2016/12/01 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
Prototype Template对象 学习
2009/07/19 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
js读取配置文件自写
2014/02/11 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
python实现自动登录后台管理系统
2018/10/18 Python
Python OpenCV之图片缩放的实现（cv2.resize）
2019/06/28 Python
python中对数据进行各种排序的方法
2019/07/02 Python
python基础教程之while循环
2019/08/14 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
Unineed旗下时尚轻奢网站：FABHunt
2019/05/13 全球购物
高级运动鞋：GREATS
2019/07/19 全球购物
Stührling手表官方网站：男女高品质时尚手表的领先零售商
2021/01/07 全球购物
聚美优品恶搞广告词
2014/03/14 职场文书
新党章的学习心得体会
2014/11/07 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
学校社团活动总结
2015/05/07 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL