Belajar Membuat Plugin di jQuery

 Author : hadinug, 05 April, 2014, Komentar



jQuery sangat hebat, mudah dipelajari, dan dapat dengan mudah menambahkan interaktivitas ke situs web. Karena jQuery dilengkapi dengan banyak plugin untuk melakukan hampir apa pun yang kita perlu lakukan untuk website.

 
Nah pertanyaanya, bagaimana kalau kita tidak menemukan plugin yang tepat dan sesuai dengan kebutuhan kita? Atau kita hanya mencari untuk menggabungkan beberapa fungsi yang sering digunakan menjadi satu kesatuan paket yang rapi? Solusinya mungkin kita harus membuat sendiri plugin memenuhi persis kebutuhan kita.


 
Menulis jQuery plugin tidaklah sesulit yang mungkin tampak pada awalnya. Tutorial ini akan menjelaskan proses menulis sebuah plugin sederhana, menambahkan beberapa pilihan, dan bahkan melakukan panggilan balik atau callback.


File Yang di Butuhkan

Berikut ini, gambar yang mempresentasikan strktur folder dan file projek untuk membuat plugin dengan jQuery. Disini kita butuh library js jQuery, kemudian js plugin yang akan kita buat dan sebuah file .html untuk mencoba plugin yang kita buat.



Setelah kita berhasil membuat struktur folder dan file seperti pada gambar, mari kita mulai setahap demi setahap langkah-langkah membuat plugin dengan jQuery.

Struktur dasar plugin jQuery


jQuery dilengkapi dengan semua fitur yang mampu  mengait yang nantinya kita perlukan untuk membangun berkas plugin dengan mudah. Kita akan coba mulai mulai dengan tapat yang sangat dasar dari sebuah plugin jQuery tradisional.

(function($){
    $.fn.myPlugin = function(){
        // do something
    };
}(jQuery));

Pada file myPlugin.js, script diatas memiliki makna sebagai berikut.
Segala sesuatu yang berada pada pola/ patern  (function () {}) JavaScript dibuat tertutup, hal ini ditujukan untuk memastikan bahwa semua variabel dalam plugin yang kita buat akan tetap aman di luar namespace global javascript. Agar tidak menimbulkan tabrakan dengan JavaScript lain yang digunakan pada halaman website. 

$.fn adalah cara jQuery untuk menentukan bahwa ini adalah plugin, yang telah kami beri nama myPlugin. Dengan semua potongan program diatas, mari kita kita lakukan sesuatu dengan plugin tersebut!

Do Something!

Nah pada tahap ini kita akan memberikan sebuah aksi yang nanti nya bisa digunakan pada sebuah elemen HTML.

(function($) {

    $.fn.myPlugin = function() {

        this.each(function() {
            $(this).text("Ini adalah contoh pembuatan plugin!");
        });

    };

}(jQuery));

Ketika kita memanggil plugin dengan melampirkan ke selector $ jQuery, objek tersebut merupakan objek jQuery, jadi kita tidak perlu membungkusnya dalam struktur $(this). Namun, setelah dimulai perulangan melalui setiap selector yang cocok, kita menggunakan $(this) dan melakukan penyeleksian pada masing-masing selektor yang cocok.

Script diatas akan di panggil pada kode HTML, index.html.

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
        <script type="text/javascript" src="myPlugin.js"></script>
    </head>
    <body>
        <h3>My World!</h3>    

        <script type="text/javascript">
            $(document).ready(function() {
                $('h3').myPlugin();
            });
        </script>
    </body>
</html>


Mari kita bedah satu persatu kode diatas,
Untuk menambahkan library jQuery dan plugin pada halaman web, kita gunakan script berikut:

<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="myPlugin.js"></script>

Kemudian untuk memanggil plugin, agar bisa berjalan pada elemen yang dikenakan, kita gunakan script berikut:

$(document).ready(function() {
     $('h3').myPlugin();
});

Apakah ini sudah selesai?, Jawabannya adalah belum, setelah ini kita akan mulai mencoba mengcustom plugin jQuery yang kita buat dengan memberikan beberpa option atau pilihan. Nah function yang kita gunakan adalah $.extend untuk memberikan beberapa nilai costomize dari sebuah plugin.

(function($) {

    $.fn.myPlugin = function(options) {

        // default settings
        var settings = $.extend({
            text: 'Example plugin!',
            color: null,
            fontStyle: null
        }, options);

        return this.each(function() {
            // We'll get back to this in a moment
        });

    };

}(jQuery));

Sekarang kita memiliki objek setting, ketika plugin dipanggil tanpa parameter apapun, akan menggunakan apa yang telah kita definisikan pada settingan default. Disini juga di tambagkan beberapa option setting seperti, "color" dan "fontStyle", yang tidak memiliki standar atau null. Untuk plugin ini, kita tidak perlu untuk menetapkan setiap warna atau gaya tulisan. So mari kita mulai mengimplementasikan nilai setting pada selector yang mengenai.

return this.each(function() {
    $(this).text(settings.text);
    // jika settingan color != null
    if (settings.color) {
        $(this).css('color', settings.color);
    }
    // jika settingan fontStyle != null
    if (settings.fontStyle) {
        $(this).css('font-style', settings.fontStyle);
    }
});

Nah sekarang saatnya memanggil plugin yang telah kita buat dengan menambahkan nilai parameter setting.

$(document).ready(function() {
    $('h3').myPlugin({
        text:'hello world!',
        color: 'red',
        fontStyle:'sans-serif'
    });
});

Semoga bermanfaat dan tanyakan ke kami jika ada yang perlu ditanyakan!

 
Bagikan halaman ke sosial media
 
Tags :   jQuery       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda