http://lagoscript.org/jquery/flickable/documentation的连接貌似被墙了，所以在这里记录一下。
------------------------------------
jQuery.flickable
iPhone and Android like flick scrolling plugin
Options
第一引数にオブジェクトを渡すことでオプションを設定することができます。初期化後はoptionメソッドで設定を変更できます。
cancel
- Type:
- Element, Selector
- Default:
マッチした要素のフリック操作をキャンセルする。
$('.selector').flickable({cancel: ':input'});disabled
- Type:
- Boolean
- Default:
- false
flickableを有効(false)、もしくは無効(true)にする。
$('.selector').flickable({disabled: true});elasticConstant
- Type:
- Float
- Default:
- 0.16
スクロールバック（自動で基準位置まで戻る）時の弾性定数。0に近いほどゆっくりとなる。
$('.selector').flickable({elasticConstant: 0.15});friction
- Type:
- Float
- Default:
- 0.96
フリック（慣性移動）時の摩擦係数。0に近いほど早く減速する。
$('.selector').flickable({friction: 0.8});section
- Type:
- Element, Selector
- Default:
指定した要素(ページ区切り、セクション)を基準にスクロールするようになる。
$('.selector').flickable({section: '.section'});Events
コールバック関数はイベントオブジェクトを引数にとります。falseを返すとイベントをキャンセルできます。
change
- Type:
- flickchange
選択されているセクションが変更された時に発生するイベント。第2引数で選択された要素と、前回選択されていた要素を持つオブジェクトを受け取る。
$('.ui-flickable').bind('flickchange', function(event, ui) {
ui.newSection // jQuery object, selected section
ui.oldSection // jQuery object, previous section
});$('.selector').flickable({
change: function(event, ui) { ... }
});$('.selector').bind('flickchange', function(event, ui) {
...
});drag
- Type:
- flickdrag
ドラッグでマウス（指）が移動した時に発生するイベント。
$('.selector').flickable({
drag: function(event) { ... }
});$('.selector').bind('flickdrag', function(event) {
...
});dragStart
- Type:
- flickdragstart
ドラッグを開始した時に発生するイベント。
$('.selector').flickable({
dragStart: function(event) { ... }
});$('.selector').bind('flickdragstart', function(event) {
...
});dragStop
- Type:
- flickdragstop
ドラッグをストップした時に発生するイベント。
$('.selector').flickable({
dragStop: function(event) { ... }
});$('.selector').bind('flickdragstop', function(event) {
...
});flick
- Type:
- flick
フリック時に発生するイベント。
$('.selector').flickable({
flick: function(event) { ... }
});$('.selector').bind('flick', function(event) {
...
});scrollBack
- Type:
- flickscrollback
スクロールバック（自動で基準位置まで戻る）時に発生するイベント。
$('.selector').flickable({
scrollBack: function(event) { ... }
});$('.selector').bind('flickscrollback', function(event) {
...
});Methods
第一引数にメソッド名を渡すことでメソッドを呼び出すことができます。
destroy
flickableの機能を完全に削除し、初期化前の状態に戻す。
$('.selector').flickable('destroy');disable
flickableを無効にする。
$('.selector').flickable('disable');enable
flickableを有効にする。
$('.selector').flickable('enable');option
オプションを設定もしくは取得する。valueが省略されると値を取得する。オブジェクトを渡すことで、一度に複数のオプションを設定できる。
// setter
$('.selector').flickable('option', optionName, value);
// Set multiple options
$('.selector').flickable('option', options);
// getter
var value = $('.selector').flickable('option', optionName);refresh
関連要素の位置やサイズなどを再計算する。要素を更新した時に呼び出す。
$('.selector').flickable('refresh');select
対象セクションまで自動スクロールしながら移動する。第2引数はゼロから始まるセクションのインデックス番号。
$('.selector').flickable('select', index);Theming
flickableは自動的にこのようなマークアップを行います。
<body class="ui-flickable">
<div class="ui-flickable-container">
<div class="ui-flickable-wrapper">
<div class="ui-flickable-content">
content here
</div>
</div>
</div>
</body>Cursor and Padding color
フリック操作可能な範囲のカーソルを変更したり、余白部分のカラーを変更する場合はCSSでスタイルを設定します。
.ui-flickable-container {
cursor: pointer;
background-color: black;
}
.ui-flickable-disabled .ui-flickable-container, .ui-flickable-canceled {
cursor: default;
}
