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

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

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

: pjaxについてのメモ

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

: lightboxで画像拡大時に文字タイトルとリンクをつける

lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...

: 画像をドラッグ&ドロップでアップロード

■2015/04/15追記以下記事の方が新しくて詳しい。 http://tai ...

: クリップボードの操作

<? /* クリックでクリップボードにコピーする。 http://zxcv ...

: 要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...

: jquery.cookie.jsでcookieを取り扱う

機能拡張の依頼があってそのページを見たら jquery.cookie.jsが読み ...

: formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても内容は送信さ ...

: classの取り扱い

jQueryでclassを扱う際、 //id=aaaにclass=testを付与 ...

: submit関連のjQuery2

<?php error_reporting(E_ALL & ~E_ ...

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

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

関連記事