Pada artikel sebelumnya, kita sudah membahas bagaimana cara membuat plugin jQuery yang sangat sederhana. Kali ini kita akan membuat plugin yang lebih rumit dari plugin sebelumnya yaitu menambahkan parameter pada pluginnya. Untuk yang sudah pernah pakai plugin jQuery sebelumnya, pasti setidaknya pernah menemui plugin yang memiliki parameter ketika menggunakannya.

Contoh kode plugin yang menggunakan parameter:

$('.my-element').myPlugin({
    name: "jquery",
    type: "parameter"
});

Untuk plugin realnya sendiri, saya akan ambil contoh misalnya pada plugin Slickjs. Untuk menggunakan Slickjs, saya perlu mengetik kode berikut:

$('.my-class-name').slick();

Cara pemanggilannya masih sama dengan plugin yang kita buat sebelumnya. Tapi, pada plugin Slickjs, kalau kita lihat di website resminya:

https://kenwheeler.github.io/slick/

Kita dapat memberikan option atau parameter ketika menggunakan plugin, contohnya:

$('.multiple-items').slick({
    infinite: true,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 3
});

// untuk destroy plugin
$('.your-slider').slick('unslick');

Pada kode tersebut kita dapat menentukan berapa banyak item yang ditampilkan, berapa kecepatan waktu animasinya dan lain-lain. Nah, untuk menerapkan hal seperti itu pada plugin kita apakah bisa? Bagaimana caranya?

Buat Projek Baru
Sebenarnya ini pilihan saja, mau melanjuti pakai projek sebelumnya pun tidak masalah. Namun, kalau saya sendiri akan membuat projek baru di setiap tutorial yang saya ikuti agar tercatat dengan rapi apa yang sudah saya pelajari sebelumnya. Di tutorial ini saya akan buat projek baru ya.

Silakan buat projek baru dengan nama “complex-jquery-plugin” dan isi dengan file sebagai berikut:

complex-jquery-plugin
|--- js
|------ plugin.js
|--- index.html

Jika sudah, buka file “plugin.js” dan copy kode berikut:

(function($) {
    /**
     * Methods object.
     * @var {Object}
     */
    var Methods = {
        /**
         * Default method.
         */
        init: function() {
            alert('init');
        },

        /**
         * Destroy plugin.
         */
        destroy: function() {
            alert('destroy');
        }
    };

    $.fn.changeTheme = function(options) {
        if (Methods[options]) {
            return Methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof options === 'object' || !options) {
            // default to "init"
            return Methods.init.apply(this, arguments);
        } else {
            $.error('Method ' +  options + ' does not exist.');
        }
    };
})(jQuery);

Pada kode diatas, kita membuatkan sebuah kondisi untuk menentukan method apa yang dipakai. Method yang biasa dipakai pada plugin seperti “init”, “reload”, “destroy”, dan sebagainya. Masing-masing method mempunyai perilaku yang berbeda-beda dan biasanya disesuaikan dengan namanya.

Kode diatas baru berupa contoh sederhana plugin yang menggunakan parameter. Untuk mencobanya, buka file “index.html” yang sudah dibuat dan copy kode berikut:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Complex jQuery Plugin</title>
    </head>

    <body>
        <div class="hello">
            Hello world!!
        </div>

        <!-- load jQuery from Google -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

        <!-- load custom plugin we already created -->
        <script src="js/plugin.js"></script>
    
        <!-- main script -->
        <script type="text/javascript">
            (function($) {
                $(document).ready(function() {
                    // for call init method
                    $('.hello').changeTheme();

                    // for call destroy method
                    $('.hello').changeTheme('destroy');
                });
            })(jQuery);
        </script>
    </body>
</html>

Hasil dari kode berikut adalah akan menampilkan sebuah pesan dari masing-masing method yang digunakan. Jadi kalian bisa membuat banyak method sesuai dengan kebutuhan plugin yang akan dibuat.

Sekarang lanjut kita selesaikan kode untuk pluginnya. Buka kembali file “plugin.js”, dan copy kode berikut:

(function($) {
    /**
     * Define default parameter.
     * @var {Object}
     */
    var defaultParams = {
        backgroundColor: 'white',
        textColor: 'black'
    };

    /**
     * Methods object.
     * @var {Object}
     */
    var Methods = {
        /**
         * Default method.
         * @param {Object} options
         */
        init: function(options) {
            /**
             * Define plugin parameter.
             * @var {Object}
             */
            var settings = $.extend({
                backgroundColor: defaultParams.backgroundColor,
                textColor: defaultParams.textColor
            }, options);

            return this.each(function(index, element) {
                $(element)
                    .css("background-color", settings.backgroundColor)
                    .css("color", settings.textColor);
            });
        },

        /**
         * Destroy plugin, set theme to default.
         */
        destroy: function() {
            return this.each(function(index, element) {
                $(element)
                    .css("background-color", defaultParams.backgroundColor)
                    .css("color", defaultParams.textColor);
            });
        }
    };

    /**
     * Kita buat plugin dengan nama "changeTheme".
     * Plugin ini digunakan untuk memasang tema pada suatu element.
     * 
     * Cara menggunakannya:
     * $('your-element').changeTheme({
     *    backgroundColor: 'green',
     *    textColor: 'white'
     * });
     */
    $.fn.changeTheme = function(options) {
        if (Methods[options]) {
            return Methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof options === 'object' || !options) {
            // default to "init"
            return Methods.init.apply(this, arguments);
        } else {
            $.error('Method ' +  options + ' does not exist.');
        }
    };
 })(jQuery);

Pada kode tersebut, method “init” akan menerima parameter backgroundColor dan textColor untuk mengganti warna background dan warna text suatu element. Sedangkan method “destroy” akan mengembalikan warna background dan warna text suatu element menjadi warna default.

Untuk mencobanya, sekarang buka file “index.html” dan copy kode berikut:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Complex jQuery Plugin</title>
    </head>

    <body>
        <div class="hello-red">
            Hello world!!
        </div>
        <div class="hello-green">
            Hello world!!
        </div>

        <!-- load jQuery from Google -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

        <!-- load custom plugin we already created -->
        <script src="js/plugin.js"></script>
    
        <!-- main script -->
        <script type="text/javascript">
            (function($) {
                $(document).ready(function() {
                    $('.hello-red').changeTheme({
                        backgroundColor: 'red',
                        textColor: '#ffffff'
                    });
                    $('.hello-green').changeTheme({
                        backgroundColor: 'green',
                        textColor: 'blue'
                    });
                });
            })(jQuery);
        </script>
    </body>
</html>

Kode tersebut akan menghasilkan tampilan seperti berikut:

Jika sudah, kita akan membuat sebuah button yang jika diklik akan mengembalikan element-element tersebut ke warna semula atau warna default. Buka kembali file “index.html” dan update dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Complex jQuery Plugin</title>
    </head>

    <body>
        <div class="hello-red">
            Hello world!!
        </div>
        <div class="hello-green">
            Hello world!!
        </div>
        <p>
            <button class="button-destroy">Destroy</button>
        </p>

        <!-- load jQuery from Google -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

        <!-- load custom plugin we already created -->
        <script src="js/plugin.js"></script>
    
        <!-- main script -->
        <script type="text/javascript">
            (function($) {
                $(document).ready(function() {
                    $('.hello-red').changeTheme({
                        backgroundColor: 'red',
                        textColor: '#ffffff'
                    });
                    $('.hello-green').changeTheme({
                        backgroundColor: 'green',
                        textColor: 'blue'
                    });

                    $('.button-destroy').click(function(event) {
                        event.preventDefault();
                        $('.hello-red').changeTheme('destroy');
                        $('.hello-green').changeTheme('destroy');
                    });
                });
            })(jQuery);
        </script>
    </body>
</html>

Setelah itu buka file “index.html” di browser, hasilnya ada tambahan satu button di bawah kedua element sebelumnya yang sudah dibuat.

Saat halaman baru pertama kali dibuka.

 

Setelah itu coba tekan button “Destroy“, hasilnya kedua layout diatasnya akan berubah menggunakan warna default (hitam dan putih) seperti berikut:

Tampilan setelah klik button “Destroy”.

 

Sampai sini, selamat Anda sudah berhasil membuat sebuah plugin jQuery dan juga akhir dari tutorial “Membuat jQuery Plugin”. Semoga dengan artikel ini kalian sudah dapat membuat plugin jQuery kalian sendiri.

Terima kasih. Happy coding 🙂

 

Kode tutorial bisa kalian dapatkan disini:
https://github.com/fachririyanto/training-jquery-plugin