jQuery.flickable
iPhone and Android like flick scrolling plugin
Examples
Note: このページのサンプルはiPhoneやAndroid上のブラウザでも動作します。
Default
ドラッグとフリック操作で対象要素をスクロールできます。余白はスクロール方向と要素のサイズから自動的に判断され付け加えられます。
- Content 1
- Content 2
- Content 3
- Content 4
- Content 5
- Content 6
- Content 7
Section
セクションを設定するとその要素を基準にスクロールするようになります。iPhoneのホーム画面のようなUIを再現できます。
Section 1
Aenean duis penatibus habitasse nascetur porttitor, nascetur aliquam dapibus augue vut vut, aliquet adipiscing odio? Pulvinar phasellus! Rhoncus? Et porta integer et ac ac turpis, diam nunc nunc non, tincidunt.
Section 2
Dapibus adipiscing! Vut ac mauris integer nascetur dapibus, in aliquam, quis risus elementum mus elementum cum? Porta eros nisi ut. Vut sed vel ut et a porta magna lacus turpis.
Section 3
Nisi lorem tincidunt, ultricies rhoncus purus odio lorem odio proin platea in dis odio, sed, etiam! Ridiculus, elit enim rhoncus elit augue facilisis turpis! Adipiscing sagittis? Dis ultricies. Natoque duis.
Events
イベントが発生した回数をカウントします。ボタンでセクション設定のon/offを切り替えることができます。
- Content 1
- Content 2
- Content 3
- Content 4
- Content 5
-
Content 6
- dragStart: 0
- drag: 0
- dragStop: 0
- flick: 0
- scrollBack: 0
- change: 0
Grid
グリッド状にセクションを並べると斜め方向へのドラッグは制限されます。selectメソッドを使用すると対象セクションまでスクロールしながら移動できます。
Section 1
Auctor nunc adipiscing proin magna, diam enim duis, sed vut ac scelerisque. Scelerisque nec porttitor enim, est magna risus enim.
Section 2
Sit lorem montes, enim mattis risus, natoque montes! Augue arcu ultrices risus mauris mattis, lorem? Eros amet a turpis porta. Amet turpis dictumst scelerisque nisi.
Section 3
Phasellus turpis lorem non sed auctor ridiculus ridiculus turpis lorem ultrices in scelerisque lorem facilisis lorem. Elit in elementum rhoncus. Ultricies platea? Est et, eros.
Section 4
Magnis tristique tincidunt duis lorem odio. Egestas lacus, aliquet odio tincidunt rhoncus aliquet proin auctor, et? Augue, cras porta enim magnis, pulvinar. Enim. Arcu? Tortor.
Section 5
Nec quis. Adipiscing lacus ultricies! Ac elit hac turpis! Etiam nec elementum enim urna eu lectus, adipiscing amet facilisis tincidunt porttitor amet facilisis dolor sed.
Section 6
Odio urna lorem vel cursus amet est, dis lacus enim, dictumst cum. Facilisis ac vel. Scelerisque massa pellentesque? Rhoncus et. Platea, vut ultricies. Massa tristique.
Section 7
Elit scelerisque ut, platea turpis enim magna, massa. Quis amet! Eros. Sed! Massa diam nascetur, ac duis sit, mauris mid urna cum? Sit mauris. Rhoncus.
Section 8
Lectus et sagittis dolor nec? Porttitor, est, in tristique quis tempor! Turpis arcu ridiculus proin penatibus? Augue porta pulvinar, aliquam turpis, vel porttitor nisi aliquet.
Section 9
Tortor purus nec, tempor turpis et, aliquet enim nisi ridiculus augue et ac augue tempor. Montes a sed! Turpis, eros cum mattis magna porttitor, elementum.
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
Options & Theming
cancelオプションでドラッグをキャンセルする要素を指定したり、elasticConstantオプションとfrictionオプションでスクロール速度の設定ができます。カーソルや余白カラーはCSSで変更できます。
Disable/Enable the flickable.
Non montes cursus pellentesque duis et purus etiam, dapibus, magna nec aliquam mus augue enim? Cursus, parturient est, auctor cum aenean cras dictumst turpis, odio duis vut habitasse, mauris nunc et amet? Arcu et massa mattis parturient cum sit magna vel tincidunt nec turpis parturient rhoncus turpis proin. Eros sagittis.
Nunc! Auctor ac tristique adipiscing dolor, quis cursus elementum, scelerisque lacus porta magna duis aliquam, in lacus lacus elementum turpis nascetur mattis turpis mid arcu placerat scelerisque odio! Porttitor facilisis tristique amet porta, lacus etiam nascetur amet? Elementum habitasse dignissim amet urna nec in augue? Mauris ac vel dictumst.