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

Zepto.js 手机版的 jQuery

手机版的网站使用 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
滑动自定方向： swipeLeft,  swipeRight,  swipeUp,  swipeDown

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

 

 

转载于:https://www.cnblogs.com/moonlight-fly/p/4093414.html