jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方
2024/01/13
divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあったのでメモ。
focusable
https://github.com/zzarcon/focusable
サンプル
https://taitan916.info/sample/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();
}
});
関連記事
-
-
jQueryの画像スライダー用プラグイン「slick」の使い方
jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...
-
-
スクロールしてもついてくる追尾型の広告を作る方法
スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...
-
-
formでファイルを選択した際にファイル名やサイズ、形式を調べる方法
フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...
-
-
JavaScriptのbeforeunloadイベントでページの離脱防止
何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、 ...
-
-
サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法
画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...