iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
jQueryでフリック／スワイプ動作の画像スライドギャラリーを作成する実験｜BLACKFLAG
iPhoneやiPad、Androidといったスマートフォンやタブレット端末では フリック／スワイプと呼ばれる指でスライドさせるUIが付き物になっています。 jQueryでもこのフリック／スワイプ動作を実装できるプラグインはたくさんありますが いざ自分で作ろうとすると意外と大変な動作だったりします。 この動作についていろいろ調べていたところ Sleipnirのフェンリルさんのデベロッパーズブログにて、 iPhone/Android/PC 対応。jQuery で書くタッチイベント (フェンリル | デベロッパーズブログ) と題した、jQueryでiPhoneやAndroid、PCでタッチイベントを取得する方法がとても参考になったので この記事を参考にしてフリック／スワイプで操作するシンプルな画像ギャラリーを作ってみました。 まずは動作サンプルから。 下記の画像をフリック／スワイプしてみてくだ
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速 jQuery Mobileと同様に、HTML5のマークアップでモバイルアプリケーション開発を実現するオープンソースのJavaScriptフレームワーク「jqMobi」のβ版が公開されています。 jqMobiのコンセプトは、jQueryとjQuery Mobileの機能のサブセットを、iOSとAndroid向けに最適化したものといえるでしょう。 すでにjQueryやjQuery Mobile、あるいはSencha Touchなど、さまざまなモバイル向けHTML5/JavaScriptフレームワークが登場する中で、jqMobiの特徴はどこにあるのか、ブログで次のように説明しています。 jQuery - still focuses on the desktop.
flickGal - jQueryプラグイン | stakamura
$(function(){ $(".yourElement").flickGal(); }); iPhoneでフリックギャラリーを実装するプラグインを作ってみました。アンドロイド等他のスマートフォンでは確認しておりません... iPhoneのtouchEventなどに関して、nogunoguさんの記事を大変参考にさせていただきました。（というか完全にnogunoguさんの研究のおかげです）感謝でございます！ デモ こちらをご覧ください。→ view demo ※PCでの挙動確認は確認できません。iPhoneで見てもらえると嬉しいです。 確認環境： iPhone3G ver 4.2.1 Safari, iPad ver 4.2.1 Safari ダウンロード githubついに導入できた！コミットの仕方なんか変かも知れません。 ダウンロード (GitHub) 実装手順（1〜4） 1.
http://neteye.github.com/touch-gallery.html
Demo Click on one of the images below to view it fullscreen. Use your fingers or cursor keys to flick through the images. Click again (or press esc) to return to this view. NETEYE Touch-Gallery A fullscreen photo gallery for touch-devices. Supported Browsers The plugin was written and optimized for Mobile Safari running on the iPad or iPhone 4. It also runs in Dektop Safari, Firefox 4, as well as
iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」
iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」 iPhone/iPadでダブルタップをJavaScriptで実装するで紹介してたダブルタップの実装方法をjQueryプラグインにしてみました。 利用方法 jQuery本体とjquery.event.dblTap.jsをhead要素などで読み込みます。 <script src="jquery-.min.js"></script> <script src="jquery.event.dblTap.js"></script> 後は「dblTap」をbindするとdblTapイベントが実装できます(クリックにも反応するようにしています)。 $("button").bind("dblTap",function(){ alert("duble tap"); }) デモ 初期設定では5
jQuery.flickable: iPhone and Android like flick scrolling plugin
See related links to what you are looking for.
HTML5ビデオを埋め込む。またiPhone, iPadで自動再生（autoplay）を行う｜WEB制作（html,css(スタイルシート) )｜プログラムメモ
HTML5ビデオを埋め込むコードは <video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer autoplay> </video> iPhone, iPadでautoplayを行うには <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1.3");</script> <script type="text/javascript"> jQuery.noConflict(); var j$ = jQuery; function fakeClick(fn) { var $a = j$('<a href="#" id="fakeClick">
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://retinajs.com/
html5-css3.jp - このウェブサイトは販売用です！ - スマートフォン 編集者 方法 サイズ 日本 ツール ブラウザ テスト リソースおよび情報