beez-touch
English document is here
About
beez-touchはCyberAgent/beezのプラグインライブラリです。Viewにモバイルブラウザ用にtap機能を付加するライブラリです。 beez-touchによって拡張されたViewを使用することで、以下の様に簡単にDOM要素に対してtapイベントを付与することができます。
Features
- beez.Viewにtap機能を付加します。
- beezを使った継承を前提にしているため、継承先のメンバ、メソッドを汚染しないように関数名、メンバ変数、オプションにプレフィックスを付加しています。
- PCブラウザ等Touch系のイベントが存在しない場合、代わりにMouse系イベントを利用して擬似的なTouch系イベントを作成します。
var $btn = ;this;
Usage
beez-touchが提供するViewを継承して新しくViewを作成します。
var EntityView = beeztouchView; // optionを渡してインスタンスを生成beezmanagerv;
Requirements
Options
インスタンスを作る際にoptionを渡すことでカスタマイズすることができます
bztch.hoverClassName {String}
hover時に付与するclassName
bztch.preventDefault {Boolean}
デフォルトの挙動を停止するか
bztch.threshold {Number}
タップキャンセルを発火する移動量
bztch.holdDuration {Number}
タップホールドを発火する時間(ms)
Method
tap($element, callback, context, options)
;
$elment {Elements}
- tap対象となる要素(jQueryオブジェクトであること)
callback {Function}
- tap時に実行されるコールバック関数
context {Object}
- コールバック関数に渡す実行コンテキスト
options.tapStart {Object}
- touchstartに対するイベントを設定します
options.tapMove {Object}
- touchmoveに対するイベントを設定します
options.tapEnd {Object}
- touchendに対するイベントを設定します
options.tapHold {Object}
- 一定時間タッチを続けた時に発火するイベントに対するコールバックを指定します
options.holdDuration
- タップホールドイベントを発火する時間を指定します
longTap($elm, callback, context, options)
- 長押しに対するコールバックを指定します
Restriction
tapイベントは単Viewのrootに該当する$elでキャッチされるため、tap対象となる要素は必ず$el配下に配置されている必要があります。
Test
$ npm install -g grunt-cli$ npm install .$ bower install$ npm install -g beez-foundation$ beez-foundation -s ## Mode: [Stand-alone] ## ## Start ## Beez Foundation Servers!! ## ## ## Mock Server [ off ] ## ## Express server listening on port:1109 ## Static Server start [ success ] ## compress: [on] ## Please try to access. ## http://0.0.0.0:1109 ##
open browser Test page. http://0.0.0.0:1109/m/beez-touch/spec/all.html
Build
$ npm install -g grunt-cli
$ npm install .
$ bower install
grunt
LICENSE
@see : LICENSE