圖片.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、移動端原生觸摸事件

因?yàn)?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("結(jié)束");
    });
  //系統(tǒng)級事件打斷  比如 來電話 短信 才能觸發(fā)
    box.addEventListener("touchcancel",function(e){
        console.log("中斷");
    });

移動端調(diào)試（vconsole.min.js）

移動端zepto

(zepto：精簡的jQuery，專門用于移動端開發(fā)，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 地圖

一個用于創(chuàng)建移動端web應(yīng)用的的前端框架