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
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持凡科!
|
