Membangun Plugin yang Dapat Dikonfigurasi dan Digunakan Ulang

Pengantar Plugin yang Dapat Dikonfigurasi

Mengapa Menggunakan Opsi Bawaan

Menentukan Nilai Bawaan Plugin

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="myElement">Hello</div>
<script>
(function($) {
  $.fn.myPlugin = function(options) {
    // Define default settings here
    var defaults = {
      color: "blue",
      fontSize: "16px",
      message: "Default message!"
    };
    
    // For now, let's just log the defaults
    console.log("Plugin defaults:", defaults);
    
    return this; // Always return 'this' for chaining
  };
})(jQuery);

$(document).ready(function() {
  $('#myElement').myPlugin();
});
</script>

Menggabungkan Opsi Pengguna: $.extend()

$.extend() dalam Praktik

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
(function($) {
  $.fn.myPlugin = function(options) {
    var defaults = {
      text: "Default text",
      color: "blue",
      fontSize: "16px"
    };
    
    // Merge defaults with user-provided options
    var settings = $.extend({}, defaults, options);
    
    console.log("Final settings:", settings);
    
    return this; // Keep chaining ability
  };
})(jQuery);

$(document).ready(function() {
  // User provides custom options
  $('body').myPlugin({
    text: "Custom Text!",
    color: "red"
  });
});
</script>

Mengakses Pengaturan yang Digabungkan

Plugin Tooltip Praktis

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .coddy-tooltip { /* Use unique class name */
    position: absolute;
    background-color: #333;
    color: white;
    padding: 5px 8px;
    border-radius: 3px;
    display: none;
    font-family: sans-serif;
    font-size: 14px;
  }
</style>
<button id="hoverMe">Hover Over Me</button>
<script>
(function($) {
  $.fn.coddyTooltip = function(options) {
    var defaults = {
      text: "Default Tooltip",
      bgColor: "#333",
      textColor: "white",
      delay: 200 // ms before showing
    };
    var settings = $.extend({}, defaults, options);

    return this.each(function() {
      var $this = $(this);
      var $tooltip = $('<div class="coddy-tooltip"></div>')
                       .text(settings.text)
                       .css({
                         'background-color': settings.bgColor,
                         'color': settings.textColor
                       })
                       .appendTo('body');

      var timeoutId; // To clear previous timeouts

      $this.on('mouseenter', function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function() {
          var offset = $this.offset();
          $tooltip.css({
            top: offset.top - $tooltip.outerHeight() - 5,
            left: offset.left + ($this.outerWidth() / 2) - 
                   ($tooltip.outerWidth() / 2)
          }).fadeIn(100);
        }, settings.delay);
      }).on('mouseleave', function() {
        clearTimeout(timeoutId);
        $tooltip.fadeOut(100);
      });
    });
  };
})(jQuery);

$(document).ready(function() {
  // Initialize the tooltip with custom options
  $('#hoverMe').coddyTooltip({
    text: "Hello from CoddyKit!",
    bgColor: "darkblue",
    delay: 500
  });
});
</script>

Merancang untuk Dapat Digunakan Ulang

Pentingnya `this.each()`

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<script>
(function($) {
  $.fn.highlight = function(options) {
    var defaults = {
      color: "yellow"
    };
    var settings = $.extend({}, defaults, options);

    return this.each(function() {
      // 'this' refers to the current DOM element in the loop
      $(this).css('background-color', settings.color);
    });
  };
})(jQuery);

$(document).ready(function() {
  // Apply highlight to all elements with class 'item'
  $('.item').highlight({ color: "lightblue" });
});
</script>

Pemeriksaan Singkat: Praktik Terbaik Plugin

Ringkasan: Dapat Dikonfigurasi & Digunakan Ulang