JS三教九流系列-Zepto.js-爲移動端開發的類庫

時間 2019-11-07

標籤三教九流系列 zepto.js zepto 移動開發欄目 JavaScript 简体版

原文原文鏈接

zepto.js的api地址 http://www.css88.com/doc/zeptojs_api/ javascript

類庫源碼下載http://www.zeptojs.cn/ 滾動當前頁面，看到這部分點擊下載css

和使用jquery同樣，咱們只要html頁面引入便可。
zepto的api與jq幾乎同樣，同時各個接口名字也是同樣的，咱們只要按着寫jq同樣去寫zepto就行了，既然這樣，咱們爲什麼要用zepto，主要就是zepto提供時觸摸事件，爲開發移動端的更好處理。html

jq是爲多個瀏覽器支持的類庫，並無封裝上touch事件，若是咱們的項目是pc或者雖然是移動端，可是沒有不少觸摸事件的效果，咱們選擇jq便可，咱們能夠看出，咱們採用zepto的時候
java

手機項目的開發，須要觸摸事件。jquery

zepto的支持是高級瀏覽器，ie10以上。css3

1.zepto.js的helloworld輸出web

咱們學習以前，須要保證對jq有很熟練的使用技巧，咱們使用zepto，基本的調用以下api

<!DOCTYPE html>
<html>
<head>
<title>demo1</title>

</head>
<body>
   zepto.js
</body>
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript">
// 當頁面ready的時候，執行回調:
Zepto(function($){
  alert('helloworld!')
});
</script>
</html>

zeopt的代碼咱們是放在瀏覽器

Zepto(function($){app

//code

});

的內部，對比jq，不過是把$換成Zepto了。

2.zepto.js的基本使用

咱們獲取div的內容，點擊修改按鈕，修改div內容，代碼以下

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>demo1</title>

</head>
<body>
   <div class="con">zepto.js
   </div>
   <span class="edit">修改</span>
</body>
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript">
// 當頁面ready的時候，執行回調:
Zepto(function($){
  $(".edit").click(function(){
  	$(".con").html("我被修改了！");
  });
});
</script>
</html>

很完美，不過咱們監聽事件，同時zepto推薦的而是經過on的處理，咱們使用on處理，代碼以下

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>demo1</title>

</head>
<body>
   <div class="con">zepto.js
   </div>
   <span class="edit">修改</span>
</body>
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript">
// 當頁面ready的時候，執行回調:
Zepto(function($){
  $(".edit").on("click",function(){
  	$(".con").html("我被修改了！");
  });
});
</script>
</html>

使用被推薦的寫法，纔會減小問題的出現。經過這段的測試，咱們知道zepto的使用jq幾乎同樣的

3.zepto.js的觸摸事件使用

這纔是咱們會選擇zepto而不使用jq的緣由，就是使用它提供好的touch模塊，咱們先了解這些接口

「touch」模塊添加如下事件，

tap —元素tap的時候觸發。

singleTap and doubleTap — 這一對事件能夠用來檢測元素上的單擊和雙擊。(若是你不須要檢測單擊、雙擊，使用 tap 代替)。

longTap — 當一個元素被按住超過750ms觸發。

swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 當元素被劃過期觸發。(可選擇給定的方向)

咱們給元素添加事件處理，看看每一個觸摸事件區別，代碼以下（須要引用zepto類庫）

<!DOCTYPE html>
<html>
<head>
<title>iPhone.Zepto</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<script src="zepto.min.js"></script>
<style type="text/css">
*{ margin: 0; padding: 0;}
ul{ list-style: none;}
.touch{ width:300px; margin:20px; background:#C96; border-radius:8px; height:40px; line-height:40px; text-align:center;}
</style>
</head>
<body>
<div class="touch touch1">點擊一下觸發tap</div>
<div class="touch touch2">點擊時間超過750ms觸發longTap</div>
<div class="touch touch3">滑動一下觸發swipe</div>
<div class="touch touch4">向左滑動觸發swipeLeft</div>
<div class="touch touch5">向右滑動觸發swipeRight</div>
<div class="touch touch6">向上滑動觸發swipeUp</div>
<div class="touch touch7">向下滑動觸發swipeDown</div>
</body>
<script type="text/javascript">
Zepto(function($){
  
 $(".touch1").tap(function(){
  alert($(this).html())
 });
 $(".touch2").longTap(function(){
  alert($(this).html())
 });
 $(".touch3").swipe(function(){
  alert($(this).html())
 });
 $(".touch4").swipeLeft(function(){
  alert($(this).html())
 });
 $(".touch5").swipeRight(function(){
  alert($(this).html())
 });
 $(".touch6").swipeUp(function(){
  alert($(this).html())
 });
 $(".touch7").swipeDown(function(){
  alert($(this).html())
 });
 
 
}); 
</script>
</html>
<!--
//點擊事件
 $("#rr").on('click', function(e){
  var tempdeg=$("#aa").css('transform');
  tempdeg=tempdeg.split('deg')[0].split('(')[1];
  $("#aa").css('transform','rotate('+parseInt(tempdeg-90)+'deg)');
  $("#aa").children('a').css('transform','rotate('+parseInt(-(tempdeg-90))+'deg)');
 });-->

其餘的事件我就不介紹了，jq咱們都已經瞭解到了，咱們利用zepto提供的觸摸事件，作一些移動端網頁經常使用的效果；

4.zepto.js利用觸摸事件開發實例

實例1：具備滑動事件的tab切換

咱們瞭解到額tab切換，是在點擊選項內容是，切換下面的內容，在這種功能的基礎上，咱們對內容區進行向左滑動，和向右滑動，也能夠切換內容區，而且選項卡自動獲取焦點，zepto的tab切換代碼以下：

<!DOCTYPE html>
<html>
<head>
<title>iPhone.Zepto</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<script src="zepto.min.js"></script>
<style type="text/css">
*{ margin: 0; padding: 0;}
ul{ list-style: none;}
/*demo*/
.tab1{height:400px; width:400px;}
.tabnav{height:50px; line-height:50px;}
.tabnav span{ cursor:pointer; margin:0 10px;}
.tabnav .fou{ color:#36F;}
.tabbox{height:350px; background:#FCC;}
</style>
</head>
<body>
<div class="tab1">
    <div class="tabnav">
        <span class="fou">111</span>
        <span>222</span>
        <span>333</span>
    </div>
    <div class="tabbox">
        <div>111111</div>
        <div style="display:none;">22222222222</div>
        <div style="display:none;">33333333</div>
    </div>
</div>
</body>
<script type="text/javascript">
Zepto(function($){
  
 $(".tab1").find(".tabnav").children().click(function(){
   $(".tab1").find(".tabbox").children().eq($(this).index()).show().siblings().hide();
   $(this).addClass("fou").siblings().removeClass("fou");
 });
 
 
}); 
</script>
</html>

這是最基本的tab切換，咱們還要對內容區添加觸摸事件，進行滑動切換的操做，代碼以下

<!DOCTYPE html>
<html>
<head>
<title>iPhone.Zepto</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<script src="zepto.min.js"></script>
<style type="text/css">
*{ margin: 0; padding: 0;}
ul{ list-style: none;}
/*demo*/
.tab1{height:400px; width:300px;}
.tabnav{height:50px; line-height:50px;}
.tabnav span{ cursor:pointer; margin:0 10px;}
.tabnav .fou{ color:#36F;}
.tabbox{height:350px;}
.tabbox div{ height:350px; background:#FCC;}
</style>
</head>
<body>
<div class="tab1">
    <div class="tabnav">
        <span class="fou">111</span>
        <span>222</span>
        <span>333</span>
    </div>
    <div class="tabbox">
        <div>111111</div>
        <div style="display:none;">22222222222</div>
        <div style="display:none;">33333333</div>
    </div>
</div>
</body>
<script type="text/javascript">
Zepto(function($){
 
 var index=0; 
 $(".tab1").find(".tabnav").children().click(function(){
   $(".tab1").find(".tabbox").children().eq($(this).index()).show().siblings().hide();
   $(this).addClass("fou").siblings().removeClass("fou");
   index=$(this).index();
 });
 var len=$(".tab1").find(".tabnav").children().length-1;
 $(".tab1").find(".tabbox").children().swipeLeft(function(){    
  if(index>=len){
   index=0;
  }else{
   index=index+1; 
  };
  $(".tab1").find(".tabbox").children().eq(index).show().siblings().hide();
  $(".tab1").find(".tabnav").children().eq(index).addClass("fou").siblings().removeClass("fou");
  
 });
 $(".tab1").find(".tabbox").children().swipeRight(function(){
  if(index<=0){
   index=len;
  }else{
   index=index-1; 
  };
  $(".tab1").find(".tabbox").children().eq(index).show().siblings().hide();
  $(".tab1").find(".tabnav").children().eq(index).addClass("fou").siblings().removeClass("fou");  
 });
 
}); 
</script>
</html>

實例2：結合css3的變換旋轉，作圓形導航

咱們見過這樣的導航，一個圓形，按着指定的角度排列分開，截圖以下

點擊圓圈內容能夠連接到新頁面，單擊中間的圓形區域，根據手勢左右，進行轉盤切換

點擊左右按鈕，也能夠進行轉盤切換

示例代碼以下：

<!DOCTYPE html>
<html>
<head>
<title>iPhone.Zepto</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<script src="zepto.min.js"></script>
</head>
<body>
<nav style="position:relative; height:100px;">
    <div id="aa" style=" width:200px; height:200px; margin-left:-100px; background:#06C; position:absolute; top:-100px;; left:50%;
        transform-origin:center center;transition:all .3s linear 0s;transform:rotate(0deg); border-radius:100px;">
        <a style=" position:absolute; width:50px; height:50px; background:#9C0;border-radius:25px; margin-left:-25px;left:100px; top:-25px; text-align:center; line-height:50px;transition:all .3s linear 0s; transform-origin:center center;transform:rotate(0deg);">11</a>
        <a style=" position:absolute; width:50px; height:50px; background:#9C0;border-radius:25px; margin-left:-25px;left:200px; top:75px; text-align:center; line-height:50px;transition:all .3s linear 0s; transform-origin:center center;transform:rotate(0deg);">22</a>
        <a style=" position:absolute; width:50px; height:50px; background:#9C0;border-radius:25px; margin-left:-25px;left:100px; top:175px; text-align:center; line-height:50px;transition:all .3s linear 0s; transform-origin:center center;transform:rotate(0deg);">33</a>
        <a style=" position:absolute; width:50px; height:50px; background:#9C0;border-radius:25px; margin-left:-25px;left:0px; top:75px; text-align:center; line-height:50px;transition:all .3s linear 0s; transform-origin:center center;transform:rotate(0deg);">456</a>
    </div>
</nav>
<span id="ll" style=" display:inline-block; height:30px; line-height:30px; text-align:center; background:#0CF; border-radius:10px;">左動</span>
<span id="rr" style=" display:inline-block; height:30px; line-height:30px; text-align:center; background:#0CF; border-radius:10px;">右動</span>
<p>案例被手機支持，可用模擬器，點擊按鈕可旋轉，在導航區左右滑動可旋轉</p>
</body>
<script type="text/javascript">
Zepto(function($){
 
 //手滑事件
 $("#aa").swipeRight(function(){
  var tempdeg=$(this).css('transform');
  tempdeg=tempdeg.split('deg')[0].split('(')[1];
  $(this).css('transform','rotate('+parseInt(tempdeg-90)+'deg)');
  $(this).children('a').css('transform','rotate('+parseInt(-(tempdeg-90))+'deg)');
 }); 
 $("#aa").swipeLeft(function(){
  var tempdeg=$("#aa").css('transform');
  tempdeg=tempdeg.split('deg')[0].split('(')[1];
  $("#aa").css('transform','rotate('+(parseInt(tempdeg)+90)+'deg)');
  $("#aa").children('a').css('transform','rotate('+(-(parseInt(tempdeg)+90))+'deg)');
 });
 //點擊事件
 $("#rr").on('click', function(e){
  var tempdeg=$("#aa").css('transform');
  tempdeg=tempdeg.split('deg')[0].split('(')[1];
  $("#aa").css('transform','rotate('+parseInt(tempdeg-90)+'deg)');
  $("#aa").children('a').css('transform','rotate('+parseInt(-(tempdeg-90))+'deg)');
 });
 $("#ll").on('click', function(e){
  var tempdeg=$("#aa").css('transform');
  tempdeg=tempdeg.split('deg')[0].split('(')[1];
  $("#aa").css('transform','rotate('+(parseInt(tempdeg)+90)+'deg)');
  $("#aa").children('a').css('transform','rotate('+(-(parseInt(tempdeg)+90))+'deg)');
 });
 
}); 
</script>
</html>

實例3：觸摸事件的焦點圖實現

咱們已經作過帶滑動的tab切換效果，其實效果很像了，咱們在加上動畫處理就行了！！！！！！