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)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...
随机推荐
- navigator.geolocation详解
https://blog.csdn.net/qq_27626333/article/details/51815467 PositionOptions: JSON对象,监听设备位置信息参数 naviga ...
- 接口测试（概念、Postman、SoapUI、jmeter）
一.什么是接口测试 接口测试是测试系统组件间接口的一种测试.接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点.测试的重点是要检查数据的交换,传递和控制管理过程,以及系统间的相互逻辑 ...
- 防范SQL注入
使用占位符的方式写查询语句hibernate
- golang基础之三-字符串，时间，流程控制，函数
strings和strconv的使用 strings strings.HasPrefix(s string,preffix string) bool:判断字符串s是否以prefix开头 stirngs ...
- 删除WP提示：自动升级WordPress失败
wordpress后台总有烦人的升级失败的提示,查了半天找不到怎么去掉:“自动升级WordPress失败--请再试一次”这个提示的方法,特意分享出来 方法/步骤 1 打开wordpress根目录找 ...
- Robot Framework Selenium学习博客
http://blog.csdn.net/tulituqi/article/details/21888059
- spring_150904_hibernatetemplate
实体类: package com.spring.model; import javax.persistence.Entity; import javax.persistence.Id; import ...
- Github 中提交项目到自己仓库的 gh-pages 分支
Github 中提交项目到自己仓库的gh-pages分支 cd cnblogs-theme/ git init git remote add origin git@github.com:hglibin ...
- AngularJS Intellisense in Visual Studio 2012
Recently, a lot of people have asked for Intellisense support for AngularJS in the Visual Studio HTM ...
- 洛谷P3812 【模板】线性基 [线性基]
题目传送门 线性基 题目描述 给定n个整数(数字可能重复),求在这些数中选取任意个,使得他们的异或和最大. 输入输出格式 输入格式: 第一行一个数n,表示元素个数 接下来一行n个数 输出格式: 仅一行 ...