MJ-WAVE.COM

  1. MJ-WAVE.COM
  2. Web開発
  3. 手軽にタップやスワイプ等のジェスチャーイベントを実装できる「QUOjs」

手軽にタップやスワイプ等のジェスチャーイベントを実装できる「QUOjs」

ツイート
このエントリーをはてなブックマークに追加

今回はスマホのジェスチャーイベントを手軽に実装するQUOjsを軽く触ってみたので、簡単な使用方法を書きます。
詳しい仕様方法は公式サイトに書いてありますが、基本的な部分はjQueryと同じなのでジェスチャイベントの部分だけ紹介します。

基本的な形

$$('.selector').touch(function(){});

って感じで書きます。jQueryとコンフリクトしないように「$$」を使うような仕様になってます。
現在使えるジェスチャイベントは以下の図のものとなっています。

実際に使用する際のコードを一気に羅列します。

$(function(){
	$$('.quo_touch').touch(function(){ alert('TOUCH'); });
	$$('.quo_tap').tap(function(){ alert('TAP'); });
	$$('.quo_hold').hold(function(){ alert('HOLD'); });
	$$('.quo_doubleTap').doubleTap(function(){ alert('DOUBLE TAP'); });
	$$('.quo_swipe').swipe(function(){ alert('SWIPE'); });
	$$('.quo_swiping').swiping(function(){ alert('SWIPING'); });
	$$('.quo_swipeLeft').swipeLeft(function(){ alert('SWIPE LEFT'); });
	$$('.quo_swipeRight').swipeRight(function(){ alert('SWIPE RIGHT'); });
	$$('.quo_swipeDown').swipeDown(function(){ alert('SWIPE DOWN'); });
	$$('.quo_swipeUp').swipeUp(function(){ alert('SWIPE UP'); });
	$$('.quo_drag').drag(function(){ alert('DRAG'); });
});

サンプルも作ったので見てみてくださいね。

ちなみに、Comming Soonということで上記のイベントに加えて下記の図のイベントも追加予定みたいです。

QUOjs自体も13KBと軽量なので手軽にジェスチャイベントを実装できるのはとてもいいんじゃないでしょうか。

もし、この記事が役に立ったらシェアしてくださいね!

ツイート
このエントリーをはてなブックマークに追加

RECOMMEND BOOKS 筆者オススメ!! この記事に関連する書籍一覧

JavaScript 第5版

JavaScript 第5版

David Flanagan

JavaScriptをやるなら、必ず読んでおきたいJavaScriptのバイブル的な本。基礎知識から高度な部分まで幅広くカバーしてくれてます。

¥4,410(税込)

JavaScriptパターン ―優れたアプリケーションのための作法

JavaScriptパターン ―優れたアプリケーションのための作法

Stoyan Stefanov

JavaScriptにおける無駄のない効率のいいソースコードや、こんな風に書くのか!的な目からウロコな事がたくさん書いてある本。筆者イチオシ。

¥2,940(税込)

現場のプロが教える スマートフォンサイト 制作ガイドブック [HTML5&CSS3&JavaScript]

現場のプロが教える スマートフォンサイト 制作ガイドブック [HTML5&CSS3&JavaScript]

松田 直樹、宮山 純

当ブログ管理人の宮山が初めて執筆に参加した書籍。実際の制作の現場で培ったノウハウや、スマートフォンサイトの設計・デザインのポイント、サイトの軽量化など、充実した内容になったかなと思います。レビューを頂ける場合は甘口でお願いします。

¥2,625(税込)

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

谷拓樹

iOSに特化したスマホサイト制作ガイド。実際の内容はAndroidでも使える内容も豊富なので、スマホサイトを制作する上で読んでおいて損はなし。

¥2,310(税込)

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)

たにぐちまこと

スマートフォンサイト制作における入門本。スマホサイト制作において大事な設計から基本的なマークアップ、応用まで盛り込まれているので入門本として最適な本。

¥2,499(税込)