码迷,mamicode.com
首页 > Web开发 > 详细

更换 jQuery -> Zepto / 优化换页效果

时间:2014-11-12 21:14:38      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:android   http   io   ar   os   使用   sp   for   strong   

Zepto.js 手机版的 jQuery

bubuko.com,布布扣

手机版的网站使用 jQuery 未免太浪费手机的宝贵的流量了吧!那么你应该要试试 Zepto.js 了,单靠它的 8.4k(gzipped)size 完全可以代替掉 jQuery 这只庞大的怪物。

jQuery 的 ajax,addClass,find,next,toggle,wrap。主流的 jQuery API 都有了,并且添加了 touch events。可以长按,滑动,就如使用 iOS 或者 Android 一样。

且添加了 touch events。可以长按,滑动,就如使用 iOS 或者 Android 一样。

轻触:tap
双击:doubleTap
长按:longTap
滑动:swipe
滑动自定方向:swipeLeftswipeRightswipeUpswipeDown

Zepto.js 的网站:http://zeptojs.com/

下载:

开发版:http://zeptojs.com/zepto.js
压缩版:http://zeptojs.com/zepto.min.js

喜欢的话可以查看 GitHub 上的 repo

使用:

跟 jQuery 的加载方法差不多。尽量放在 body 关闭前。

<script src="./js/zepto.min.js"></script>
</body>

使用例子:

演示:点击这

// 滑动后显示 【删除】按钮
$(‘#items li‘).swipe(function(){
  $(‘.delete‘).hide()
  $(‘.delete‘, this).show()
})

// tap 【删除】按钮,移除 li 标签
$(‘.delete‘).tap(function(){
  $(this).parent(‘li‘).remove()
})
注意事项:

 

1. 这个 Zepto 使用的 animation 不是 jQuery 的,而是 CSS3 transition
2. 这货的 size 这么小是因为不支持很多游览器,请看:http://zeptojs.com/#browsers 了解支持什么游览器。Zepto 的目的是为了现代手机的游览器而出生的,所以不支持 nokia 的 symbian

 
 

更换 jQuery -> Zepto / 优化换页效果

标签:android   http   io   ar   os   使用   sp   for   strong   

原文地址:http://www.cnblogs.com/moonlight-fly/p/4093414.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!