, dengan font biru, class=”paragrafBiru”, dan ditambahkan plugin $("p").css("color","blue").addClass("paragrafBiru").pluginKu(); Kode diatas membuat semua tag
pada halaman web tulisannya berwarna biru, kemudian ditambahkan kelas “paragrafBiru” dan terakhir ditambahkan plugin. Sekarang kita ubah sedikit kode diatas sehingga menjadi //tag
, dengan font biru, class=”paragrafBiru”, dan ditambahkan plugin $("p").css("color","blue").addClass("paragrafBiru").pluginKu(); yang terjadi adalah warna teks tidak berubah menjadi biru, dan penyebabnya adalah tidak lain dan
tidak bukan karena pluginKu() tidak berantai, dan ketika fungsi .css() dipanggil terjadi kesalahan pada program. Salah satu tujuan kita saat menggunakan plugin adalah agar bisa digunakan selayaknya fungsi lain pada jQuery, dan agar tujuan itu tercapai tenyata tidaklah sulit, cukup dengan menambah satu baris kode pada plugin kita yaitu return this; dan baris tersebut ditambahkan pada kode plugin sehingga menjadi
+function($){ $.fn.pluginKu = function(){ this.text("ini dihasilkan oleh plugin"); return this; //satu baris ini yg menjaga mata rantai tidak terputus }; }(jQuery); Jika ada yang merasa penjelasan yang diberikan terlalu panjang hanya untuk menjelaskan 2 kata yaitu return this, ingatlah bahwa dalam mengembangkan perangkat lunak kesalahan paling kecil sekalipun mampu mengakibatkan bencana nasional.
Menyediakan Pilihan
Hal berikutnya yang mesti dilakukan untuk membuat plugin yang sebenarnya adalah dengan menyediakan pilihan atau opsi. Maksudnya adalah plugin yang kita buat seharusnya dapat dipergunakan secara fleksibel dengan cara memberikan opsi pada pengguna untuk melakukan kostumisasi terhadap hasil kerja (output) dari plugin. Sebagai ilustrasi kita kembali ke contoh kita yaitu pluginKu(), yang outputnya selalu teks berisi “ini dihasilkan oleh plugin”. Teks tersebut merupakan teks default yang dihasilkan plugin, dan tentu saja teks default tidak selalu dibutuhkan, misalkan kita ingin menggantikan teks tersebut dengan “ini bukan teks default”. Sekarang kita lihat dulu dari sisi pengguna, selama ini kita memanggil plugin dengan sintaks $(/*selektor */).pluginKu(); dengan menyediakan opsi maka kita juga bisa memanggil plugin dengan cara $(/*selektor */).pluginKu( opsi );
jadi untuk merubah output plugin, kita mengirim variabel opsi saat pemanggilan. variabel opsi sendiri merupakan sebuah objek javascript yang berisi pasangan kunci dan nilai (key-value pair, untuk lebih lanjut silahkan pelajari tentang objek di javascript). Objek yang kita maksud memiliki struktur seperti ini
var opsi = { teks : "ini bukan teks default" } $(/*selektor */).pluginKu( opsi ); //atau dengan alternatif lain tanpa variabel opsi $(/*selektor */).pluginKu({ teks : "ini bukan teks default" }); //cara kedua lebih sering dipakai orang – orang, cek saja di internet pertama tama yang perlu diketahui adalah key-value pair pada contoh diatas yaitu satu pasangan dengan key adalah teks dan value berupa string "ini bukan teks default", dalam javascript sebuah objek dapat dituliskan sebagai kumpulan key-value pair yang dipisahkan tanda koma didalam sebuah kurung kurawal ( { key : value, key : value } ). Walaupun kode diatas belum dapat berjalan, tapi kita sudah dapat menetapkan beberapa hal (dari sisi pengguna) yaitu objek digunakan hanya jika kita ingin melakukan kostumisasi, untuk mengatur teks, maka kita menggunakan teks dan mengisikan nilai berupa string yang kita kehendaki. Setelah kita mengetahui bagaimana plugin kita nantinya akan dipergunakan, selanjutnya kita akan kembali membongkar mesin dalam plugin kita. Kita akan membuat objek default yang akan dipakai didalam plugin kita dan kemudian akan diuji apakah pengguna mempergunakan opsi atau tidak, langsung saja sehingga plugin kita menjadi +function($){ $.fn.pluginKu = function( opsi ){ //setting default plugin, berisi teks default var defSetting = { teks : "ini dihasilkan oleh plugin" } //$.extend() digunakan untuk menggabungkan objek var setting = $.extend(defSetting, opsi); //setting, objek yang digunakan sebagai output this.text(setting.teks); //setting.teks, menampilkan teks return this; };
}(jQuery); defSetting merupakan objek default yang kita bicarakan sebelumnya, kemudian hal yang selanjutnya dilakukan adalah memanggil fungsi .extend() untuk menggabungkan objek, bagi mereka yang ingin informasi lengkapnya, silahkan cari referensi fungsi jQuery.extend() di website referensi jQuery. Pertanyaanya adalah, untuk apa menggabungkan objek? jawabannya adalah untuk mengetahui apakah pengguna merubah setting atau tidak. extend() menerima parameter berupa objek, dan pada contoh diatas kita menggunakan dua objek yaitu defSetting dan opsi, danyang kemudian terjadi adalah objek pertama ditambah oleh objek kedua. Sebagai ilustrasi misalkan kita mempunyai 2 objek “sop buah” sop1 = { apel:”manis”, jeruk:”asem”, pepaya:”lumayan” } sop2 = { nanas:”lezat”, semangkat:”nikmat”, pepaya:”enak” } dengan kedua objek diatas, bagaimana jika kita melakukan operasi $.extend(sop1, sop2) maka hasilnya akan menjadi { apel: "manis", jeruk: "asem", pepaya: "enak", nanas: "lezat", semangkat: "nikmat" } dan bila melakukan operasi $.extend(sop2, sop1) maka hasilnya akan menjadi { nanas: "lezat", semangkat: "nikmat", pepaya: "lumayan", apel: "manis", jeruk: "asem" } coba perhatikan pada nilai pepaya, pepaya terdapat pada kedua objek dengan nilai berbeda dan pada operasi extend() nilai dari objek pertama akan ditimpa oleh objek kedua jika memiliki nama yang sama. Itulah sebabnya mengapa pada operasi pertama pepaya memiliki nilai “enak” sedangkan pada operasi kedua pepaya memiliki nilai “lumayan”.
Jika kita kembali kepada contoh plugin, maka kita sudah mengetahui bahwa jika teks diganti oleh objek opsi maka setelah memanggil extend() teks default akan ditimpa nilainya oleh teks pada opsi sehingga bisa diubah sesuai keinginan pengguna. Dan sekarang plugin kita sudah mampu untuk menyediakan pilihan bagi penggunanya, silahkan salin kode diatas dan coba jalankan. Cukup sampai disini kita menggunakan contoh plugin (yang tidak berguna) itu, karena kita akan menggantikannya dengan yang lebih berguna.
Studi Kasus tab plugin Misalkan kita mempunyai sebuah halaman web seperti ini
misalkan halaman tersebut adalah sebuah artikel yang terdiri dari 3 bagian dan masing2 memiliki link diatasnya untuk navigasi langsung ke bagian tersebut (dengan hash / # pada link), untuk memperindah tampilan dan memudahkan navigasi, kita dapat membuat layoutnya menjadi
berbentuk tab seperti ini
bagaimana membuat halaman tersebut menjadi tab? solusinya dapat ditebak, yaitu dengan plugin. misalkan kita anggap plugin tersebut sudah selesai, dan sekarang kita menggunakan sudut pandang pengguna. Pertama kita harus mengikuti requirement atau kebutuhan untuk mempergunakan plugin tersebut pada file html kita. requirement yang dimaksud adalah format markup agar plugin kita nanti dapat berjalan sesuai dengan tujuan pembuatnya juga tujuan kita sebagai pengguna, dan format yang dimaksud adalah membuat sebuah blok