勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

   2024/01/13  jQuery JavaScript

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 JavaScript

  関連記事

jQuery UIを用いた日付及び時間のピッカーの利用方法

jQuery UIを用いた日付及び時間のピッカーを実装したい。以下にソースコード ...

jQueryプラグインのDateTimePickerで年月日と時間のピッカーを実装する方法

jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...

スマホ対応のjQueryのカラーピッカープラグイン「excolor」の利用方法

以前の記事でカラーピッカープラグインのことを書いたけどスマホでは使えない。なので ...

「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法

slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...

videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法

Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...