如何創建簡單的jQuery插件？

這個測試插件應該是這樣工作的：當一個元素被點擊時，它會向下移動。就那麼簡單。如何創建簡單的jQuery插件？

jQuery.fn.moveDown = function(howMuch){ 
    $(this).css("border", "1px solid black"); 
    $(this).click(function(){ 

     $(this).css("position", "relative"); 
     $(this).animate({top: '+='+howMuch}); 
    }); 
}

的問題是，當點擊一個元素時，它不僅移動點擊的元素，而且所有這些插件施加到其它元件。

這是什麼解決方案？

來源

2012-07-05 user1091856

我測試了Chrome上，似乎很好地工作。 – McGarnagle

它的工作原理。但不是它應該的。當一個元素被點擊時，所有應用了該插件的元素都會移動。應該移動的唯一元素就是被點擊的元素。 – user1091856

那麼，這是我檢查。我使用* $（「＃el1」）將它應用到了兩個元素。moveDown（「100px」）*和* $（「＃el2」）。moveDown（「100px」）*。當我點擊一個元素時，只有那個元素移動了。 – McGarnagle

插件開發嘗試這種方式，更加堅實：

編輯： Here is working jsFiddle example.

插件：

(function($){ 
    $.fn.extend({ 
     YourPluginName: function(options) { 
       var defaults = { 
         howMuch:'600', 
         animation: '',//users can set/change these values 
         speed: 444, 
         etc: '' 
       } 
     }; 

     options = $.extend(defaults, options); 

     return this.each(function() { 
      var $this = $(this);    
      var button = $('a', $this);// this represents all the 'a' selectors; 
              // inside user's plugin definition. 

      button.click(function() { 
      $this.animate({'top':options.howMuch});//calls options howMuch value 
      }); 
     }); 
})(jQuery);

用戶的文檔：

$(function() { 
    $('#plugin').YourPluginName({ 
    howMuch:'1000' //you can give chance users to set their options for plugins 
    }); 
}); 

<div id="plugin"> 
    <a>1</a> 
    <a>2</a> 
    <a>3</a> 
</div>

來源

2012-07-05 06:44:10

不錯的插件人，我想你錯過了一個關閉插件的'}'，無論如何真的很好的工作。這裏是[小提琴]（http://jsfiddle.net/ult_combo/5yKr6/6/）進行測試。 –

謝謝隊友，我看到了關閉錯誤並編輯了它。它已經開始; 'var defaults = {' –

在這裏，我想建議一些步驟來創建帶參數的簡單插件。

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

     // Default params 
     var params = $.extend({ 
      text  : 'Default Title', 
      fontsize : 10, 
     }, options); 
     return $(this).text(params.text); 

    } 
}(jQuery));

在這裏，我們添加了名爲params和設置使用extend功能選項默認值默認對象。因此，如果我們傳遞空白參數，那麼它將設置默認值，否則它將設置。

HTML

$('.cls-title').myFirstPlugin({ text : 'Argument Title' });

瞭解更多：How to Create JQuery plugin

原來的答覆Here i want to suggest steps to create simple plugin with arguments

來源

2016-04-07 06:14:23

如何創建簡單的jQuery插件？

回答

相關問題