Tags

, ,

Ane akui kalo ane ini termasuk tipe programer pemalas. Tidak pernah mau melakukan hal yang sama dua kali :D. Jadi kalo ane nemuin kode yang kira-kira dipakai lebih dari sekali, biasanya ane langsung bikin wrapper-nya. Entah itu bikin function, class, behavior atau apalah…
Salah satu yang sering ane temuin dalam koding adalah behavior onChange or onEnter dari textBox. Maksudnya behavior lakukan sutu aksi ketika ada change atau ketika tombol enter ditekan. Sebenarnya kalau mau bikin koding langsung sangat sederhana sekali. Tetapi karena dasarnya emang lazy, bikin plugin jquery keknya ide yang lebih smart :D.
Tulisan isi sekaligus tutorial bagaimana membuat plugin di jQuery. Berikut code-nya:

"use strict";
(function($) {
    var enterPressed = false;
    $.fn.changeOrEnter = function(data, fn) {
        if (fn == null) {
            fn = data;
            data = undefined;
        }
        this.on('change.changeOrEnter, keydown.changeOrEnter', null, data, function(e) {
                var args = arguments;
                if (e.type === 'keydown') {
                    if (e.keyCode !== 13) {
                        return; // only react to enter key
                    } else {
                        enterPressed = true;
                    }
                } else {
                    // prevent processing for both keydown and change events
                    if (enterPressed) {
                        enterPressed = false;
                        return;
                    }
                }
                return fn.apply(e.target, args);
            });
    }
})(window.jQuery);

Inti dari membuat plugin jQuery adalah “memperluas” jQuery.fn. Karena window.jQuery diparsing dengan variable $, kita juga bisa mengaksesnya dengan $.fn. Jadi, kalau kita ingin membuat plugin, kita tingal bikin kode

$.fn.namaPlugin = function(args){
    // do something to var this
    // variable this mewakili objek yg manggil plugin.
}

Cara memakai plugin kita di aplikasi

$(selector).namaPlugin(args);

Untuk plugin yang sudah kita buat, cara menggunakannya di aplikasi misalnya

$('#id-harga').changeOrEnter(function(e){
    var q = $('#id-qty').val();
    var harga = $(this).val();
    var total = q * harga;
    $('#id-total').val(total);
});

Pada contoh plugin ini, ane menggunakan change.changeOrEnter. Frasa di belakang nama event adalah event namespace. Salah satu kegunaanya adalah kita bisa menghapus event handler tanpa mempengaruhi event yang lain.

$('#id-harga').off('.changeOrEnter');

Mungkin sekian untuk saat ini, sampai ketemu di tulisan berikutnya. Insya Allah.

Disclaimer:
Keknya ane agak telat update :D. Sebelum-sebelumnya event change baru ditrigger ketika lost focus. Sekarang event change juga ditrigger ketika user menekan tombol enter. Jadi plugin ini sudah tidak relevan. Tapi gak papa, tutorialnya masih relevan kok 😀

Advertisements