如何用選項創建jQuery插件但沒有元素？

我想創建一個不需要DOM元素但有默認選項的插件。如何用選項創建jQuery插件但沒有元素？

當我運行下面的代碼時，我得到TypeError: $.myApp is not a function。

我需要改變什麼？

;(function ($, window, document, undefined) { 

    "use strict"; 

    var defaults = { 
     val: 'old value' 
    }; 

    function myApp (options) {  
     this.settings = $.extend({}, defaults, options); 
     this._defaults = defaults; 
     this.init(); 
    }; 

    $.extend(myApp .prototype, { 
     init: function() { 
      console.log (this.settings); 
     } 
    }); 
})(jQuery, window, document); 

$(function() { 
    $.myApp({ 
     val: 'new value' 
    }); 
});

來源

2015-09-15 Asa Carter

你可以試試這個http://jsfiddle.net/k7h90y9h/ – guvenckardas

對不起，正確的鏈接是http://jsfiddle.net/k7h90y9h/2/ – guvenckardas

你可以嘗試像DEMO

(function ($) { 
     $.myApp = function(options){ 
      var defaults = { 
       'default'   : '' 
      }; 
      var options = jQuery.extend(defaults,options); 

      alert('worked!') 
     } 
    })($); 

$(function() { 

    $.myApp({ 
     val: 'new value' 
    }); 


});

答案是不喜歡你的功能，但它工作在正確的道路。

來源

2015-09-15 14:33:39 guvenckardas

'init'函數呢？ –

這個怎麼樣？ http://jsfiddle.net/k7h90y9h/4/ – guvenckardas

這裏是完整的教程，可以幫助你。

我們將從簡單的插件開始。首先，我們需要爲插件創建js文件。創建一個空白文件並將其保存爲jquery.myFirstPlugin.js。將它包含在HTML文件末尾的HTML文件中，並且包括jquery-1.11.min.js作爲其JQuery插件。

<script type="text/javascript" src="js/jquery-1.11.min.js"></script> 
<script type="text/javascript" src="js/jquery.myFirstPlugin.js"></script>

默認結構

(function($) { 
    $.fn.myFirstPlugin = function() { 
     // your code here 
    } 
}(jQuery));

這裏，包括在(function($){})自我封閉模式的一切，我們不希望任何衝突與其他JavaScript頁面上的片段。 $.fn允許您定義函數，因爲我們已將myFirstPlugin名稱給我們的插件。我們會做功能裏面的魔術。

設置默認值 如果沒有什麼文字初始化通過呢？顯然，我們需要在我們的插件中設置默認設置。

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

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

    } 
}(jQuery));

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

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

原文出處

How to Create JQuery plugin

來源

2016-04-04 05:13:16

如何用選項創建jQuery插件但沒有元素？

回答

相關問題