圖片.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、移動(dòng)端原生觸摸事件
因?yàn)?click 有300ms的延遲（用于判斷是否是長(zhǎng)按），所以不建議在移動(dòng)端使用click
var box = document.querySelector(".box");
box.addEventListener("touchstart",function(e){
console.log("開始");
});
box.addEventListener("touchmove",function(e){
console.log("移動(dòng)");
});
box.addEventListener("touchend",function(e){
console.log("結(jié)束");
});
//系統(tǒng)級(jí)事件打斷 比如 來(lái)電話 短信 才能觸發(fā)
box.addEventListener("touchcancel",function(e){
console.log("中斷");
});
移動(dòng)端調(diào)試（vconsole.min.js）
移動(dòng)端zepto
(zepto：精簡(jiǎn)的jQuery，專門用于移動(dòng)端開發(fā)，9.6K大小叔汁，提供觸屏事件的封裝（單擊、長(zhǎng)恩、滑動(dòng)逗噩。掉丽。。）
$(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("長(zhǎng)摁")
}).on("swipe", function () {
console.log("滑動(dòng)");
})
})
baidu touch
touch.on(".box","tap",function(){
console.log("單擊");
});
touch.on(".box","hold",function(){
console.log("長(zhǎng)摁");
});
touch.on(".box","swipe",function(){
console.log("滑動(dòng)");
});
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 地圖
一個(gè)用于創(chuàng)建移動(dòng)端web應(yīng)用的的前端框架
