小程序业务上线通知_js完成移动端修改添加地点

2021-01-12 11:42| 发布者: | 查看: |

js实现移动端编辑添加地址【模仿京东】       本篇文章主要介绍了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
 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;

!-- Address end -- script src="jquery/2.0.0/jquery.js" type="text/javascript" /script script type="text/javascript" $("#address").on("click",function(){ $("#address").selectAddress({ "ajaxURL":"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 id="toogle-mask" /div self.maskChild=$(' div id="toggleCont" div 请选择地址 i id="closeBtn" /i /div div id="address" div span id="provience" 请选择 /span span id="city" 请选择 /span span id="county" 请选择 /span /div div div ul data-create="createCity" data-index="1" /ul ul data-create="createCounty" data-index="2" /ul ul 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=$(".",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"); (_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!=""){ (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的地址是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

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


<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部