JS三教九流系列-Zepto.js-为移动端开发的类库

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

类库源码下载http://www.zeptojs.cn/ 滚动当前页面，看到这部分点击下载

和使用jquery一样，我们只要html页面引入即可。
zepto的api与jq几乎一样，同时各个接口名字也是一样的，我们只要按着写jq一样去写zepto就好了，既然这样，我们为何要用zepto，主要就是zepto提供时触摸事件，为开发移动端的更好处理。

jq是为多个浏览器支持的类库，并没有封装上touch事件，如果我们的项目是pc或者虽然是移动端，但是没有很多触摸事件的效果，我们选择jq即可，我们可以看出，我们采用zepto的时候

手机项目的开发，需要触摸事件。

zepto的支持是高级浏览器，ie10以上。

1.zepto.js的helloworld输出

我们学习之前，需要保证对jq有很熟练的使用技巧，我们使用zepto，基本的调用如下

<!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($){

  //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切换效果，其实效果很像了，我们在加上动画处理就好了！！！！！！

时间： 2024-11-01 09:57:30

JS三教九流系列-Zepto.js-为移动端开发的类库的相关文章

JS三教九流系列-jquery实例开发到插件封装3

我们先写实例,然后可能需要在封装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 1-7实例地址  http://my.oschina.net/u/2352644/blog/490827 8-17实例地址 http://my.oschina.net/u/2352644/blog/491933 效果目录: 18.计数增加效果 19.模仿3d的焦点图效果 20.倒计时效果 21.导航滚动监听 18.计数增加效果 我

JS三教九流系列-jquery实例开发到插件封装

我们先写实例,然后在分装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 1.tab切换效果的实例和封装 tab切换效果的原理: 点击选项,对应内容项显示,获取选项索引,内容项索引等于选项索引的显示,其他内容项隐藏 要用的处理方法: $().index()获取当前对象的索引,从0开始 $().eq() 获取当前对象索引等于参数值的那一个  jq实例代码: <!DOCTYPE html PUBLIC "-/

JS三教九流系列-jquery实例开发到插件封装2

我们先写实例,然后有必要在分装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 前面的7个实例在这里 http://my.oschina.net/u/2352644/blog/490827 效果目录: 8.商品数量加减效果 9.星星评分效果 10.刮刮卡效果 11.圆形大转盘抽奖效果 12.贪食蛇小游戏效果 13.video的html5视频播放器 14.可拖拽的登陆框 15.树形菜单效果 16.全选/反全选处理

JS三教九流系列-jquery实例开发到插件封装4

我们先写实例,然后可能需要在封装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 1-7实例地址  http://my.oschina.net/u/2352644/blog/490827 8-17实例地址 http://my.oschina.net/u/2352644/blog/491933 18-23实例地址 http://my.oschina.net/u/2352644/blog/497003 效果目录:

JS三教九流系列-require.js-网站模块化开发

js开发的模块化就是module处理 简单理解js模块化的开发就是让我们的web项目对js进行分类的处理 我们在开发网站的时候,里面会用要很多的类库,如jquery,还会有到基于jq各种插件,还会有其他类库,还有自己写的js或者jq代码等.一个html页面会有n多个script标签对外部js的引用,是不是感觉这样的页面会非常的混乱,如果我们可以只用一个script标签载入一个js文件,这个js文件把其他需要的js文件能全部加载进去,并且按着之间依赖关系执行,是不是一个页面就非常的整洁和容易扩展处

（二）Node.js入门系列——Express.js安装

本篇文章讲express的安装与创建express项目. 一.安装express 执行命令 : npm install -g express; 安装express到npm-module,在express4.0之后,还需要安装express-generator 来完成express项目的创建, 执行命令 : npm install -g express-generator; 二.创建Express项目 然后就能够在目标路径下通过express命令创建项目.如需要在 D盘 的 project文件夹下

Zepto.js

一.Zepto.js的语法借鉴并且兼容jQuery,只是在事件上作出了一些修改. zepto.js的语法借鉴并且兼容jQuery,会使用jquery就会使用Zepto.js.Zepto.js是移动端的js库.Zepto.js相当于PC端的jQuery,它提供了很多方法和功能,能够很快的实现各种需求和功能.使用Zepto.js开发,性能上是最好的,而兼容性比较好,跟jQuery有同样的API,只是需要自己设计UI. 压缩后的 zepto.min.js 大小只有24K. 例如: 绑定事件不同 用 “

zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width,initial-scale=1.0

移动端开发框架Zepto.js

一.概述 Zepto.js是一个轻量的js库,它与jQuery有类似的API. zepto的设计目的是不到10K的通用库,快速下载,有一个熟悉的api-->精力专注在开发上. 流行起来的原因:轻量:只支持现代浏览器:非常方便的搭配其他框架(phoneGap)来编写代码:优秀的源代码,性能良好. zepto和jQuery的对比: 浏览器兼容:zepto偏移动端,jQuery偏PC端: 文件大小:zepto 10k jQuery 30k  : 部分API接口:参数和执行结果有可能不一致: 生态圈:j