Πως να φτιάξετε το δικό σας jQuery plugin

Share

Σε αυτό το άρθρο θα δούμε πως μπορούμε να φτιάξουμε ένα jQuery plugin. Θα δούμε πως το προσθέτουμε μέσα στο namespace της jQuery, πως χρησιμοποιούμε τους selectors και πως μπορούμε να ορίσουμε παραμέτρους για το plugin μας.

Θα φτιάξουμε ένα plugin το οποίο θα ελέγχει τα links της σελίδας, και εφόσον οδηγούν σε κάποιο εξωτερική σελίδα, θα τους προσθέτει το target=”_blank” attribute έτσι ώστε να ανοίγουν σε νέο παράθυρο. Ας το ονομάσουμε ext_links.
Τέλος, θα έχουμε σαν επιλογή να αλλάξουμε και το css αυτών των links, όπως π.χ. να γίνονται bold ή να παίρνουν κάποια css κλάση. Στο παρακάτω παράδειγμα φαίνεται πως θα καλούμε το plugin μέσα στην HTML σελίδα μας.

jQuery(document).ready(function () {
    jQuery('a').ext_links({
        bold: false,
        linkclass: "external"
    });
});

Το 1ο μας βήμα είναι να ορίσουμε το plugin μας. Ο ορισμός του γίνεται όπως φαίνεται στο παρακάτω παράδειγμα:

(function ($) {
    $.fn.ext_links = function (options) {
        //TO DO: Implement the plugin.
    }
})(jQuery);

Ο κώδικας είναι πολύ απλός και το μόνο που κάνει είναι να δημιουργεί μία συνάρτηση με το όνομα ext_links μέσα στο namespace της jQuery. Το $.fn είναι απλά μία συντόμευση για το jQuery.prototype.
Η δήλωση της συνάρτησης βρίσκεται μέσα στο (function ($) { ... })(jQuery);. Με αυτόν τον τρόπο πετυχαίνουμε δύο πράγματα. Το ένα είναι να μπορέσουμε να χρησιμοποιήσουμε το $ σαν συντόμευση για τη jQuery, χωρίς να υπάρχει φόβος για conflict με κάποιο άλλο plugin (π.χ. Mootools).
Το δεύτερο είναι ότι έτσι έχουμε ένα περιορισμένο scope, όπου εκεί μέσα μπορούμε να γράψουμε private συναρτήσεις που θα χρησιμοποιεί μόνο το plugin μας.

Στη συνέχεια θα δούμε πως θα εκτελέσουμε τον κώδικα από το plugin μας για κάθε στοιχείο που θα επιστρέψει ο selector με τον οποίο τον καλέσαμε.
Επίσης θα ορίσουμε έναν πίνακα με όλες τις παραμέτρους που θέλουμε να έχει το plugin μας και θα δούμε πως μπορούμε εύκολα να αλλάξουμε τις αρχικές τιμές με ότι παραμέτρους πέρασε ο χρήστης.

(function ($) {
    $.fn.ext_links = function (options) {
        //  Η μεταβλητή options περιέχει τις παραμέτρους που έδωσε ο χρήστης. 
        //  Την αλλάζω ώστε να περιέχει όλες τις παραμέτρους που θέλω με τις τιμές για όποιες παραμέτρους πέρασε ο χρήστης
        options = $.extend({}, $.fn.ext_links.defaultOptions, options);
 
        this.each(function () {    //Εδώ θα τρέξει ο κώδικας μου για κάθε στοιχείο σύμφωνα με τον selector που έδωσε ο χρήστης.
            // TO DO: implement the plugin
        });
        $.fn.ext_links.defaultOptions = {    //Ορισμός των παραμέτρων που θέλουμε για το plugin μας, καθώς και των αρχικών τους τιμών.
            bold: true,
            linkclass: ""
        }
    }
})(jQuery);

Σε αυτό το σημείο έχουμε φτιάξει ένα jQuery plugin! Το plugin μας όμως αυτή τη στιγμή δεν κάνει τίποτα!
Στο επόμενο παράδειγμα περιέχεται και η υλοποίηση του plugin μας, όπως το είχαμε περιγράψει αρχικά.

(function ($) {
    $.ext_links = function () { $('a').ext_links(); }
 
    $.fn.ext_links = function (options) {
        options = $.extend({}, $.fn.ext_links.defaultOptions, options);
 
        this.each(function () {
            var jElement = $(this);
            var link_url = this.href;
 
            jElement.attr("target", "_blank");
            if (StartsWith(link_url, 'http://' + location.hostname)) {
                if (options.bold) {
                    jElement.css('font-weight', 'bold');
                }
                if (options.linkclass != '') {
                    jElement.addClass(options.linkclass);
                }
            }
        });
        $.fn.ext_links.defaultOptions = {
            bold: true,
            linkclass: ""
        }
        function StartsWith(full_str, sub_str)  //Private Function
        {
            return (full_str.indexOf(sub_str) != 0);
        }
    }
})(jQuery);

Το άρθρο αυτό βασίστηκε κυρίως σε ένα άρθρο από το Script Junkie blog, το οποίο είναι αρκετά αναλυτικό και πλήρες.

Κάνουμε Like,tweet,+1 και ότι άλλο σκεφτείτε.
Όλα αυτά ενθαρρύνουν εμένα και τους υπόλοιπους συγγραφείς να συνεχίσουμε να γράφουμε.