テクメモ このページをアンテナに追加 RSSフィード Twitter

2010-05-09

iPhoneのようにフリック操作でスクロールできるjQueryプラグインつくった

iPhoneやAndroid風にマウスでフリックスクロールできるようにするjQueryプラグインつくりました。

ページ末端を過ぎると戻るような動作を再現しています。ページ区切りを設定するとiPhoneのホーム画面のようなUIも実現できます。

現在はアルファ版として公開中。


デモ

デモ(ページ全体)

ダウンロード


コードサンプル

ページ一部をフリックできるようにする場合。

$('.selector').flickable();

ページ全体をフリックできるようにする場合。

$(window).flickable();

ページ区切りを作る場合。sectionオプションセレクタか要素を指定します。

$('.selector').flickable({
    section: '.content'
});

オプションの取り方などを含め、jQuery UIと同じような実装にしています。

詳しくは、http://lagoscript.org/jquery/flickable を参照してください。

とのさまとのさま 2010/06/29 04:15 aタグの中の文字列をクリック(タッチ)した場合、
mousedownの場合は、event.targetがaタグになるけど
touchstartの場合は、event.targetが#textになります。

なので、ページ内のリンクがクリックできません。

たとえば、以下のような感じで修正するといいかと思います。

if ('a' != (e.target.parentElement||e.target.parentNode).nodeName.toLowerCase() && !/^(a|input|textarea|select|option|button|embed|object)$/.test(e.target.nodeName.toLowerCase())) {
event.preventDefault();
}

lagos_onlagos_on 2010/07/01 17:09 こんにちは。

こんな罠があったとは。
touchesのeventではなく、親のeventだとtouchstartでもaタグが判別できるようなので
そのように修正しました。

ご連絡ありがとうございました!

dskymddskymd 2010/07/06 15:37 $('.selector').flickable('select', index);

↑のselectがうまくいきませんでした。変なところで止まってしまいます。

デフォルトの.ui-flickable-wrapperのpaddingを0にしたらうまくいきました。

lagos_onlagos_on 2010/07/06 22:07 ご連絡ありがとうございます。
再現する条件とかってわかりますか?調査してみます。

MitchellAveMitchellAve 2010/07/13 15:34 はじめまして、こちらのスクリプトを利用してiPhoneで画像ギャラりーページを作成しているのですが、どうしても画像タップでリンクすることが出来ません。もしよろしければ検証して頂けますでしょうか。

lagos_onlagos_on 2010/07/14 08:44 画像タップの件とあわせてもろもろ修正してみました。
iPhoneだとパフォーマンスが微妙な感じですが。。。
試してみて下さい。

http://lagoscript.org/jquery/flickable/download

MitchellAveMitchellAve 2010/07/14 15:49 ありがとうございます!iPhoneでリンクが有効になりました
確かにos3.1.3では挙動がちょっと怪しい部分もありましたが、iso4では問題無いようです。

swallowtailswallowtail 2010/07/23 18:03 デモページのdefaultのようなflickableを作ってiPhone用ページに配置した際に、横フリックスクロールをしたときは、現在の挙動でいいのですが、縦フリックスクロールしたときに、ページがスクロールされるようにしたいのですが、不可能でしょうか?
flickable領域で、縦フリックスクロールをすると、ページがとまってしまうので、少々不便なので・・・。

lagos_onlagos_on 2010/07/25 13:09 こんにちは。

確かにそのような動作の方がいいと思ったので試してみたところ、
iPhoneでは実現できたんですが、Androidでうまくいかなかったので、
とりあえずプラグインへの反映は見送りました。

iPhoneだけでよければjquery.flickable-1.0b3.jsを修正して試してみてください。

■467行目をコメントアウト
// event.preventDefault();

■482行目に挿入
if (!this.dragAxis) {
this.dragAxis = Math.abs(this.client.x - e.clientX) > Math.abs(this.client.y - e.clientY) ? 'x' : 'y';
}
if (!this.hasScroll[this.dragAxis]) return;

■517行目に挿入
this.dragAxis = undefined;

swallowtailswallowtail 2010/07/26 15:35 早速の返答ありがとうございます!
期待したとおりの動きになりました。
ありがとうございました。

swallowtailswallowtail 2010/07/26 18:03 何度もすみません。。
上記処理を入れたところ、フリックの終了時にフリック領域が一瞬ちらつきます。(iPhoneの場合)
クリックイベントが発生しているような感じ?
これをちらつかないようにする手段はありますか??

lagos_onlagos_on 2010/07/27 13:48 現象がよくわからなかったのでこれで直るか定かでないんですが、
ちょっと改良してみました。↓でどうですか。

■482行目に追加した分を削除して、480行目に挿入
if (!this.dragAxis) {
this.dragAxis = Math.abs(self.client.x - e.clientX) > Math.abs(self.client.y - e.clientY) ? 'x' : 'y';

if (!this.hasScroll[this.dragAxis]) {
this.container.unbind('.flickable')
.bind('touchstart.flickable mousedown.flickable', function(event) {
return self.dragStart(event);
}).bind('click.flickable', function(event) {
return self.clickHandler(event);
});
this.dragAxis = undefined;
return;
}
}

swallowtailswallowtail 2010/07/28 17:20 上記方法では解決しませんでしたが、フリック領域に
-webkit-tap-highlight-color: transparent;
を設定することで解決しました。

回答ありがとうございました。

lesser28lesser28 2010/08/05 00:15 はじめまして。ありがたく使わせていただいております。
フリック領域内の各コンテンツにブロックリンクを設定したのですが、iPhoneでフリックするとスクロール動作中にリンクしそうになってしまいます。
(実際には飛ばないのですが、いちいちアドレスバーが出てきてしまう)
フリック動作中にはリンクが反応しないようにすることなどは可能でしょうか…

lagos_onlagos_on 2010/08/05 23:51 調査してみたんですが、今のところ解決方法がわかりませんでした。
iPhoneのsafariは独自仕様が多くてちょっとコントロールしきれてないです・・・すいません。
リンクに関してはaタグではなく、onclickとかでリンクさせたほうが良いかもしれません(未検証ですが)。

lesser28lesser28 2010/08/07 13:30 onclickだと余計にリンクの感度が上がってしまうというか、フリック中に一瞬触れただけでリンクしてしまいました。。。
ひとまずaでリンクさせつつ、自力でも何とかしてみます。
ご回答ありがとうございました!

手とリス手とリス 2010/09/15 12:10 二重投稿で失礼します
(公式の方にも記述してしまいましたスイマセン)

一点質問させてください。
flickableを適用した際、その要素の周りに余白が作成されますが、この余白を削除する事は可能なのでしょうか?

お忙しい中、お手数ですが、よろしくお願いします。

soujisouji 2010/09/16 17:23 はじめまして。
すばらしいプラグインですね。
フリック終了時の、反動で戻る動きを削除することはできるのでしょうか?
ちょうど、iPhoneのホーム画面のようなものができたらいいと考えています。

lagos_onlagos_on 2010/09/16 18:06 手とリスさん

余白部分ありきなので削除できません。
必要でしたら改造してもらうしかないです。


soujiさん

iOS4が出る前につくったので動作が違ってしまってますね。
そのようなオプションはないのですが、
597〜603行目あたりを変更すると、こちらは割と簡単に行き過ぎた時の動作を変えることができると思います。

現在別プロジェクトの作業をしているため、サポートにあまり時間がさけない状況です。
申し訳ないですがご了承ください。

soujisouji 2010/09/16 18:25 早速の回答ありがとうございます!
教えていただいた部分を調べてみます。

NomuraNomura 2010/10/01 19:06 二重投稿で失礼します
(公式の方にも記述してしまいましたスイマセン)
ページフリックの左右の揺れを消すと、ページの止まる位置がずれます。下記の様に変更して左右の揺れを消しました。
velocity[axis] = v ? 0 : -1 * 0 * extension[axis];

どこを変更すれば良いでしょうか。
お忙しい中恐れ入りますが、よろしくお願いいたします。

NomuraNomura 2010/10/01 19:09 二重投稿で失礼します
(公式の方にも記述してしまいましたスイマセン)
ページフリックの左右の揺れを消すと、ページの止まる位置がずれます。
下記の様に変更して左右の揺れを消しました。
velocity[axis] = v ? 0 : -1 * 0 * extension[axis];

どこを変更すれば良いでしょうか。
お忙しい中恐れ入りますが、よろしくお願いいたします。

ZonoZono 2010/12/16 14:42 初心者であまりよく分からないのですが質問です。

セクションの止まる位置をずらしたいのですがどうしたらいいのでしょうか。

デフォルト設定ですと、ページの左寄りで止まりますが、画面中央で止めるようにしたいのです。

beamsのiphoneのサイトのようなイメージです。

どうぞよろしくお願いいたします。

playbeyondplaybeyond 2011/11/15 02:33 素晴らしいプラグインをありがとうございます。
一点質問があるのですが、
DemoのGridでselectメソッドを使用して対象セクションまでスクロールしていますが、table#select_box部分に現在選択されている位置を表示したいのです。例えばtdにclassなどを追加することは可能でしょうか?

あづあづ 2012/01/25 12:05 とても直感的でわかりやすいプラグインありがとうございます
一つ質問なのですが、フリッカブル領域の先頭と末尾に移動した時にイベントを取りたいのですが
どのように実装すればいいでしょうか?
先頭はソースを少し変更してできたのですが末尾がむずかしくて…
お時間があれば御教唆いただければ幸いです

ponnponnponnponn 2012/02/10 12:03 ブロックにリンク貼るとAndroidだと全然ダメです・・・

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

リンク元