插件扩展

图片.png

1.grunp gulp 2.zepto 3.baidu touch 4.jQuery mobile 5.swiper 6.地图 7.SASS|LESS 8.bootstrap 9.echarts|D3 10.datapicker
http://www.jeasyui.net/
http://www.treejs.cn/v3/main.php#_zTreeInfo

1、移动端原生触摸事件

因为 click 有300ms的延迟（用于判断是否是长按），所以不建议在移动端使用click

    var box = document.querySelector(".box");
    box.addEventListener("touchstart",function(e){
        console.log("开始");
    });
    box.addEventListener("touchmove",function(e){
        console.log("移动");
    });
    box.addEventListener("touchend",function(e){
        console.log("结束");
    });
  //系统级事件打断  比如 来电话 短信 才能触发
    box.addEventListener("touchcancel",function(e){
        console.log("中断");
    });

移动端调试（vconsole.min.js）

移动端zepto

(zepto：精简的jQuery，专门用于移动端开发，9.6K大小，提供触屏事件的封装（单击、长恩、滑动。。。）

    $(function () {
        console.log($(".box").html());//fhid
        console.log($.camelCase("hello-world"));//helloWorld
        console.log($.contains(document.querySelector(".box"), document.querySelector("span")))
        console.log($.contains($(".box")[0], $("span")[0]))//true

        var arr = $.grep([1, 2, 3], function (i) {
            return i > 2;
        })
        console.log(arr);//[3]

        $(".box").on("tap", function () {
            console.log("单击")
        }).on("longTap", function () {
            console.log("长摁")
        }).on("swipe", function () {
            console.log("滑动");
        })
    })

baidu touch

   touch.on(".box","tap",function(){
        console.log("单击");
    });
    touch.on(".box","hold",function(){
        console.log("长摁");
    });
    touch.on(".box","swipe",function(){
        console.log("滑动");
    });

    var angle = 0;
    var box =  document.querySelector(".box")
    touch.on(".box","touchstart",function(ev){
        ev.startRotate();
        // ev.preventDefault();
        return false;
    });
    touch.on(".box","rotate",function(e){
        console.log(e);
        var ta = angle + e.rotation;
        if(e.fingerStatus === "end"){
            angle+=e.rotation;
        }
        box.style.transform = "rotate("+ta+"deg)";
        // box.style.transform = "rotate($)"
    });

jQuery Mobile，swiper 地图

一个用于创建移动端web应用的的前端框架