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框去放其他的網頁，這些就看你發揮了。

對於插件或者處理方法有疑問的請追問。