フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

レスポンシブのJS切り替え

CSSメディアクエリみたいに、
レスポンシブでJS切り替えを書く。

//──────────────────────────────────
//レスポンシブJS切り替え
//──────────────────────────────────
$(function() {
    var windowWidth = $(window).width();
    var breakpoint = 768;
    var idTimer = null;
    var eventFlg = "";

    // ──────────────────────────────────
    // 初期実行
    // ──────────────────────────────────
    resizeInit();

    // ──────────────────────────────────
    // リサイズ
    // ──────────────────────────────────
    $(window).on('resize', function() {
        clearTimeout(idTimer);
        idTimer = setTimeout(function() {
            resizeInit();
        }, 300);
    });


    // ──────────────────────────────────
    // リサイズ時に実行
    // ──────────────────────────────────
    function resizeInit() {

        windowWidth = $(window).width();

        // PCの場合
        if (breakpoint <= windowWidth) {
            eventFlg = "pc";
            resetClassPC();

        // SPの場合
        } else if (breakpoint > windowWidth) {
            eventFlg = "sp";
            resetClassSP();
        }

    }


    // ──────────────────────────────────
    // for PC
    // ──────────────────────────────────

    // ──────────────────────────────────
    // リセット
    // ──────────────────────────────────
    function resetClassPC() {
    }


    // ──────────────────────────────────
    // それぞれのイベントの始めにif文でどっちか指定するルールだけ踏襲しつつ、
    // あとは好きにSPのコードを書く
    // (関数化するといいかも)
    // ──────────────────────────────────
    // ──────────────────────────────────
    // 例:gnavShow
    // ──────────────────────────────────
    $('.js-gnavBtn').on('click', function() {
        //SP版のみで実行
        if (eventFlg != "sp") return true;

        $('.js-gnav').addClass('is_active');
    });
    $('.js-gnavCloseBtn').on('click', function() {
        //SP版のみで実行
        if (eventFlg != "sp") return true;

        $('.js-gnav').removeClass('is_active');
    });




    // ──────────────────────────────────
    // for SP
    // ──────────────────────────────────

    // ──────────────────────────────────
    // リセット処理
    // ──────────────────────────────────
    function resetClassSP() {
    }


    // ──────────────────────────────────
    // それぞれのイベントの始めにif文でどっちか指定するルールだけ踏襲しつつ、
    // あとは好きにSPのコードを書く
    // (関数化するといいかも)
    // ──────────────────────────────────
    // ──────────────────────────────────
    // 例:gnavShow
    // ──────────────────────────────────
    $('.js-gnavBtn').on('click', function() {
        //SP版のみで実行
        if (eventFlg != "sp") return true;

        $('.js-gnav').addClass('is_active');
    });
    $('.js-gnavCloseBtn').on('click', function() {
        //SP版のみで実行
        if (eventFlg != "sp") return true;

        $('.js-gnav').removeClass('is_active');
    });

});

ポイント

それぞれのイベントの始めにif文でどっちか指定する。
pc、spは関数化して引数で呼び出してもOK。

$('.selector').on('click', function() {
    //SP版のみで実行
    if (eventFlg != "sp") return true;

    console.log('Hello world!!!');
});

PC/SP版でリセットすることがあれば、
resetClassSP()リセット用関数をつくったのでそこで指定。

function resetClassSP() {

}

まとめ

レスポンシブェ…。

[紹介元] jQueryタグが付けられた新着記事 – Qiita レスポンシブのJS切り替え

コメント

記事に戻る

コメントを残す