スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Swiper.js

JavaScript でタッチスクリーンのスワイプ・フリック操作を扱うライブラリをつくりました。
B2G (Firefox OS) のキーボードアプリで使われている swiping_detector.js を基にしています。

github.com/marsf/swiper.js

使い方

HTML ファイルでスクリプトを読み込んでください。

<script type="text/html" src="swiper.js">

JavaScript ファイルで、まず、Swiper のインスタンスを作成してください。引数には、操作対象の DOM 要素を渡します。

var swipe_container = document.getElementById("container");
var swipe = new Swiper(swipe_container);

次に、start() 関数で、要素に touchstart, touchmove, touchend イベントを追加します。

swipe.start();

stop() 関数はイベントを削除します。スワイプが不要になったタイミングで呼び出してください。

swipe.stop();

.onswiping プロパティと .onswiped プロパティにスワイプイベントで呼び出す関数を定義してください。どちらも任意です。

// スワイプ中 (touchmove) のイベントハンドラ
swipe.onswiping = swipingHandler;
function swipingHandler (event) {
  ...
}

// スワイプ後 (touchend) のイベントハンドラ
swipe.onswiped = swipedHandler;
function swipedHandler (event) {
  ...
}

上記の関数の event に、それぞれスワイプ時のデータが渡されます。
例えばスワイプ方向は、次のようにして取得できます。

var dir = event.direction;

onswiping の関数に渡されるデータは以下のとおり。

  • target: <DOM 要素>
    スワイプ開始時にタッチした DOM 要素です。
  • dx: <整数値>
    X 軸方向の移動量です。画面右方向が正の値。
  • dy: <整数値>
    Y 軸方向の移動量です。画面下方向が正の値。
  • direction: <文字列> 'right' | 'left' | 'up' | 'down' | 'point'
    スワイプ方向です。スワイプ中の方向は 4 方向のみです。 移動量が X, Y ともに 0 の場合は 'point' を返します。

onswiped の関数に渡されるデータは以下のとおり。

  • target: <DOM 要素>
    同上。
  • dx: <整数値>
    同上。
  • dy: <整数値>
    同上。
  • angle: <整数値> 0 - 360
    スワイプの始点と終点を結んだ直線の角度です。水平右方向が 0 度、そこから時計回りに 360 度です。
  • length: <整数値>
    スワイプの始点と終点を結んだ直線の長さです。
  • direction: <文字列>
    同上。ただし、ソースコードの dir_array 配列を書き換えることで何等分にでもできます。右方向から時計回りに定義してください。

追記 (6/30):
ver 0.2.5 向けに更新。

関連記事

コメント

コメントする

管理者にだけ表示を許可する

この記事のトラックバックURL

http://chimantaea.blog8.fc2.com/tb.php/152-d43c4c94

※トラックバック元には、この記事へのリンクを含めてください。