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 Alert Dialogsで表示後に処理したい
最近携わったサイトの中でJavaScript内に「jAlert」とかいう記述があ ...
-
-
jQueryプラグインでクリップボードにコピーする方法(clipboard.js)
ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...
-
-
ajaxで複数のデータを渡したい
やりたい事はajaxで複数のデータを渡したい。 ■送信側 var data = ...
-
-
jQueryにて複数のajax処理のレスポンスをまとめて表示する方法
同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...
-
-
スクロールしてもついてくる追尾型の広告を作る方法
スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...