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

: リアルタイムプレビュー時の改行とテーブルの上部揃え

■サンプル http://sample.taitan916.info/previ ...

: adblock(広告削除)設定している場合はページを表示させない

iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...

: 八地方区分→都道府県→路線→駅名の連携したセレクトメニュー

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

: jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

: 簡単にtable内をソート

やりたかった事は、・テーブル内でのソート・内容は文字、数値、日時・PHPじ ...

: jQueryのプラグインでカラーコードを視覚的に選択

カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、 ...

: 画像をサムネイル⇔クリックで拡大(lightbox)

画像をサムネイル表示してクリックしたら大きく表示するというのがlightbox ...

: テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、ユーザー用でも管理用でも使えそう。 ...

: FormDataを使ったAjax通信がiPhoneのみエラー

FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAn ...

: getElementsByTagName

うろ覚えだけど業務中に、 document.getElementById('aa ...

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

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

関連記事