jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方

2015/01/08

divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあったのでメモ。

■focusable

■サンプル

http://sample.taitan916.info/focusable/

■使い方

jQueryとプラグインを読み込んだ上で以下のような形で使用する。

$(function(){
	$('.show').on('click', show);
	$('.hide').on('click', hide);

	function show() {
		var selector = $(this).attr('data-selector');
		Focusable.setFocus(
			$(selector),
			{
				fadeDuration: 500,	//フェードするスピード
				hideOnClick: true,	//他の要素をクリックした時にフォーカスを消す
				hideOnESC: true,	//ESCキーを押した時にフォーカスを消す
			}
		);
	}

	function hide() {
		Focusable.hide();
	}
});

$(function(){

$('.show').on('click', show);

$('.hide').on('click', hide);

function show() {

var selector = $(this).attr('data-selector');

Focusable.setFocus(

$(selector),

{

fadeDuration: 500, //フェードするスピード

hideOnClick: true, //他の要素をクリックした時にフォーカスを消す

hideOnESC: true, //ESCキーを押した時にフォーカスを消す

}

);

}

function hide() {

Focusable.hide();

}

});

- jQuery

: Ajaxでボタンとテキストボックス操作

ボタンを押して「https://aaa/bbb/ajax.php」からの返答を ...

: 複数のajax処理の結果をまとめて表示

同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...

: テキストエリアのリアルタイムプレビュー

テキストエリア内に書いた内容をリアルタイムでプレビューする機能が必要となり、教 ...

: Ajaxのクロスドメイン2

PHPも介せない場合。こちらの方がスマートでよさそう。 jsonpを使うみたい。 ...

: safariのみスクロール関連のイベントが発火しない

jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...

: jQuery UI Datepickerで日本の祝祭日を表示

やりたかった事は、jQueryのカレンダーピッカーで日本の祝祭日の色を変えると ...

: pjaxについてのメモ

ずっと気になっていたpjaxについてのメモ。 ■参考サイト http://chi ...

: jQueryのappendとprepend

よく忘れるのでメモ。 ■append(後ろに足す) http://semooh. ...

: POP広告をjQueryで再現する方法

サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...

: AjaxFileUploadで処理は実行できてもエラーが返る

AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...

PREV: スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア
NEXT: 画像の登録フォームにてjQueryプラグインを用いてWebカメラの映像を撮影させる方法

jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方

関連記事