SONICMOOV Googleページ

jQueryでアコーディオンのプラグインを作成する方法 オプション設定編

jQueryでアコーディオンのプラグインを作成する方法 オプション設定編

  • このエントリーをはてなブックマークに追加

今回は「jQueryでアコーディオンのプラグインを作成する方法 スピード設定編」で作成したjQueryプラグインのコードに対して、さらに拡張を加えていきたいと思います。

アコーディオン関連の過去の記事

おさらい:前回のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryでアコーディオンのプラグインを作ってみよう</title>
</head>
<body>
    <div>
        <a href="#" id="trigger2">遅いアニメーションで開いてYO!</a>
        <p style="display: none;">遅〜〜〜〜く開きましたかね?</p>
    </div>
    <div>
        <a href="#" id="trigger3">速いアニメーションで開いてYO!</a>
        <p style="display: none;">速く開きましたかね?</p>
    </div>
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script>
        $.fn.accordion = function(speed) {
            speed = (typeof speed === 'undefined') ? 'fast' : speed;

            this.on('click', function(event) {
                event.preventDefault();
                $(this).next().slideToggle(speed);
            });
        };

        $(function() {
            $('#trigger2').accordion('slow');
            $('#trigger3').accordion('fast');
        });
    </script>
</body>
</html>

スピードだけじゃなくて、いろいろ変えたい!

アニメーションスピードだけではなく、以下の内容も変更できるように修正してみましょう。

  • 開閉対象を指定できるようにする(隣接要素以外に指定できるように)
  • 開閉する度に、任意のCSSクラス名をつけたり消したりする
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <style>
        .is_open {
            color: #fff;
            background-color: #ff0000;
        }
    </style>
    <title>jQueryでアコーディオンのプラグインを作ってみよう</title>
</head>
<body>
    <div>
        <a href="#" id="trigger2">遅いアニメーションで開いてYO!</a>
        <p style="display: none;">遅〜〜〜〜く開きましたかね?</p>
    </div>
    <div>
        <a href="#" id="trigger4">速いアニメーションで#target4を開いてYO!</a>
    </div>

    <p id="target4" style="display: none;">隣接要素じゃないけど開きましたかね?速く開いてる?</p>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script>
        $.fn.accordion = function(options) {
            options = options || {};
            options.speed = options.hasOwnProperty('speed') ? options.speed : 'fast';

            this.on('click', function(event) {
                event.preventDefault();

                var $trigger = $(this);
                var $target  = (!!options.target) ? $(options.target) : $trigger.next();

                $target.slideToggle(options.speed, function() {
                    if (!!options.toggleClass) {
                        $trigger.toggleClass(options.toggleClass);
                        $target.toggleClass(options.toggleClass);
                    }
                });
            });
        };

        $(function() {
            $('#trigger2').accordion({
                speed: 'slow',
                toggleClass: 'is_open'
            });
            $('#trigger4').accordion({
                speed: 'fast',
                target: '#target4'
            });
        });
    </script>
</body>
</html>

解説

これで、#trigger2と開閉対象要素は、開閉する度にis_openという名前のCSSクラス名を、トグル式につけたり消したりすることができるようになりました。(スピードもslowで設定しているとおり、遅いスピードで開閉しています。)
また、#trigger4をクリックすると、隣接要素ではなく#target4を開閉します。(スピードもfastで設定してるとおり、速いスピードで開閉します。)

このように、引数にオプション設定をして、関数の中で処理わけをすることによって、関数を無駄に増やさず、デフォルトとは違ったアコーディオンの動きを作ることができます。
このようなオプション設定は、オブジェクト型で渡すと、引数の順番を気にせず設定できて便利です。(オプション設定の数が少ないなら、直接渡してもよさそうですが。)

開閉した後に実行される処理を入れたい!

先ほどのソースのオプション設定に、開閉した後に実行される処理(コールバック関数)を追加してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryでアコーディオンのプラグインを作ってみよう</title>
</head>
<body>
    <div>
        <a href="#" id="trigger5">#target5を開く!</a>
    </div>
 
    <p id="target5" style="display: none;">#target5が開きました!</p>
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script>
        $.fn.accordion = function(options) {
            options = options || {};
            options.speed = options.hasOwnProperty('speed') ? options.speed : 'fast';
 
            this.on('click', function(event) {
                event.preventDefault();
 
                var $trigger = $(this);
                var $target  = (!!options.target) ? $(options.target) : $trigger.next();
 
                $target.slideToggle(options.speed, function() {
                    if (!!options.toggleClass) {
                        $trigger.toggleClass(options.toggleClass);
                        $target.toggleClass(options.toggleClass);
                    }
                    if (typeof options.onSlid === 'function') {
                        options.onSlid($trigger, $target, event);
                    }
                });
            });
        };
 
        $(function() {
            $('#trigger5').accordion({
                speed      : 'fast',
                target     : '#target5',
                toggleClass: 'is_open',
                onSlid: function($trigger, $target, event) {
                    alert( $trigger.text() ); //#target5を開く! という内容のアラートがでる
                    alert( $target.text() ); //#target5が開きました! という内容のアラートがでる
                    alert( event.type ); //click という内容のアラートがでる
                }
            });
        });
    </script>
</body>
</html>

option.onSlidに、関数(開閉した後に実行される処理)を渡すと、アコーディオンプラグインの中(クリックのコールバック関数の中)で実行されるようにになりました。
上記のソースの例だと、開閉が完了する度にアラートが出ます。

いかがでしたか?!
3回にわたって、アコーディオン機能を例に、jQueryプラグインの作り方を書いてみました!

また、どこかでお会いしましょう〜。よいjQueryプラグインライフを〜♪

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

kokoe(フロントエンドエンジニア)

ソーシャルゲームのコーディングやってます。三度の飯よりコーディングが好きと言って入社させてもらった エンジニアのココエです。四度目は飯の方がいいです。

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation