Πως να φτιάξετε ένα jQuery plugin σε τρία βήματα

23 Μαρ 2010 | JavaScript

Δεν επιτρέπονται τα σχόλια.


jQuery-e1291095995911

Στόχος αυτού του tutorial είναι να σας δείξει τον τρόπο για να δημιουργείτε plugins για το jQuery. Η αλήθεια είναι πως υπάρχουν αρκετοί τρόποι για τη δημιουργία plugins για το jQuery, εγώ όμως έχω επιλέξει αυτόν που επιτρέπει στον χρήστη του plugin να ορίζει παραμέτρους. Αρκετά όμως με τον πρόλογο, ας αρχίσουμε με τον προγραμματισμό !

Βήμα 1

Αυτό είναι από τα βασικά πρότυπα για τη δημιουργία jQuery plugin

(function($)
{
   $.fn.myEffects= function()
   {
      return this.each(function()
        {
        }
     );
};
})(jQuery);

Αυτός ο τρόπος δήλωσης του plugin είναι ασφαλής γιατί επιτρέπει στον χρήστη να το χρησιμοποιεί παράλληλα και με άλλα framework όπως είναι το Scriptaculous και Prototype χωρίς όμως να τους δημιουργεί πρόβλημα με το $.

Βήμα 2

Τώρα, έχουμε ετοιμάσει το πρότυπο για το plugin μας. Σε πρώτη φάση αυτό που θέλουμε είναι να επιτρέπουμε στον χρήστη του plugin μας να ορίζει κάποιες από τις παραμέτρους, έτσι ώστε να είναι ευέλικτο μέχρι κάποιο βαθμό. Αυτό μπορούμε να το πετύχουμε με τη χρήση της μεθόδου extend του jQuery.

(function($)
{
   $.fn.myEffects= function(options)
  {

      var defaults = {
         startOpacity: 1,
         hoverOpacity: 0,
         duration: 2000
      };

      var options = $.extend(defaults, options);

      return this.each(function()
         {
         }
      );
};
})(jQuery);

Με αυτό τον τρόπο καταφέραμε να εισάγουμε επιτυχώς τη δυνατότητα να αλλάζει ο χρήστης κάποιες από τις παραμέτρους του Plugin.

Βήμα 3

Εφόσον και έχουμε δημιουργήσει το Plugin μας με επιτυχία, μπορούμε να του εισάγουμε επιπλέον λειτουργίες. Ο κώδικας this.each είναι απαραίτητος γιατί θα βοηθήσει στην επιλογή του καθορισμένου στοιχείου όπως αυτό ορίζετε από τον επιλογέα. Για παράδειγμα αν το Plugin ονομάζετε $(“div”).myEffect(), όλα τα στοιχεία div θα επηρεαστούν από το Plugin myEffect. Στο παράδειγμα μας το Plugin θα σβήνει ομαλά όλα τα στοιχεία εκτός από αυτό που έχει το ποντίκι πάνω του. Ο κώδικας του Plugin είναι αυτός :

(function($)
{
   $.fn.myEffects= function(options)
   {

      var defaults = {
         startOpacity: 1,
         hoverOpacity: 0,
         duration: 2000
      };

      var options = $.extend(defaults, options);
      var selector = this;

      return this.each(function()
      {
         $(this).hover(
            function()
            {
               $(this).stop(true,true).animate({opacity: options.startOpacity}, options.duration);
               $(selector).not(this).stop(true,true).animate({opacity: options.hoverOpacity}, options.duration);
            },
            function()
            {
               $(selector).not(this).stop(true,true).animate({opacity: options.startOpacity}, options.duration);
            }
         );

      }
   );
};
})(jQuery);

Τώρα για να χρησιμοποιήσουμε το Plugin μας, ορίζουμε το όνομα του (που στην περίπτωση μας είναι myEffect) έτσι $(‘επιλογεας’).myEffect();

$(document).ready(
   function()
   {
      $('div').myEffect();
   }
);

Η παραπάνω δήλωση θα προσαρτήσει ένα γεγονός hover σε κάθε div και θα του περάσει τις προκαθορισμένες παραμέτρους. Ο χρήστης έχει τη δυνατότητα να αλλάξει τις τιμές των παραμέτρων με τη χρήση ενός αντικειμένου όπως στον κώδικα που ακολουθεί

$(document).ready(
   function()
   {
      $('div').myEffect(
      {
         startOpacity: 0.8,
         hoverOpacity: 0.1
      }
   );
}
);

Όπως βλέπετε είναι πολύ απλό να δημιουργήσετε ένα Plugin. Δοκιμάστε το και αν κάτι δεν πάει καλά μην διστάσετε να γράψετε το σχόλιο σας για να το διορθώσουμε !

Περισσότερα για τον CorfuGmr

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.








Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Συγνώμη, τα σχόλια για αυτό το άρθρο είναι κλειστά.



^
Top
css.php