jQuery adalah salah satu plugin JavaScript yang paling banyak digunakan sampai saat ini. Banyak dari kita yang menggunakan library tersebut untuk membuat sebuah website. Alasan menggunakan jQuery adalah karena mudah digunakan dan banyaknya support yang tersedia baik itu tutorial maupun plugin-plugin yang siap pakai. Beberapa plugin yang sering digunakan seperti Fancybox, Datatables, Slickjs dan sebagainya.

https://www.jqueryscript.net/popular/

Tapi apakah kita tahu bagaimana cara untuk membuat plugin-plugin tersebut? Karena sebagian besar dari kita (termasuk saya) hanya pemakai saja tanpa tahu cara membuatnya. Jadi pada artikel kali ini kita akan sama-sama belajar bagaimana cara membuat plugin jQuery yang paling sederhana dahulu.

Buat Projek Baru
Pertama, buat projek (folder) baru terlebih dahulu. Beri nama dengan “simple-jquery-plugin” misalnya. Lalu buat beberapa file di dalam projek tersebut seperti berikut:

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

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

(function($) {
    /**
     * Kita buat plugin dengan nama "changeThemeToRed".
     * Plugin ini digunakan untuk memasang tema warna merah pada suatu element.
     * 
     * Cara menggunakannya:
     * $('your-element').changeThemeToRed();
     */
    $.fn.changeThemeToRed = function() {
        return this.each(function(index, element) {
            $(element)
                // ubah warna background jadi warna merah
                .css("background-color", "red")

                // ubah warna text jadi warna putih
                .css("color", "white");
        });
    };
 })(jQuery);

Pada kode diatas sudah dijelaskan bahwa plugin yang kita buat tersebut digunakan untuk mengubah warna theme suatu element HTML menjadi warna merah. Cara menggunakan pluginnya adalah sebagai berikut:

(function($) {
   /**
    * When document is ready.
    */
   $(document).ready(function() {
      // init plugin changeThemeToRed
      // setiap element yang mempunyai class dengan name "hello"
      // akan diubah menjadi tema warna merah
      $('.hello').changeThemeToRed();
   });
})(jQuery);

Untuk contoh lengkapnya, buka file “index.html” yang sebelumnya sudah dibuat dan copy kode berikut ini:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Simple jQuery Plugin</title>
    </head>

    <body>
        <div class="hello">
            Hello world!!
        </div>
        <div class="hello">
            Contoh paragraph lainnya.
        </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($) {
                /**
                 * When document is ready.
                 */
                $(document).ready(function() {
                    // init plugin changeThemeToRed
                    $('.hello').changeThemeToRed();
                });
            })(jQuery);
        </script>
    </body>
</html>

Setelah itu buka file “index.html” di browser. Hasilnya semua elemen dengan class “hello” akan berubah menjadi warna merah sesuai dengan fungsi plugin yang telah kita buat. Dengan begitu, artinya kita sudah berhasil untuk membuat plugin jQuery pertama kita.

Referensi:
1. https://learn.jquery.com/plugins/basic-plugin-creation/