jQuery.flickSimple.js

Demos

Basic

Snap first item width

No snap

Verticaly

Both

< PREV NEXT >

Switch Paginate (now:)

Toggle flick disabled

Flick scroll

with indicator, controllers and animation.

< PREV NEXT >

※アイコンはNIXUS Icon Packを使わせていただきました。

特徴

iPhoneの特徴的なインタフェースであるフリック操作を、Webサイト上で実現するための jQueryプラグインです。

同じような動作をするプラグインは他にもありますが、このプラグインについては以下のような目的のもとに作りました。

フリック動作のみを実装する
見た目に関連する部分は、なるべく自由にできるようにする
その代わりに、拡張しやすいようにする
- 内部のパラメータに簡単にアクセスできるようにする
- コールバック関数を用意する
iPhone、Androidだけでなく、PCのブラウザ上でも動作させたい
- IE6でも動いた
- iPhone、Safari等、CSSアニメーションが使えるものは使う
iPhone、Androidの縦持ち・横持ちに対応する
子要素の中にアンカーや画像があっても大丈夫
- Macの場合、画像がドラッグされてしまわないように対処
同ページ内に複数設置できるようにする

指定しただけでは、ナビゲーションやインジケータは表示されませんので、JavaScriptの初心者向けではありませんが、いろいろと機能を加えたい、JavaScriptやCSSを自分で組める方には、便利に使っていただけるのではないかと思っています。

Download

https://github.com/makog/jQuery.flickSimple.js (gitHub)

使い方

HTML

外枠を表すエレメントの中に、<ul> <li> で要素をリストにして並べます。


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.flicksimple.js"></script>
<div id="flick">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    ...
  </ul>
</div>

※本来は中に入れる要素はどのようなタグでも問題ありませんが、ここではわかりやすく、<ul> <li>としています。

CSS

動かす要素を横並び、あるいは縦並びにします。


#flick {
	width: 100%;
	position: relative; /* IE6・7の overflowバグ回避 */
	overflow: auto;     /* JavaScript無効時にスクロール表示させたいから */
}

#flick ul {
	display: block;
	width: 400%;
	margin: 0;
	padding: 0;
}

#flick ul li {
	float: left;
	list-style-type: none;
	width: 5%;
}

スマートフォンでは横持ち・縦持ちがあります。横持ちの時には以下のように各エレメントのclassに「landscape」が割り当てられますので、表示を変化させたい場合に使えます。


<div id="flick" class="landscape">
  <ul class="landscape">
    <li class="landscape">1</li>
    <li class="landscape">2</li>
    <li class="landscape">3</li>
    <li class="landscape">4</li>
    ...
  </ul>
</div>

JavaScript

外枠を表すエレメントのjQueryオブジェクトに、「.flickSimple()」するだけです。実行時のオプションについては、以下をご参照ください。


$('#flick').flickSimple( {
	// some options...
} );

Options

実行する際の引数でいくつかの動作が変更できます。

target

動かすエレメントを指定します。省略した場合は、内包している最初の子要素が自動的に指定されます。

disabled

trueにするとフリックによるスクロールを無効化します。falseにすると有効になります。falseの場合でも、フリックを無効にするだけなのでmoveとgoToによる移動は可能です。省略した場合のデフォルトはfalseです。

snap

ページ区切りの仕方を指定します。以下のものが指定できます。

element（デフォルト値）
: 外枠を表すエレメントの横幅でページを区切ります。
first: targetの子要素のうち最初のもの（最初のli）の横幅でページを区切ります。子要素一つ一つをページとしたい時に便利です。
smallest: targetの子要素のうち、最も横幅が小さいもの横幅でページを区切ります。
数値: 指定されたピクセル数でページを区切ります。
0 または空白文字: ページ区切りが行われなくなります。

ratio

フリックのスピードをどれぐらい反映させるかを指定します。デフォルトは「5」で、大きい値を指定するほど遅いスピードでも多く移動します。

duration

アニメーションの長さを指定します。デフォルトは0.6秒です。

lock

iPhoneを使用している場合、ページ全体のスクロールを固定するかどうかを指定します。Androidの場合はこの指定は無効で、常にロックされた状態になります。デフォルトは false（ロックしない）です。

horizontal

縦方向にフリック（？）させたい場合には、true を指定します。省略した場合のデフォルトは falseです。iPhoneの場合、縦方向にスクロールするページで使用する際には、ページ全体の縦スクロールをロックするため、上記の lock を true に設定する必要があります。

vertical

横方向にフリックをさせたくない場合には、false を指定します。省略した場合のデフォルトは trueです。

paginate

例）「y」の場合
1	3	5
2	4	6

例）「x」の場合
1	2	3
4	5	6

horizontal、verticalが両方 tureの場合の、ページの割り付け方を指定します。「x」を指定した場合は横方向、「y」を指定した場合は縦方向にページを割り付けます。デフォルトは「x」です。

android

Androidかどうかを指定します。省略した場合は、UserAgentから自動的に判定します。

onChange

ページが切り替わった際に呼び出されるコールバック関数を指定します。

onResize

スマートフォンの場合は縦持ち・横持ちが変わった際、PCのブラウザの場合はウィンドウのサイズが変化した際に呼び出されるコールバック関数を指定します。

onAnimationEnd

フリック動作を行った後、アニメーションが終わったタイミングで呼び出されるコールバック関数を指定します。

onClick

targetの子要素にアンカーリンクを含む場合、そのアンカーリンクがクリック（タップ）された際に呼び出されるコールバック関数を指定します。この関数には、第一引数にクリック（タップ）されたエレメントのjQueryオブジェクトが渡されます。

Properties

以下のように、プロパティに設定された値を参照するすることができます。


  var prop = obj.flickSimple( 'プロパティ名' );

プロパティに設定された値を書き換える場合は、以下のようにします。


  obj.flickSimple( 'プロパティ名', '設定する値' );

あるいは、以下のようにflickSimpleオブジェクトを取り出してから操作することも可能です。


  var instance = obj.flickSimple();
  var prop = instance.プロパティ名;

上記のOptions（実行する際の引数）に指定した値は、全てプロパティとして参照・変更が可能です。

また、オプション以外に以下の内部状態を示すプロパティ値があります。これらは変更を加えないようにしてください。

page: 現在表示しているページ番号が取得できます。snapオプションでページ区切りをしない指定をした場合には、ページに関する値は意味を成さないものとなります。
pageWidth: 現在指定されているページ区切りの横幅ピクセル数が取得できます。
pageHeight: 現在指定されているページ区切りの高さピクセル数が取得できます。
pageLength: 全部で何ページあるかが取得できます。
startX: タッチが開始されたX座標が取得できます。タッチしてない場合には null になりますので、タッチ中かそうでないかを判定するための値としても使えます。
currentX: targetエレメントの現在のX座標（ピクセル）が取得できます。
currentY: targetエレメントの現在のY座標（ピクセル）が取得できます。
touchable: ブラウザがタッチイベントに対応しているかどうかを取得できます。
webkit: ブラウザが「WebKitTransitionEvent」に対応しているかどうかを取得します。Androidの場合はこの値が trueになりますが、対応が中途半端なため、動作にCSSアニメーションは使用しないようにしています。

Methods

以下のように関数を実行できます。オプションで指定したコールバック関数についても、同じように実行することができます。


  var result = obj.flickSimple( '関数名', '引数1', '引数2', ... );

あるいは、プロパティと同じように、flickSimpleオブジェクトを抜き出してから実行することも可能です。


  var instance = obj.flickSimple();
  var result = instance.関数名( '引数1', '引数2', ... );

init: 初期化を行います。targetエレメントの中に変更を加えた場合は、initを呼び出してください。返値はflickSimpleオブジェクトです。
nextPage　引数：ページ数: 指定されたページ分、先のページに移動します。引数を省略した場合には、1ページ先に移動します。返値はflickSimpleオブジェクトです。
prevPage　引数：ページ数: 指定されたページ分、前のページに移動します。引数を省略した場合には、1ページ前に移動します。返値はflickSimpleオブジェクトです。
goTo　引数：ページ番号: 引数に指定したページに移動します。返値はflickSimpleオブジェクトです。
move　引数：X座標, Y座標（ピクセル数）: 指定された座標に移動します。返値はflickSimpleオブジェクトです。