天天看點

百度touch.js API教程下載下傳:http://download.csdn.net/detail/cometwo/9407914

百度touch.js API教程下載下傳:http://download.csdn.net/detail/cometwo/9407914

¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥

touch

在開發移動端的應用中會使用到很多的手勢操作,例如一指拖動、兩指旋轉等等,為了友善開放者快速內建這些手勢,在clouda中内置了事件和手勢庫library.touch,下面将詳細的介紹如何使用library.touch。

touch.config

文法: touch.config(config)

對手勢事件庫進行全局配置。

參數描述:

config為一個對象

{

tap: true, //tap類事件開關, 預設為true

doubletap: true, //doubletap事件開關, 預設為true

hold: true, //hold事件開關, 預設為true

holdtime: 650, //hold時間長度

swipe: true, //swipe事件開關

swipetime: 300, //觸發swipe事件的最大時長

swipemindistance: 18, //swipe移動最小距離

swipefactor: 5, //加速因子, 值越大變化速率越快

drag: true, //drag事件開關

pinch: true, //pinch類事件開關

}

touch.on

文法:touch.on(element, types, options, callback)

綁定指定元素的事件。

element: 元素對象或選擇器。

types: 事件的類型, 可接受多個事件以空格分開,支援原生事件的透傳, 支援的一些事件類型有:

pinchstart 雙指縮放動作開始

pinchend 雙指縮放動作結束

pinch 雙指縮放事件

pinchin 雙指向裡縮小

pinchout 雙指向外放大

rotateleft 向左旋轉

rotateright 向右旋轉

rotate 旋轉事件

swipestart 單指滑動動作開始

swiping 單指滑動事件

swipeend 單指滑動動作結束

swipeleft 單指向左滑動

swiperight 單指向右滑動事件

swipeup 單指向上滑動

swipedown 單指向下滑動

swipe 單指滑動事件

drag 單指向左右拖動

hold 單指按住不放事件

tap 單指點選

doubletap 單指輕按兩下

例如旋轉執行個體如下:

var angle = 30;

touch.on(‘#rotation .target’, ‘touchstart’, function(ev){

ev.startrotate();

ev.originevent.preventdefault();

ev.originevent.stoppropagation();

});

touch.on(‘#rotation .target’, ‘rotate’, {interval: 10}, function(ev){

var totalangle = angle + ev.rotation;

if(ev.fingerstatus === ‘end’){

angle = angle + ev.rotation;

this.style.webkittransform = ‘rotate(’ + totalangle + ‘deg)’;

更多使用執行個體請檢視http://code.baidu.com/

options(可選): 目前可配置的參數為:

//采樣頻率

interval: 10,//性能參數,值越小,實時性越好, 但性能可能略差, 值越大, 性能越好。遇到性能問題時,可以将值設大調優,建議值設定為10。

//swipe加速度因子(swipe事件專用)

swipefactor: 5 //(int: 1-10)值越大,速率更快。

callback: 事件處理函數, 該函數接受的參數為一個gesture event object, 可通路的屬性有:

originevent //觸發某事件的原生對象

type //事件的名稱

rotation //旋轉角度

scale //縮放比例

direction //操作的方向屬性

fingerscount //操作的手勢數量

position //相關位置資訊, 不同的操作産生不同的位置資訊。

distance //swipe類兩點之間的位移

distancex //swipe類事件x方向的位移

distancey //swipe類事件y方向的位移

angle //swipe類事件觸發時偏移角度

factor //swipe事件加速度因子

startrotate //啟動單指旋轉方法,在某個元素的touchstart觸發時調用。

touch.live

文法:touch.live(selector, types, options, callback)

使用方法基本上與on相同,live的第一個參數隻接受css3選擇器。通過live()方法附加的事件處理程式适用于比對選擇器的目前及未來的元素(比如由腳本建立的新元素)

touch.off

文法:touch.off(element,types,callback)

解除某元素上的事件綁定。

element:元素對象或選擇器

types:事件的類型

callback:時間處理函數

publish/subscribe

subscribe

訂閱被釋出的資料,與pubilsh配合使用

不帶參數 env.subscribe(publishname, function(collection){});

env.subscribe(“pub-allstudents”, function(studentcollection){

pulishname

所定義的publish的唯一名稱,在一個app内全局唯一,該參數與sumeru.publish(modelname, publishname,function(callback))中的publishname名稱需要保持一緻。

function(collection){}

subscribe成功獲得資料時,被調用的響應方法。

帶參數 env.subscribe(publishname,arg1,arg2, … , function(collection){});

env.subscribe(“pub-studentswithgender”, “male”, function(msgcollection){

subscribebypage

分頁訂閱資料

不帶參數 env.subscribebypage(publishname, options, function(collection){});

var pageoption{

pagesize : 1,

page : 2,

uniquefield : ‘time’

};

env.subscribebypage(“pub-allstudents”, pageoption, function(studentcollection){

options

分頁設定

pagesize

每頁資料的數量

page

頁碼

uniquefield

排序的唯一字段名

帶參數 env.subscribebypage(publishname, options, arg1,arg2, … , function(collection){});

env.subscribebypage(“pub-studentswithgender”, pageoption, “male”, function(msgcollection){

prioritysubscribe

在斷線重新連接配接的情況下,使用prioritysubscribe方法訂閱資料優先被調用,使用方式與subscribe相同。

publish

釋出資料的方法,其運作在server上。

不帶參數 sumeru.publish(modelname,pubname,function(callback){},options)

modelname

被釋出資料所屬的model名稱

pubname

所定義的publish的唯一名稱,在一個app内全局唯一,該參數與controller中subscribe()成對使用。

function(callback)

描述資料釋出規則的自定義函數,在這裡定義被釋出資料所需要符合的條件。

可在此添加以下六種事件

beforeinsert

在實際插入資料到資料庫前的事件

beforeinsert : function(servercollection, structdata, userinfo, callback){

callback(structdata);

structdata

需要插入到資料庫的資料,我們可以對該資料進行操作,然後将資料插入到資料庫中,如果對資料沒有修改,則将原資料添加到資料庫中。

callback

before系列的事件中如果不添加 callback(),将阻止資料對資料庫的影響。

callback(structdata)

如果需要對原資料進行修改,可以傳入參數structdata

afterinsert

在實際插入資料到資料庫後的事件

afterinsert : function(servercollection, structdata){

beforeupdate

在實際更新資料庫資料前的事件

beforeupdate : function(servercollection, structdata, userinfo, callback){

callback();

afterupdate

在實際更新資料庫資料後的事件

afterupdate : function(servercollection, structdata){

beforedelete

在實際删除資料庫資料前的事件

beforedelete : function(servercollection, structdata, userinfo, callback){

afterdelete

在實際删除資料庫資料後的事件

afterdelete : function(servercollection, structdata){

執行個體:

module.exports = function(sumeru){

sumeru.publish(‘student’, ‘pub-allstudents’, function(callback){

var collection = this;

帶參數 sumeru.publish(modelname,pubname,function(arg1, …, callback){},options)

sumeru.publish(‘student’, ‘pub-allstudents’, function(gender,callback){

publishbypage

分頁釋出資料

sumeru.publishbypage(modelname,pubname,function(arg1,arg2,…,pageoptions, callback){},options)

分頁設定,有controller中subscribebypage()傳入。

sumeru.publishbypage(‘student’, ‘pub-allstudents’, function(gender,options,callback){

collection.find({ sort :{‘time’:-1},

limit : options.pagesize,

skip : (options.page-1)*options.pagesize,

“gender”: gender

}, function(err, items){

callback(items);

sort

排序

limit

每頁顯示的個數

skip

目前頁與起始頁間隔的個數

詳細的使用情況請檢視《example》文檔中的執行個體。

publishplain

用于釋出簡單對象,而非collection。

sumeru.publishplain(modelname,pubname,function(callback){},options)

如果需要釋出collection中資料的總數量,可使用下面方法:

fw.publishplain(‘student’, ‘pub-allstudents’, function(callback){

下面的三種方法是包含權限中心的身份驗證的publish。

securepublish

在身份驗證成功的情況下釋出資料

sumeru.publish(modelname,pubname,function(userinfo, callback){},options)

securepublishbypage

在身份驗證成功的情況下分頁釋出資料

sumeru.securepublishbypage(modelname,pubname,function(pageoptions,userinfo, callback){},options)

securepublishplain

在身份驗證成功的情況下釋出簡單對象

sumeru.securepublishplain(modelname,pubname,function(userinfo, callback){},options)

external

實作了三方資料同步的方法,用來滿足從三方網站/三方接口擷取和同步資料的需求。

extfind(pubname,callback)

在publish檔案中釋出第三方資料

fw.publish(‘news’,’pubnews’,function(callback){

使用該方法需要在publish下添加一個如何擷取第三方資料的配置檔案

config[pubname]

與publish中collection.extfind(pubname,callback)方法pubname一緻,全局唯一

uniquecolumn

uniquecolumn為三方資料唯一辨別,類型為string

uniquecolumn : “name”,

fetchurl: function((/* arg1, arg2, arg3 /)){}

指定抓取的url。arg1,arg2為傳遞的參數

fetchurl : function(/* arg1, arg2, arg3 /){

return ‘http://some.host.com‘;

resolve : function(origindata){}

resolve方法作用是将抓取回來的原始資料(origindata)轉化成為符合model定義的資料(resolved)

resolve : function(origindata){

var j = json.parse(origindata);

var resolved = j;

return resolved;

fetchinterval

fetchinterval為可選參數,用來指定抓取時間間隔,機關為ms

buffer

buffer為可選參數,值為true時表示擷取原始buffer,否則擷取原始資料字元串

type

聲明此子產品為歸屬為’external’

return {

type : ‘external’,

config : config

執行個體如下:

/**

* 擷取三方資料資訊,由開發者自定義

*/

function runnable(){

//{object} config是所有三方publish配置的容器

var config = {};

module.exports = runnable;

指定三方增/删/改接口以及資料

當資料發生變化時,如何使用clouda達到三方資料同步的效果,具體實作方法如下:

較為緊湊的聲明方式

posturl

posturl方法用來指定三方post接口的位址資訊, 參數type為增量類型,增量類型為’insert’,’update’,’delete’三者之一;

prepare

prepare方法用來将增量資料轉化成為符合三方post接口要求的post資料,參數type同為增量類型,參數data為增量的實際資料。

* 三方資料post請求資訊,由開發者自定義

較為工整的聲明方式

deleteurl,inserturl,updateurl

三個方法作用等同于posturl,傳回不同操作下三方接口url資訊

ondelete,oninsert,onupdate

三個方法作用等同于prepare方法, 傳回經過處理,傳給三方接口的post資料

sumeru.external.get

向第三方發送get請求

var url = “http://some.host.com“;

var getcallback = function(data){

console.log(data);

sumeru.external.get(url, getcallback);

sumeru.external.post

向第三方發送post請求

var options = {

host : “some.host.com”,

path : “/insert”

var postdata = {

name : sumeru.utils.randomstr(8),

age : parseint( 100 * math.random())

var postcallback = function(data){

sumeru.external.post(options, postdata, postcallback);

具體使用請檢視《example》文檔中的spidernews執行個體。