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();
}
});
関連記事
-
-
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...
-
-
jQueryでformの各種パーツ(テキストボックス等)の操作まとめ
jQueryでフォームのセレクトメニューやラジオボタン等、各種パーツを操作するこ ...
-
-
jQueryで画像が存在すれば表示、なければノーイメージ画像を表示
やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...
-
-
ブラウザ上で何らかのファイルをダウンロードさせた際、ダウンロード完了のタイミングを検知する方法
ページ上でボタンをクリックすると画像やzipファイル等をダウンロードできるという ...
-
-
jQueryにてCookieを取り扱う「jquery-cookie」プラグインの利用方法
jQueryでcookieを簡単に取り扱える「jquery-cookie」プラグ ...