jQuery.flickEndless

更新 2013/04/12 ver 1.0.3
ちょっと前にスマホで見かけるフリック操作で無限スクロールするドラムロール式 Date Picker用のプラグインを作ったのですが、jQuery animateを使っていたのでスマホではあまりスピードが出ずお蔵入りにしていました。
この度、CSS Tansform、Translate3dを使うように改造、合わせて横スクロールに対応してなんとか使えそうなモノになったので公開します。
縦もしくは横スクロールのみ対応しています。
flickScrollbarは無限スクロールに対応していない(そもそも無限スクロールのスクロールバーってどうなれば良いのか分からない??)のでこのプラグインでは使えません。

動作確認:iPad iPhone iPod Android(Tablet/Phone) Chrome(Windows) IE9(Windows) Safari(Max OSX10.7)

※今度は単独では使えると思う・・


使用例
// 横スクロール
$(selector).flickEndless();

// 縦スクロール
$(selector).flickEndless({
	vertical:true
});
					

使用例(デモ)

横スクロール (無限スクロールなし)

/
<h3>横スクロール (無限スクロールなし)</h3>
<div id="horizontal1" class="horizontal demo">
<ul>
<li><img src="data/CK001_L.jpg" /></li>
<li><img src="data/CK002_L.jpg" /></li>
<li><img src="data/CK003_L.jpg" /></li>
<li><img src="data/CK004_L.jpg" /></li>
<li><img src="data/CK005_L.jpg" /></li>
<li><img src="data/CK006_L.jpg" /></li>
<li><img src="data/CK007_L.jpg" /></li>
<li><img src="data/CK008_L.jpg" /></li>
<li><img src="data/CK009_L.jpg" /></li>
<li><img src="data/CK011_L.jpg" /></li>
<li><img src="data/CK012_L.jpg" /></li>
<li><img src="data/CK013_L.jpg" /></li>
<li><img src="data/CK014_L.jpg" /></li>
<li><img src="data/CK015_L.jpg" /></li>
<li><img src="data/CK022_L.jpg" /></li>
<li><img src="data/CK023_L.jpg" /></li>
<li><img src="data/CK024_L.jpg" /></li>
<li><img src="data/CK025_L.jpg" /></li>
<li><img src="data/CK026_L.jpg" /></li>
<li><img src="data/CK032_L.jpg" /></li>
</ul>
</div>
<div id="horizontal1_page">/</div>
<div class="text">
	<a href="javascript:void(0);" id="horizontal1_prev" class="backbtn">< PREV</a>
	<a href="javascript:void(0);" id="horizontal1_next" class="nextbtn">NEXT ></a>
</div>
						
$('#horizontal').flickEndless({
	onClick: function() {
		alert(this.outerHTML);
	},
	onPageChange: function() {
		$('#horizontal_page').html('page:'+this.page+' / total:'+this.count);
	}
});

$('#horizontal1_prev').click( function() {
	$('#horizontal1').flickEndless('prev');
	return false;
});
$('#horizontal1_next').click( function() {
	$('#horizontal1').flickEndless('next');
	return false;
});

						

横スクロール (無限スクロール)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
/
<h3>横スクロール (無限スクロール)</h3>
<div id="horizontal2" class="horizontal demo">
<ul>
<li><div>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
<li><div>4</div></li>
<li><div>5</div></li>
<li><div>6</div></li>
<li><div>7</div></li>
<li><div>8</div></li>
<li><div>9</div></li>
<li><div>10</div></li>
<li><div>11</div></li>
<li><div>12</div></li>
<li><div>13</div></li>
<li><div>14</div></li>
<li><div>15</div></li>
<li><div>16</div></li>
<li><div>17</div></li>
<li><div>18</div></li>
<li><div>19</div></li>
<li><div>20</div></li>
<li><div>21</div></li>
<li><div>22</div></li>
<li><div>23</div></li>
<li><div>24</div></li>
</ul>
</div>
<div id="horizontal2_page">/</div>
<div class="text">
	<a href="javascript:void(0);" id="horizontal2_prev" class="backbtn">< PREV</a>
	<a href="javascript:void(0);" id="horizontal2_next" class="nextbtn">NEXT ></a>
</div>
						
$('#horizontal2').flickEndless({
	onClick: function() {
		alert(this.outerHTML);
	},
	onPageChange: function() {
		$('#horizontal1_page').html('page:'+this.page+' / total:'+this.count);
	}
});

$('#horizontal2_prev').click( function() {
	$('#horizontal2').flickEndless('prev');
	return false;
});
$('#horizontal2_next').click( function() {
	$('#horizontal2').flickEndless('next');
	return false;
});

						

縦スクロール (無限スクロールなし)

$('#verticaly1').flickEndless({
	endless:false,
	vertical:true
});

$('#verticaly1_prev').click( function() {
	$('#verticaly1').flickEndless('prev');
	return false;
});
$('#verticaly1_next').click( function() {
	$('#verticaly1').flickEndless('next');
	return false;
});

						

縦スクロール (無限スクロール)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
$('#verticaly2').flickEndless({
	vertical:true
});

$('#verticaly2_prev').click( function() {
	$('#verticaly2').flickEndless('prev');
	return false;
});
$('#verticaly2_next').click( function() {
	$('#verticaly2').flickEndless('next');
	return false;
});
						

縦スクロール (無限スクロール clickable指定)

$('#verticaly2').flickEndless({
	vertical:true,
	clickable: 'a, input',
	onClick: function() {
		alert(this.outerHTML);
	}
});
						

お蔵入りになった原因のドラムスクロール式のdatePicker(復活版)

year
month
day

              jquery.flickEndlessのダウンロード

              ver 1.0.2 (2013/04/10)
              ドラムスクロール式DatePicker用に作ったものの思ったほどのスピードが出ずお蔵入りしていたモノをCSS Tansform、Translate3dを使うように改造、合わせて横スクロールに対応
              ver 1.0.3 (2013/04/12)
              destroy 時の復元処理に問題があり修正しました。

              jquery.flickEndlessの使い方

              Options

              プロパティ 省略値 説明
              endless true/false true 無限スクロールの要否を指定します。
              increment 整数 1 無限スクロールで使用するクローンページのセット数(前後で1セット)を指定します。
              ディフォルトはオリジナルの前後スクロール用に1セットのクローンを作成します。
              ※孫要素の数が10個より少ない場合はこの値を増やしてください。
              vertical true/false false 縦方向スクロールを指定します。
              useCssTansform true/false true スクロールをCSS Tansformを使って行います。
              CSS Tansformの使えない環境では自動的にfalseになります。
              handle selector 内包している最初の子要素 ドラッグの対象とする要素を指定します。
              省略すると内包している最初の子要素が選択されます。
              clickable selector 内包している孫要素 クリックの対象とする要素をリスト形式で指定します。
              省略すると内包している孫要素が選択されます。
              distance ピクセル値 3 指定されたpixelを超えたところまで引きずらないと、ドラッグが開始されないようにします。
              タッチディバイスはタッチした時に、微妙なズレを感知しtouchmoveイベントが発生する場合があります。
              ratio 整数 5 フリックした時に移動する移動量の倍数を指定します。
              値を大きくすると早くなりますが、incrementも合わせて大きくしないと無限スクロールの折り返しが間に合わなくなることがあります。
              hSize ピクセル なし 自動でサイズが取得できない場合やスクロール単位をディフォルトから変更したい時に孫要素の横のサイズを指定します。
              vSize ピクセル なし 自動でサイズが取得できない場合やスクロール単位をディフォルトから変更したい時に孫要素の縦のサイズを指定します。
              forceTranslate3d true/false true Translate3d使用するかどうかを指定します。
              スマホでは画像を使っていると、falseにするとスクロール時にちらつくことがあります。
              turn 整数 自動計算 無限スクロールで折り返すクローンページの先頭ページと最終ページからの位置を指定します。
              ディフォルトは自動計算で、追加されるクローンページの半分の位置で折り返します。
              duration ミリ秒 300ms 停止位置までのアニメーション一回分の時間の長さを指定します。
              onClick function なし タッチまたがクリックイベントが発生した時に実行する関数を指定します。
              onPageChange function なし 改ページが発生した時に実行する関数を指定します。

              Events

              scrollStart スクロールを開始した時に発生するイベント
              scrollStop スクロールを終了した時に発生するイベント

              Methods

              init 書式:$(selector).flickEndless('init');
              関連要素の位置やサイズなどを再計算する。要素を更新した時に呼び出します。
              内部要素に画像を取り込む場合は、画像の読み込みが完了してから呼び出さないと、サイズが正確に取得できない事があります。
              enable 書式:$(selector).flickEndless('enable');
              スクロールを有効化します。
              disable 書式:$(selector).flickEndless('disable');
              スクロールを無効化します。
              locate 書式:$(selector).flickEndless('locate', ページ数, callback);
              指定したページにジャンプします。

              例:$(selector).flickEndless('locate', 5);
              next 書式:$(selector).flickEndless('next', 移動ページ数, callback);
              次のページにジャンプします。(ページ数を指定すると指定したページ数進みます)

              例1:$(selector).flickEndless('next');
              例2:$(selector).flickEndless('next', 2);
              prev 書式:$(selector).flickEndless('prev', 移動ページ数, callback);
              前のページにジャンプします。(ページ数を指定すると指定したページ数戻ります)

              例1:$(selector).flickEndless('prev');
              例2:$(selector).flickEndless('prev', 3);
              silentGoto 書式:$(selector).flickEndless('silentGoto', ページ数);
              locateと異なり、指定したページにアニメーション無しでジャンプします。

              例1:$(selector).flickEndless('silentGoto', 7);
              ※callbackは設定されていません。
              destroy 書式:$(selector).flickEndless('destroy');
              自動生成したオブジェクトを破棄し、対象エレメントを元の状態に戻します。
              option 書式:$(selector).flickEndless('option', key, value);
              オプションを設定もしくは取得します。valueが省略されると値を取得します。

              例1:$(selector).flickEndless('option', key);
              例2:$(selector).flickEndless('option', { key1: value1, key2: value2 .... } );

              マークアップ

              ※flickEndlessは、自動的にこのようなマークアップを行います。
              						
              	<div>	・・・[ 対象の要素 (selector) ]
              	  <ul>
              	    <li>..</li>
              	    <li>..</li>
              	    <li>..</li>
              	    <li>..</li>
              	    <li>..</li>
              
              	    <li class="ui-flickendless_clone">..</li>	(追加)
              	    <li class="ui-flickendless_clone">..</li>	   |
              	    <li class="ui-flickendless_clone">..</li>	   |
              	    <li class="ui-flickendless_clone">..</li>	   |
              	    <li class="ui-flickendless_clone">..</li>	(追加)
              
              	    <li class="ui-flickendless_clone">..</li>	(追加)
              	    <li class="ui-flickendless_clone">..</li>	   |
              	    <li class="ui-flickendless_clone">..</li>	   |
              	    <li class="ui-flickendless_clone">..</li>	   |
              	    <li class="ui-flickendless_clone">..</li>	(追加)
              	  </ul>
              	</div>
              					

              また、flickEndlessは対象の要素のStyle属性を書き換えますので、動的にStyle属性を変更するようなページの場合は、要素をDIVタグ等で囲んでStyleを指定する事をお勧めします。
              						
              	<div style="margin-top:5px; float:left;">  ・・・ 囲んでStyle指定
              		[ 対象の要素 (selector) ]
              	</div>
              					

              ワンポイント

              jQuery.flickEndlessのページ