Picker.js Source

/** * Larea Mobile City Select control * * version:1.7.2 * * Author: Huang Lei * * Git:https://github.com/xfhxbb/larea * * Copyright * * L icensed under MIT * * recently modified by: 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 (' ERROR hint: No such data source type ');            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 >= && xhr.status <) | | xhr.status = =                        0) {var responsedata = Json.parse (Xhr.responsetext);                        _self.data = Responsedata.data;                    if (callback) {callback ()};            }} xhr.send ();            }}, Bindevent:function () {var _self = this;                Outgoing plug-in 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=" is                    A_btn Larea_cancel "> Cancel </div> ' + ' <div class=" area_btn larea_finish "> OK </div> ' + ' </div> ' + ' <div class= ' area_roll_mask ' > ' + ' <div cl ass= "Area_roll" > ' + ' <div> ' + ' <div class= "gear area_province" Data-area Type= "Area_province" ></div> ' + ' <div class= "Area_grid" > ' + ' </div& gt; ' + ' </div> ' + ' <div> ' + ' <div class= ' gear area                    _city "data-areatype=" area_city "></div> ' + ' <div class=" Area_grid "> ' + ' </div> ' + ' </div> ' + ' <div> ' + ' <div clas s= "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); }//Initialize plug-in default value 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                }}//Touch start function Geartouchstart (e) {e.preventdefault ();                var target = E.target; while (true) {if (!target.classlist.contains ("gear")) {target = Target.parente                    lement; } else {break}} clearinterval (target["Int_" + t                Arget.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 ';                }//Finger move function Geartouchmove (e) {e.preventdefault ();                var target = E.target; while (true) {if (!target.classlist.contains ("gear")) {target = Target.parente                    lement; } 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);            };                }//Leave the screen function Geartouchend (e) {e.preventdefault ();                var target = E.target; while (true) {if (!target.classlist.contains ("gear")) {target = Target.parente                    lement;                    } 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);                }//Easing effect function Rollgear (target) {var d = 0;                var stopgear = false; function Setduration () {target.style.webkitTransitionDuration = Target.style.transitionDuration = ' 200                    Ms ';                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);           } Controls the value of the plug-in scrolling after the 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 = Nextd                                    Ata[i];                                 Break                       }      };                        _self.index=2;                             _self.setgeartooth (Childdata);                     Break }}} _self.getdata (function () {_self.trigger.addeven            Tlistener (' click ', Popuparea);        });            },//Reset node number 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 Source