zeptojs帮助文档

A. 请问如何用zepto.js实现上下触摸滑动切换效果事件

zepto.js有的需要自己引用touch.js额外js文件才支持触摸事件,touch.js可以到zepto的gihub上下载

如果专只是写简单属的效果,直接给页面上的body绑定一个swipeup事件swipedown事件来自己写动画切换(如果需要zepto.js支持jquery类似的动画效果需要继续添加额外的fx.js)

B. zepto.js可以调用 $(window).load() 事件吗

可以使用$(window).on("load",function(){})的写法。

function($){
$(function(){
$script=$('<script/>',{
src:'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js',
id:'ui-jquery'
});
$script.appendTo($('body'));
$script.on('load',function(){
console.log('jQscriptloaded');
});
});
})(window.jQuery);

使用 jQuery 时 load 事件的处理函数不会执行。

Zepto(function($){
$script=$('<script/>',{
src:'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js',
id:'ui-zepto'
});

$script.appendTo($('body'));

$script.on('load',function(){
console.log('zeptoscriptloaded');
});}

使用 Zepto 时 load 事件的处理函数会执行。

参考 https://segmentfault.com/a/1190000003409961

C. zepto.js和jquery.js函数都差不多啊,zepto.js有什么优点呢各位

Zepto.js 是专门为现代智能手机浏览器推出的 javascript 框架, 拥有和jQuery相似的语法, 但是和jQuery相比下来, 他有很多优点：

1、大小方面 , 压缩后的 zepto.min.js 大小只有21K, 使用服务器端 gzip 压缩后大小只有5~10K, 可以说非常的小。

2、虽然体积小，但是功能很齐全, 多出来了一些触摸屏的事件 ,用它来开发iPhone和Android网页是首选， 但它不支持IE。

3、Zepto是jQuery的精简，针对移动端去除了大量jQuery的兼容代码。

4、因为精简，所以Zepto核心库的性能要比jQuery优秀。

(3)zeptojs帮助文档扩展阅读

zepto.js和jquery.js的主要区别：

1、用途方面

Zepto最初是为移动端开发的库，是jQuery的轻量级替代品，因为它的API和jQuery相似，而文件更小。

jquery主要是用在电脑的网页中，插件丰富，代码简洁，最关键的是更新快，有最好的dom选择器而被广泛被使用。

2、API方面

大多数在jQuery中常用的API和方法Zepto都有，Zepto中还有一些jQuery中没有的。

因为Zepto的API大部分都能和jQuery兼容，所以用起来极其容易，如果熟悉jQuery，就能很容易掌握Zepto。

3、兼任性方面

Zepto 希望在所有的现代智能手机浏览器中作为一种基础环境来使用。 Zepto 不支持旧版本的 Internet Explorer浏览器。

jquery是目前最流行的javascript框架，它兼容全部主流浏览器。

D. 如何实现 zepto的ajax 前置过滤器

Rails中Jquery支持下的Ajax请求

在rails中使用 Ajax 是十分方便的，你可能早已经熟悉了这样的代码：
在views中声明属性 :remote => true ：
<%= form_for(@post, :remote => true) do |f| %>
<div class="field">
<%= f.label :title %><br />
<%= f.text_field :title %>
</div>
<div class="field">
<%= f.label :content %><br />
<%= f.text_field :content %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>

接着在对应 controller 里接收请求，做如下处理：
respond_to do |format|
format.html
format.js { render 'success' } # 这里表示你收到的是ajax请求,将结果给success.js.erb处理
end

最后就是在 success.erb.js 文件里做一些操作：
alert("ok")

Everything is so easy!
但是，你知道为什么可以使用 remote 属性来发送ajax请求吗？
在rails中assets目录下的 application.js 文件可以看到：
//= require jquery
//= require jquery_ujs

对，就是要归功于 jquery_ujs.js 这个文件，它会找出所有 remote 链接和表单并重写 click 事件来驱动它们发送AJAX请求到服务器。
亲，说到这儿，你能猜到我想要说什么了吗？对！如果我们想在rails里使用zepto来发送ajax请求，我们要做的就是模仿 jquery_ujs.js 所做的。
在Rails基于Zepto使用Ajax
卖了半天的关子，终于进入正题了。 首先我们得看下 zepto 框架对于js的ajax请求提供的方法调用，文档里大概是这样一种方式：
Ajax requests

$.ajax

$.ajax(options) ⇒ XMLHttpRequest

type (default: “GET”): HTTP request method (“GET”, “POST”, or other)
url (default: current URL): URL to which the request is made
data (default: none): data for the request; for GET requests it is appended to query string of the URL. Non-string objects will get serialized with
…

Ajax callbacks

beforeSend(xhr, settings)
success(data, status, xhr)
error(xhr, errorType, error)
complete(xhr, status)
…

Ajax events

…

在发送ajax请求时，我们可以指定ajax请求的类型，url等属性，在ajax请求过程中会有相应的回调函数以及ajax事件函数。这些就不多说了，现在我们要做的就是来模拟jquery_ujs.js所做的工作：
我们先新建一个 mock_ujs.js ,当文档加载完成后来监视Dom元素的行为:
$(document).ready(function() {
//...
}

添加一个 click 事件:
$(document).ready(function() {
$('.load').live('click', function() {
//可以在这里取页面上的一些数据
var text = $(".data").text();

$.ajax({
type: 'http请求如GET、POST',
url: '所请求的url',
// data为发送的数据，将以url?a=xx&b=xxx这种方式发送
data: { a: xxx, b: xxxx },
// 期望服务器返回的数据类型:
dataType: 'json',
timeout: 10000,
beforeSend: function(xhr, settings) {
//回调函数
},
success: function(data){
//data为返回数据
},
error: function(xhr, type){
//错误处理
}
});
});
}

现在请求已经到达服务器， controller 收到请求并进行相应处理：
def custom
data = Model.find(data)

# return the data as the format of json
respond_to do |format|
format.json {
render :inline => data.to_json
}
end
end

E. WEB移动端开发使用什么框架比较好

介绍几种开发框架，看你自己的偏好选择.

1. jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。jQuery Mobile最新版本是1.4.0，默认主题采用扁平化设计风格。jQuery Mobile1.4.0主要侧重于性能和控件方面的改进。除了全新的默认主题和SVG图标，还新增了开关控件、通用过滤器、箭头弹出框、滑动提示框等一系列功能，更是集成了jQuery UI的Tab部件。jQuery Mobile继承了jQuery的优势，并且提供了丰富的适合手机应用的UI组件。jQuery Mobile还有很多的第三方扩展。
2. Frozen UI是腾讯ISUX团队（社交用户体验设计团队）根据最新的手机QQ设计规范制作的移动端Web框架，包括CSS基础样式和组件、JavaScript基础组件和一些动画效果库。为了方便记忆和增添趣味性，腾讯ISUX团队为它取了动画片《冰雪奇缘》的英文名，并把Elsa女王作为该项目的卡通代言人。
3.Ionic提供了一个免费且开源的移动优化HTML，CSS和JS组件库，来构建高交互性应用。基于Sass构建和AngularJS 优化。
Ionic既是一个CSS框架也是一个Javascript UI库。许多组件需要Javascript才能产生神奇的效果，尽管通常组件不需要编码，通过框架扩展可以很容易地使用，比如我们的AngularIonic扩展。
Ionic遵循视图控制模式，通俗的理解和 Cocoa 触摸框架相似。在视图控制模式中，我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。一个很好的例子就是标签栏（Tab Bar）视图控制器处理点击标签栏在一系列可视化面板间切换。 github。
4. Amaze UI 采用业内先进的 Mobile first 理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件，更有 17 款包含近 60 个主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅度提升你的开发效率。Amaze UI 非常注重性能，基于轻量的 Zepto.js 开发，并使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让你的 Web 应用可以高速载入。

F. zepto移动端上下滑动 怎么做

手机端页面切换，页面跟随手势上下/左右滑动，依赖zepto.js。如果工程中同时使用jquery的话，采用如下方式来调用zepto的方法。

(function($){$('#Marke').touchSlider({direction: 'v',itemSelector:'.slide',slidePercent:0.2});

})(Zepto)。

调用方式：$('#Marke').touchSlider({direction: 'v',itemSelector:'.slide',slidePercent:0.2})

direction：v/h，竖滑或横滑。

itemSelector：需要滑动的一组DOM元素，使用同一的className来标识。

slidePercent：用户滑动多少百分比（0.0～1.0）后才会触发slider，否则就还原到滑动前的位置。

(6)zeptojs帮助文档扩展阅读：

zepto的使用：

1，针对移动端程序，Zepto有一些基本的触摸事件可以用来做触摸屏交互。

2，DOM操作：,添加id时Zepto会生效。

3，事件触发：使用zepto时load事件的处理函数会执行。

4，事件委托：zepto中，选择器上所有的委托事件都依次放入到一个队列中。

5，width() 与 height()：zepto由盒模型（box-sizing）决定，用.width()返回赋值的width，用.css('width')返回border等的结果。

G. 用zepto.js写一个遮罩弹出层

<style>
#H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #fff;}
#H-dialog .close{float:right;font-size: 30px;margin-right: 10px;margin-top:5px;cursor:pointer;}
#H-dialog .title{height: 40px;padding-left:10px; font-size:20px; line-height:40px;}
#H-dialog #msgCont{height:36px; margin: 30px 0 50px;padding-left: 65px;font-size: 25px;line-height: 36px;vertical-align: middle; background: url(../Images/ui_alert.png) no-repeat 20px 50%;}
</style>
<div id="H-dialog">
<a class="close" onclick="popupClose(this)">×</a>
<div class="title">提示</div>
<div id="msgCont">内容</div>
</div>

<script type="text/javascript">
//锁定背景屏幕
function lockScreen() {
var clientH = document.body.offsetHeight; //body高度
var clientW = document.body.offsetWidth; //body宽度
var docH = document.body.scrollHeight; //浏览器高度
var docW = document.body.scrollWidth; //浏览器宽度
var bgW = clientW > docW ? clientW : docW; //取有效宽
var bgH = clientH > docH ? clientH : docH; //取有效高
var blackBg = document.createElement("div");
blackBg.id = "blackBg";
blackBg.style.position = "absolute";
blackBg.style.zIndex = "99999";
blackBg.style.top = "0";
blackBg.style.left = "0";
blackBg.style.width = bgW+"px";
blackBg.style.height = bgH+"px";
blackBg.style.opacity = "0.4";
blackBg.style.backgroundColor = "#333";
document.body.appendChild(blackBg);
}
//关闭按钮事件
function popupClose(el) {
var blackBg = document.getElementById("blackBg");
blackBg && document.body.removeChild(blackBg);
el.parentNode.style.display = "none";
}
//自动关闭
function autoClose(id) {
id = id || "H-dialog";
var blackBg = document.getElementById("blackBg");
var objDiv = document.getElementById(id);
setTimeout(function(){
blackBg && document.body.removeChild(blackBg);
objDiv.style.display = "none";
},2000);
}
/**
*功能 : 弹窗信息
*参数1 : 提示信息内容
*参数2 : 提示信息状态默认0 为提示信息,1为成功信息
*参数3 : 弹窗div的id,默认"H-dialog"
*参数4 : 弹窗内容的id,默认"msgCont"
**/
function showMsg(msg) {
msg = msg || "请重新操作";
var status = arguments[1] || 0,
popupId = arguments[2] || "H-dialog",
contentId = arguments[3] || "msgCont";
lockScreen();
//屏幕实际高宽
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
if (document.compatMode == "CSS1Compat") {
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
//滚动条高宽
var scrollLeft = window.document.documentElement.scrollLeft;
var scrollTop = 0;
if (typeof window.pageYOffset != 'undefined') {
scrollTop = window.pageYOffset;
} else if (typeof window.document.compatMode != 'undefined' &&
window.document.compatMode != 'BackCompat') {
scrollTop = window.document.documentElement.scrollTop;
} else if (typeof window.document.body != 'undefined') {
scrollTop = window.document.body.scrollTop;
}
var div_X = (pageWidth - 400) / 2 + scrollLeft;
var div_Y = (pageHeight - 200) / 2 + scrollTop;
var objDiv = document.getElementById(popupId);
if (status) {
document.getElementById(contentId).style.background = "url($Root/Assets/Images/ui_success.png) no-repeat 20px 50%";
}
document.getElementById(contentId).innerHTML = msg;
objDiv.style.display = "block";
objDiv.style.left = div_X + "px";
objDiv.style.top = div_Y + "px";
autoClose(popupId);
}
</script>

H. 移动端网页触摸滑动整屏切换，就是比如有五张网页写好了，我要在手机QQ浏览器中打开第一张，然后手指左

题主这个问题有这么两个理解方向：

1. 左划可以进行页面跳转

2. 左划可以在页面内进行样式更改从而实现类似于app开场的切换页面。

第一个方向：

你可以使用原生JS实现左划手势的判别，在ontouchstart和ontouchend事件中存储一个deltaX判断一个阀值，然后执行一个跳转方法。

不通过原生JS实现你也可以通过第三方库去实现，这里推荐两个：

1. hammerJS

2. Zepto + touch.js

第一个hammerJS是一个开源项目，我个人比较喜欢的触摸事件库，里面有提供panleft方法，同事还有和它平行的pandown,panright,panup这些是“左划右划上划下划”事件的捕捉，捕捉到事件之后就会运行回执方法，例如 reload() 或者 loadData()方法。

第二个是业内普遍使用的移动端库zeptoJS，touch.js是它的touch插件

第二个方向：

这个和第一个的实现原理是一样的，监听到事件，然后执行相应的方法。

这样做的难点在哪里呢？

第一个需要指明的就是自适应。基本上这种使用方法的页面都是整屏滚动的，实现方式也是较为一致：改变DOM的位置做动画去切换

示意图：

在操作的的事件调用去改变整个大容器的margin-left就可以实现这个效果了，难点就在于每一个小容器内部的自适应。当然，这些小容器的内部你可以放置一个iframe框去放其他的网页，这些就看你发挥了。

对于插件或者处理方法有疑问的请追问。