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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们!
赞 (0)
相关推荐
-
JS实现很酷的EMAIL地址添加功能实例
本文实例讲述了JS实现很酷的EMAIL地址添加功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS实现很酷的EMAIL地址添加功能</title> <style type="text/css"> ul{ list-style:none; margin:0; padding:0;} li{ margin:0; padding:0;} #content{widt
-
JavaScript实现url地址自动检测并添加URL链接示例代码
背景:写一个简单的聊天系统,发出Htpp的Url实现跳转加上a标签. 实现代码: 复制代码 代码如下: String.prototype.httpHtml = function(){ var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g; return this.replace(reg, '<a target=_blank href="$1$2">$1$2</a>'); }; 摘录: URL地
-
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,"&
-
详解Vue基于 Nuxt.js 实现服务端渲染（SSR）
直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js 几小时后,一个基于 Vue.js 的服务端渲染应用框架应运而生,与 Next.js 异曲同工,这就是Nuxt.js 一.快速模板 在已经安装了 vue-cli 的前提下,可以快速创建一个 nuxt 的项目模板 vue init nuxt-commun
-
vue中利用iscroll.js解决pc端滚动问题
项目中经常遇到区域超出部分会出现滚动条,滚动条在pc端可以通过鼠标滚轮控制上下,在移动端可以通过鼠标拖动页面进行滚动,这两种场景都是符合用户习惯,然而这种滚动条一般都是竖[vertical]项滚动条,如果pc端出现横向滚动条[horizontal],在不做处理的情况下,你只能用鼠标拖动横向滚动条按钮[scrollerbar]展示滚动区域,而且为了美观,一般滚动条会进行样式编写或者隐藏,那么横向区域默认情况下就没法滚动. 二.描述 现为了解决pc端滚动区域能像移动端一样,能够通过鼠标拖动滚动区域直
-
基于JS实现移动端左滑删除功能
废话不多说了,直接给大家贴代码了,具体代码如下所示: <div class="wrap pay-wrap" id="lists"> @foreach (var item in Model) { <div class="pay-list" style="height:90px;margin: 10px 15px 10px 15px;" id="@item.UID"> <div c
-
js判断移动端是否安装某款app的多种方法
本文实例讲解了js判断移动端是否安装某款app的多种方法,分享给大家供大家参考,具体内容如下 第一种方法: 一:判断是那种设备 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 二:安卓设备:原理:判断是否认识这个协议,认识则直接跳转,不认识
-
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,以下实现思路经过小编测试过,放心使用. 1.效果图 PC端访问显示: 移动端访问显示: 2.实现: 不考虑移动端搜索引擎优化的话,只需要通过JS判断是否移动端,然后确定是否跳转到指定页面就行了,主要JS如下: //判断是否移动端,如果是则跳转到指定的URL地址 function browserRedirect(url) { //只读的字符串,
-
easyui-edatagrid.js实现回车键结束编辑功能的实例
easyui的可编辑表格并不具备回车事件.这让edatagrid在结束编辑时的操作很麻烦,除非你点击其他行,或者点出表格否则不会取消编辑行. 为了让结束编辑操作更简单些,我为每个单元格添加了回车事件,当回车时结束本行编辑,具体做法是重写edatagrid的onDblClickCell事件,如下: onDblClickCell : function(index, field, value) { if (opts.editing) { $(this).edatagrid('editRow', ind
-
js实现移动端导航点击自动滑动效果
本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码,供大家参考,具体内容如下 移动端模拟导航可点击自动滑动 0.1.4. 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js]. 废话不多说直接上代码: /* * 移动端模拟导航可点击自动滑动 0.1.4 * Date: 2017-01-11 * by: xiewei * 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js] */ (function ($) { $.
-
基于JS实现web端录音与播放功能
纯js实现web端录音功能,功能并不是特别多,逐步增加中,详细地址:github. getUserMedia在非localhost和127的情况下,需要开启https,由于腾讯云的没备案,demo就不放了,可以自行获取代码并启动测试. 实现方式 实现原理的话,主要是以下三点, 利用webrtc的getUserMedia方法获取设备音频输入,使用audioprocess得到音频流(pcm流,范围-1到1). 转码,利用前端中的ArrayBuffer等二进制操作按采样位数处理流信息. 使用decod
-
使用JS判断移动端手机横竖屏状态
禁用用户自动缩放功能: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 判断横竖屏状态有两种方法:css判断.js判断 (一).css判断横屏还是竖屏 1.写在同一个css文件中 @media screen and (orientation: portrait) { /*竖屏 css*/ }