jQuery.flickhelper

更新 2013/04/14 ver 0.1.1
jQuery.flickSimple.js や jQuery.flickable.js に、iPhone風のスクロールバーがあれば良いのに・・・
と思って作ってみたのが jQuery.flickScrollbar でした!
でも今度は、それに加えて <a>タグだけでなく、他のタグでもクリックイベントが使えればなぁ・・
と言うことでまた作ってみました!

※また単独では使えないと思う・・


ホントにつまんないプログラムですが、自分の中では「distance」オプションが結構具合が良いので公開する事にしました!
flickable さんは余白を生成するのでDataGridみたいな構造には不向き?なようなので、最初はflickSimple さんから対応です。

使用例
$(selector).flickhelper({
	onClickHandler: function() {
		[ Clickされた場合の処理を記述 ]
	}
});					

jQuery.flickSimple での使用例(デモ)

「cancel」指定あり('a, input')

イベント:
<div id="basic" class="flickSimple">
<ul>
<li><div><a href="#1">1</a><br /><input type="button" id="button1" value="button 1" /></div></li>
<li><div><a href="#2">2</a><br /><input type="button" id="button2" value="button 2" /></div></li>
<li><div><a href="#3">3</a><br /><input type="button" id="button3" value="button 3" /></div></li>
<li><div><a href="#4">4</a><br /><input type="button" id="button4" value="button 4" /></div></li>
<li><div><a href="#5">5</a><br /><input type="button" id="button5" value="button 5" /></div></li>
<li><div><a href="#6">6</a><br /><input type="button" id="button6" value="button 6" /></div></li>
<li><div><a href="#7">7</a><br /><input type="button" id="button7" value="button 7" /></div></li>
<li><div><a href="#8">8</a><br /><input type="button" id="button8" value="button 8" /></div></li>
<li><div><a href="#9">9</a><br /><input type="button" id="button8" value="button 9" /></div></li>
<li><div><a href="#10">10</a><br /><input type="button" id="button8" value="button 10" /></div></li>
<li><div><a href="#11">11</a><br /><input type="button" id="button8" value="button 11" /></div></li>
<li><div><a href="#12">12</a><br /><input type="button" id="button8" value="button 12" /></div></li>
</ul>
</div>
						
$('#basic').flickSimple({
	lock: true
});
$('#basic').flickhelper({
	cancel:'a, input',
	onTouchstartHandler: function() {
		$('#event').html("Touchstartが発生");
	},
	onTouchendHandler: function() {
		$('#event').html("Touchendが発生");
	},
	onClickHandler: function() {
		alert(this.outerHTML);
	},
	onFlickstartHandler: function() {
		$('#event').html("Flickstartが発生");
	},
	onFlickendHandler: function() {
		$('#event').html("Flickendが発生");
	}
});
						

jQuery.flickhelper のダウンロード

ver 0.0.1 (2013/03/29)
flickSimple 対応版
ver 0.1.1 (2013/04/14)
clickイベントとcamcel対象の処理方法を変更、合わせてiPhoneのalertに対する干渉(?)に対応

jquery.flickhelperの使い方

Options

プロパティ 省略値 説明
handle selector 内包している最初の子要素 ドラッグの対象とする要素を指定します。
省略すると内包している最初の子要素が選択されます。
cancel selector なし 対象外にしたい要素をリスト形式で指定します。
distance ピクセル値 3 指定されたpixelを超えたところまで引きずらないと、ドラッグとして判定されないようにします。
タッチディバイスはタッチした時に、微妙な指のズレでtouchmoveイベントが発生する場合があり、jQuery.flickSimple.js や jQuery.flickable.jsではタップでは無く、微少なスクロールになってしまうことがあります。
onTouchstartHandler function なし タッチイベントが発生した時に実行する関数を指定します。
フリック操作、タップ操作の判断前の画面にタッチしたイベントです
onTouchendHandler function なし タッチイベントが終了した時に実行する関数を指定します。
onClickHandler function なし タップまたはクリックイベントが発生した時に実行する関数を指定します。
onFlickstartHandler function なし フリック操作の発生した時に実行する関数を指定します。
onFlickendHandler function なし フリック操作の終了した時に実行する関数を指定します。

Events

※なし

Methods

setTrigger 書式:$(selecter).flickhelper("setTrigger");
機能を有効化します。(動的に子要素を変更する場合に使用します)
clean 書式:$(selecter).flickhelper("clean");
全ての割り込みを消去し、機能を無効化します。(動的に子要素を変更する場合に使用します)
子要素を変更する前に実行すまします
destroy 書式:$(selecter).flickhelper("destroy");
自動生成したオブジェクトを破棄し、対象エレメントを元の状態に戻します。
option 書式:$(selector).flickhelper('option', key, value);
オプションを設定もしくは取得します。valueが省略されると値を取得します。

$(selector).flickhelper('option', key);
$(selector).flickhelper('option', { key1: value1, key2: value2 .... } );

マークアップ

※なし

jQuery.flickhelperのページ

ワンポイント