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)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...
随机推荐
- POJ 2349 Arctic Network(最小生成树+求第k大边)
题目链接:http://poj.org/problem?id=2349 题目大意:有n个前哨,和s个卫星通讯装置,任何两个装了卫星通讯装置的前哨都可以通过卫星进行通信,而不管他们的位置. 否则,只有两 ...
- Linux 基础——权限管理命令chown、chgrp
一.chown命令与chgrp命令的作用 有时你需要改变文件或目录的属主,比如有人离职或开发人员创建了一个在测试或生产环境中需要归属在系统账户下的应用.Linux提供了两个命令来实现这个功能:chow ...
- email的传输协议与格式（资源链接）
以下链接为转载. 传输协议: 发:SMTP 收:POP3, IMAP 格式: MIME
- 【WPF】奇怪的INotifyPropertyChanged的实现
MSDN是这样解释的: INotifyPropertyChanged 接口用于向客户端(通常是执行绑定的客户端)发出某一属性值已更改的通知. 例如,考虑一个带有名为 FirstName 属性的 Per ...
- anaconda-anaconda无法安装pydot？
只需先安装graphviz,再安装pydot就可以了 sudo conda install graphviz sudo conda install pydot
- 《java虚拟机》----类加载机制
No1: 实现语言无关性的基础仍然是虚拟机和字节码存储格式,虚拟机只与Class文件这种特定的二进制文件格式所关联,并不关心Class的来源是何种语言. No2: Class文件是一组以8位字节为基础 ...
- ApplicationContext中getBean详解
在org.springframework.context包中有一个接口叫 applicationContext applicationContext中有一个getBean方法,此方法继承之BeanFa ...
- Mybatis源码分析之结果集处理
解析封装 ResultMap 是和结果集相关的东西,最初在解析 XML 的时候,于 parseStatementNode 方法中,针对每一个 select 节点进行解析,转换为 MappedState ...
- 关于urllib、urllib2爬虫伪装的总结
站在网站管理的角度,如果在同一时间段,大家全部利用爬虫程序对自己的网站进行爬取操作,那么这网站服务器能不能承受这种负荷?肯定不能啊,如果严重超负荷则会时服务器宕机(死机)的,对于一些商业型的网站,宕机 ...
- BeautifulSoup解析库
解析库 解析器 使用方法 优势 劣势 Python标准库 BeautifulSoup(html, 'html.parser') 速度适中,容错能力强 老版本python容错能力差 lxml HTML解 ...