picker.js源码
/**
* LArea移动端城市选择控件
*
* version:1.7.2
*
* author:黄磊
*
* git:https://github.com/xfhxbb/LArea
*
* Copyright 2016
*
* Licensed under MIT
*
* 最近修改于： 2016-6-12 16:47:41
*/
window.LArea = (function() {
var MobileArea = function() {
this.gearArea;
this.data;
this.index = 0;
this.value = [0, 0, 0];
}
MobileArea.prototype = {
init: function(params) {
this.params = params;
this.trigger = document.querySelector(params.trigger);
if(params.valueTo){
this.valueTo=document.querySelector(params.valueTo);
}
this.keys = params.keys;
this.type = params.type||1;
switch (this.type) {
case 1:
case 2:
break;
default:
throw new Error('错误提示: 没有这种数据源类型');
break;
}
this.bindEvent();
},
getData: function(callback) {
var _self = this;
if (typeof _self.params.data == "object") {
_self.data = _self.params.data;
callback();
} else {
var xhr = new XMLHttpRequest();
xhr.open('get', _self.params.data);
xhr.onload = function(e) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 0) {
var responseData = JSON.parse(xhr.responseText);
_self.data = responseData.data;
if (callback) {
callback()
};
}
}
xhr.send();
}
},
bindEvent: function() {
var _self = this;
//呼出插件
function popupArea(e) {
_self.gearArea = document.createElement("div");
_self.gearArea.className = "gearArea";
_self.gearArea.innerHTML = '<div class="area_ctrl slideInUp">' +
'<div class="area_btn_box">' +
'<div class="area_btn larea_cancel">取消</div>' +
'<div class="area_btn larea_finish">确定</div>' +
'</div>' +
'<div class="area_roll_mask">' +
'<div class="area_roll">' +
'<div>' +
'<div class="gear area_province" data-areatype="area_province"></div>' +
'<div class="area_grid">' +
'</div>' +
'</div>' +
'<div>' +
'<div class="gear area_city" data-areatype="area_city"></div>' +
'<div class="area_grid">' +
'</div>' +
'</div>' +
'<div>' +
'<div class="gear area_county" data-areatype="area_county"></div>' +
'<div class="area_grid">' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
document.body.appendChild(_self.gearArea);
areaCtrlInit();
var larea_cancel = _self.gearArea.querySelector(".larea_cancel");
larea_cancel.addEventListener('touchstart', function(e) {
_self.close(e);
});
var larea_finish = _self.gearArea.querySelector(".larea_finish");
larea_finish.addEventListener('touchstart', function(e) {
_self.finish(e);
});
var area_province = _self.gearArea.querySelector(".area_province");
var area_city = _self.gearArea.querySelector(".area_city");
var area_county = _self.gearArea.querySelector(".area_county");
area_province.addEventListener('touchstart', gearTouchStart);
area_city.addEventListener('touchstart', gearTouchStart);
area_county.addEventListener('touchstart', gearTouchStart);
area_province.addEventListener('touchmove', gearTouchMove);
area_city.addEventListener('touchmove', gearTouchMove);
area_county.addEventListener('touchmove', gearTouchMove);
area_province.addEventListener('touchend', gearTouchEnd);
area_city.addEventListener('touchend', gearTouchEnd);
area_county.addEventListener('touchend', gearTouchEnd);
}
//初始化插件默认值
function areaCtrlInit() {
_self.gearArea.querySelector(".area_province").setAttribute("val", _self.value[0]);
_self.gearArea.querySelector(".area_city").setAttribute("val", _self.value[1]);
_self.gearArea.querySelector(".area_county").setAttribute("val", _self.value[2]); switch (_self.type) {
case 1:
_self.setGearTooth(_self.data);
break;
case 2:
_self.setGearTooth(_self.data[0]);
break;
}
}
//触摸开始
function gearTouchStart(e) {
e.preventDefault();
var target = e.target;
while (true) {
if (!target.classList.contains("gear")) {
target = target.parentElement;
} else {
break
}
}
clearInterval(target["int_" + target.id]);
target["old_" + target.id] = e.targetTouches[0].screenY;
target["o_t_" + target.id] = (new Date()).getTime();
var top = target.getAttribute('top');
if (top) {
target["o_d_" + target.id] = parseFloat(top.replace(/em/g, ""));
} else {
target["o_d_" + target.id] = 0;
}
target.style.webkitTransitionDuration = target.style.transitionDuration = '0ms';
}
//手指移动
function gearTouchMove(e) {
e.preventDefault();
var target = e.target;
while (true) {
if (!target.classList.contains("gear")) {
target = target.parentElement;
} else {
break
}
}
target["new_" + target.id] = e.targetTouches[0].screenY;
target["n_t_" + target.id] = (new Date()).getTime();
var f = (target["new_" + target.id] - target["old_" + target.id]) * 30 / window.innerHeight;
target["pos_" + target.id] = target["o_d_" + target.id] + f;
target.style["-webkit-transform"] = 'translate3d(0,' + target["pos_" + target.id] + 'em,0)';
target.setAttribute('top', target["pos_" + target.id] + 'em');
if(e.targetTouches[0].screenY<1){
gearTouchEnd(e);
};
}
//离开屏幕
function gearTouchEnd(e) {
e.preventDefault();
var target = e.target;
while (true) {
if (!target.classList.contains("gear")) {
target = target.parentElement;
} else {
break;
}
}
var flag = (target["new_" + target.id] - target["old_" + target.id]) / (target["n_t_" + target.id] - target["o_t_" + target.id]);
if (Math.abs(flag) <= 0.2) {
target["spd_" + target.id] = (flag < 0 ? -0.08 : 0.08);
} else {
if (Math.abs(flag) <= 0.5) {
target["spd_" + target.id] = (flag < 0 ? -0.16 : 0.16);
} else {
target["spd_" + target.id] = flag / 2;
}
}
if (!target["pos_" + target.id]) {
target["pos_" + target.id] = 0;
}
rollGear(target);
}
//缓动效果
function rollGear(target) {
var d = 0;
var stopGear = false;
function setDuration() {
target.style.webkitTransitionDuration = target.style.transitionDuration = '200ms';
stopGear = true;
}
clearInterval(target["int_" + target.id]);
target["int_" + target.id] = setInterval(function() {
var pos = target["pos_" + target.id];
var speed = target["spd_" + target.id] * Math.exp(-0.03 * d);
pos += speed;
if (Math.abs(speed) > 0.1) {} else {
var b = Math.round(pos / 2) * 2;
pos = b;
setDuration();
}
if (pos > 0) {
pos = 0;
setDuration();
}
var minTop = -(target.dataset.len - 1) * 2;
if (pos < minTop) {
pos = minTop;
setDuration();
}
if (stopGear) {
var gearVal = Math.abs(pos) / 2;
setGear(target, gearVal);
clearInterval(target["int_" + target.id]);
}
target["pos_" + target.id] = pos;
target.style["-webkit-transform"] = 'translate3d(0,' + pos + 'em,0)';
target.setAttribute('top', pos + 'em');
d++;
}, 30);
}
//控制插件滚动后停留的值
function setGear(target, val) {
val = Math.round(val);
target.setAttribute("val", val);
switch (_self.type) {
case 1:
_self.setGearTooth(_self.data);
break;
case 2:
switch(target.dataset['areatype']){
case 'area_province':
_self.setGearTooth(_self.data[0]);
break;
case 'area_city':
var ref = target.childNodes[val].getAttribute('ref');
var childData=[];
var nextData= _self.data[2];
for (var i in nextData) {
if(i==ref){
childData = nextData[i];
break;
}
};
_self.index=2;
_self.setGearTooth(childData);
break;
}
} }
_self.getData(function() {
_self.trigger.addEventListener('click', popupArea);
});
},
//重置节点个数
setGearTooth: function(data) {
var _self = this;
var item = data || [];
var l = item.length;
var gearChild = _self.gearArea.querySelectorAll(".gear");
var gearVal = gearChild[_self.index].getAttribute('val');
var maxVal = l - 1;
if (gearVal > maxVal) {
gearVal = maxVal;
}
gearChild[_self.index].setAttribute('data-len', l);
if (l > 0) {
var id = item[gearVal][this.keys['id']];
var childData;
switch (_self.type) {
case 1:
childData = item[gearVal].child
break;
case 2:
var nextData= _self.data[_self.index+1]
for (var i in nextData) {
if(i==id){
childData = nextData[i];
break;
}
};
break;
}
var itemStr = "";
for (var i = 0; i < l; i++) {
itemStr += "<div class='tooth' ref='" + item[i][this.keys['id']] + "'>" + item[i][this.keys['name']] + "</div>";
}
gearChild[_self.index].innerHTML = itemStr;
gearChild[_self.index].style["-webkit-transform"] = 'translate3d(0,' + (-gearVal * 2) + 'em,0)';
gearChild[_self.index].setAttribute('top', -gearVal * 2 + 'em');
gearChild[_self.index].setAttribute('val', gearVal);
_self.index++;
if (_self.index > 2) {
_self.index = 0;
return;
}
_self.setGearTooth(childData);
} else {
gearChild[_self.index].innerHTML = "<div class='tooth'></div>";
gearChild[_self.index].setAttribute('val', 0);
if(_self.index==1){
gearChild[2].innerHTML = "<div class='tooth'></div>";
gearChild[2].setAttribute('val', 0);
}
_self.index = 0;
}
},
finish: function(e) {
var _self = this;
var area_province = _self.gearArea.querySelector(".area_province");
var area_city = _self.gearArea.querySelector(".area_city");
var area_county = _self.gearArea.querySelector(".area_county");
var provinceVal = parseInt(area_province.getAttribute("val"));
var provinceText = area_province.childNodes[provinceVal].textContent;
var provinceCode = area_province.childNodes[provinceVal].getAttribute('ref');
var cityVal = parseInt(area_city.getAttribute("val"));
var cityText = area_city.childNodes[cityVal].textContent;
var cityCode = area_city.childNodes[cityVal].getAttribute('ref');
var countyVal = parseInt(area_county.getAttribute("val"));
var countyText = area_county.childNodes[countyVal].textContent;
var countyCode = area_county.childNodes[countyVal].getAttribute('ref');
_self.trigger.value = provinceText + ((cityText)?(',' + cityText):(''))+ ((countyText)?(',' + countyText):(''));
_self.value = [provinceVal, cityVal, countyVal];
if(this.valueTo){
this.valueTo.value= provinceCode +((cityCode)?(',' + cityCode):('')) + ((countyCode)?(',' + countyCode):(''));
}
_self.close(e);
},
close: function(e) {
e.preventDefault();
var _self = this;
var evt = new CustomEvent('input');
_self.trigger.dispatchEvent(evt);
document.body.removeChild(_self.gearArea);
_self.gearArea=null;
}
}
return MobileArea;
})()
picker.js源码的更多相关文章
- MVVM大比拼之avalon.js源码精析
简介 avalon是国内 司徒正美 写的MVVM框架,相比同类框架它的特点是: 使用 observe 模式,性能高. 将原始对象用object.defineProperty重写,不需要用户像用knoc ...
- 深入理解unslider.js源码
最近用到了一个挺好用的幻灯片插件,叫做unslider.js,就想看看怎么实现幻灯片功能,就看看源码,顺便自己也学习学习.看完之后收获很多,这里和大家分享一下. unslider.js 源码和使用教程 ...
- Jquery.cookie.js 源码和使用方法
jquery.cookie.js源码和使用方法 jQuery操作cookie的插件,大概的使用方法如下 $.cookie(‘the_cookie’); //读取Cookie值$.cookie(’the ...
- MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
返回目录 说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都 ...
- basket.js 源码分析
basket.js 源码分析 一.前言 basket.js 可以用来加载js脚本并且保存到 LocalStorage 上,使我们可以更加精准地控制缓存,即使是在 http 缓存过期之后也可以使用.因此 ...
- underscore.js 源码
underscore.js 源码 underscore]JavaScript 中如何判断两个元素是否 "相同" Why underscore 最近开始看 underscore.js ...
- 国籍控件（js源码）
国籍控件(js源码) 一直苦于没有好的国籍控件可以用,于是抽空写了一个国籍控件,现分享给大家. 主要功能和界面介绍 国籍控件主要支持中文.英文过滤以及键盘上下事件. 源码介绍 国籍控件核心是两个文件, ...
- vue.js源码精析
MVVM大比拼之vue.js源码精析 VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多 ...
- 从template到DOM(Vue.js源码角度看内部运行机制)
写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...
随机推荐
- 部署weblogic 12c的几点收获
最近刚编写完weblogic12c的部署脚本,这里将过程中的几点收获进行记录: 1.windows下编写的脚本在linux环境下运行需要dos2unix进行格式转换 2.weblogic安装环境检测需 ...
- hdu 5912(迭代+gcd)
Fraction Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Su ...
- hdu 5001(概率DP)
Walk Time Limit: 30000/15000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Subm ...
- ORA-**,oracle 12c操作问题
https://blog.csdn.net/typa01_kk/article/details/41924321
- IEEEXtreme 10.0 - Mancala'h
这是 meelo 原创的 IEEEXtreme极限编程大赛题解 Xtreme 10.0 - Mancala'h 题目来源 第10届IEEE极限编程大赛 https://www.hackerrank.c ...
- sin()函数的实现
计算如下公式,并输出结果: 其中r.s的值由键盘输入.sin x的近似值按如下公式计算,计算精度为10-10: 程序说明: #include <math.h>和#include<cm ...
- 谷歌翻译python接口
项目地址: https://github.com/ssut/py-googletrans 安装: sudo pip install googletrans 使用: #!/usr/bin/python ...
- javascript 原生得到document.Element的方法
今天这里写这个博客的主要目的是记录一下javascript原生的选择dom的集中方法. 1.document.getElementById.这个方法接收1个参数,就是DOM元素的id(区分大小写),这 ...
- POJ poj 2155 Matrix
题目链接[http://poj.org/problem?id=2155] /* poj 2155 Matrix 题意:矩阵加减,单点求和 二维线段树,矩阵加减,单点求和. */ using names ...
- input限制中文字数
我们知道input控件有一个maxlength属性可以控制输入字符的长度,但是,它并不会识别是汉字还是其他符号,所以输入maxlength个汉字显然是不符合要求的. 为了实现对带有汉字的输入框长度控制 ...