2017年3月9日 星期四

基本的 jQuery 插件 - How to Create a Basic Plugin

Reference:
https://learn.jquery.com/plugins/basic-plugin-creation/
http://maidot.blogspot.tw/2011/04/jquery-this-this-different-between-this.html


1.創建一個基礎的jQuery plugin

-把我們創造的plugin加入至$.fn之中
(擴展$.fn.abc(),即$.fn.abc()是對jquery擴展了一個abc方法,那麼後面你的每一個jquery實例都可以引用這個方法了) 
  1. $.fn.greenify = function() {
  2.     this.css( "color", "green" );
  3. };
  4.  
  5. $( "a" ).greenify(); // Makes all the links green.

 -注意這邊是使用css()，所以我們也用this，而非$(this)，
因為在JQuery中this代表目前的DOM對象，$(this)代表我們用JQuery所選取的JQuery對象，
在上述方法中，this代表greenify()，而他與.css()都同屬同一個jQuery object的一部份
2.Chaining 讓自建jQuery plugin可與其他方法相連
新增一行『return this』把該jQuery Object 傳回
  1. $.fn.greenify = function() {
  2.     this.css( "color", "green" );
  3.     return this;
  4. }
  5.  
  6. $( "a" ).greenify().addClass( "greenified" );

 3.確保plugin不會與其他JavaScript libraries產生衝突
(Protecting the $ Alias and Adding Scope)
在最外層多加一層$()宣告 
  1. (function ( $ ) {
  2.  
  3.     $.fn.greenify = function() {
  4.         this.css( "color", "green" );
  5.         return this;
  6.     };
  7.  
  8. }( jQuery ));

4.讓一個plugin根據參數，做出不同的動作 
  1. (function( $ ) {
  2.  
  3.     $.fn.popup = function( action ) {
  4.  
  5.         if ( action === "open") {
  6.             // Open popup code.
  7.         }
  8.  
  9.         if ( action === "close" ) {
  10.             // Close popup code.
  11.         }
  12.  
  13.     };
  14.  
  15. }( jQuery ));

5.透過each()，對多個指定的DOM elements進行處理 
  1. $.fn.myNewPlugin = function() {
  2.  
  3.     return this.each(function() {
  4.         // Do something to each element here.
  5.     });
  6.  
  7. };
Notice that we return the results of .each() instead of returning this. Since .each() is already chainable, it returns this, which we then return. This is a better way to maintain chainability than what we've been doing so far.

 .each() 方法，會遍歷jQuery對象中的每一個DOM元素
然後透過$(this) 將每一個取到的DOM變成jQuery Object
  1.  return this.each(function() {
  2.     var link = $(this);
  3.     link.css("color", setting.color)
  4. });
6.讓一個plugin接受『一組設定』 
  1. (function ( $ ) {
  2.  
  3.     $.fn.greenify = function( options ) {
  4.  
  5.         // This is the easiest way to have default options.
  6.         var settings = $.extend({
  7.             // These are the defaults.
  8.             color: "#556b2f",
  9.             backgroundColor: "white"
  10.         }, options );
  11.  
  12.         // Greenify the collection based on the settings variable.
  13.         return this.css({
  14.             color: settings.color,
  15.             backgroundColor: settings.backgroundColor
  16.         });
  17.  
  18.     };
  19.  
  20. }( jQuery ));
Example usage: 
  1. $( "div" ).greenify({
  2.     color: "orange"
  3. });

 defaults 設定的顏色透過$.extend()把覆蓋成傳進來的值
The default value for color of #556b2f gets overridden by $.extend() to be orange.

7.完整範例
my_plugin.js 
  1. (function($) {
  2.  
  3.     $.fn.greenify = function(action, options) {
  4.         var setting = $.extend({
  5.             color: "green",
  6.             backgroundColor: "white"
  7.         }, options);
  8.  
  9.         if (action === 'div') {
  10.  
  11.             return this.css({
  12.                 color: setting.color,
  13.                 backgroundColor: setting.backgroundColor
  14.             });
  15.         };
  16.  
  17.         if (action === 'a') {
  18.             return this.each(function() {
  19.                 var link = $(this);
  20.                 link.css("color", setting.color)
  21.             });
  22.  
  23.         }
  24.  
  25.     };
  26.  
  27. }(jQuery));
template.html 
  1. <!doctype html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <script src="js/jquery-1.12.0.min.js"></script>
  7.     <script src="js/my_plugin.js"></script>
  8.     <script>
  9.     $(document).ready(function() {
  10.         $("a").greenify("a", {
  11.             color: "red"
  12.         });
  13.  
  14.         $("div").greenify("div", {
  15.             color: "white",
  16.             backgroundColor: "red"
  17.         });
  18.     });
  19.     </script>
  20.     <title>jQuery</title>
  21.  
  22.     <body>
  23.         <a href="www.google.com.tw">GoogleGoog</a>
  24.         <a href="www.yahoo.com.tw">YahooYahoo</a>
  25.         <div>
  26.             Hello
  27.         </div>
  28.     </body>
  29.  
  30. </html>
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)