カスタマーJQueryプラグイン

Question

私はJQueryを学習しています。カスタムコントロールを作成する必要があります。このコントロールは基本的にHTMLをレンダリングする予定です。時々、私はHTMLを取得したいと思う。これを達成するための試みで

// Put generated html inside of "myElement". "myElement" is a div element. 
$("#myElement").myPlugin({ value: 10 }); 

// Retrieve the html that myPlugin would place of a div element. 
// Basically, I want the javascript equivalent of a C# static function here. 
// But I think the following approach is wrong: 
var html = myPlugin().getHtml(10); 
alert(html); 

私は、次を使用しています：私の希望は、次の構文を使用することです

(function ($) { 
    $.fn.myPlugin = function (element, options) { 
    var defaults = { theValue: 0 } 

    var plugin = this; 
    plugin.settings = {}; 

    var $element = $(element), 
    element = element; 

    plugin.init = function() { 
     plugin.settings = $.extend({}, defaults, options); 
     var html = createHtml(defaults.theValue); 
     $(element).html(html);  
    } 

    plugin.getHtml = function (v) { 
     return createHtml(v); 
    } 

    var createHtml(v) { 
     return "<span>" + v + "</span>"; 
    } 
})(jQuery); 

私は2つの問題を抱えている：1）私は、HTMLを見ることができますが生成されていますが、DOMに追加されていないようです。 2）私は静的に関数を呼び出すことはできません。関数を静的に表示させるにはどうすればよいですか？

ありがとうございました！

Answer 1

はあなたが作る必要があるいくつかの調整があります。

(function($) { 
    $.fn.myPlugin = function(options) { 
     var defaults = { 
      theValue: 0 
     }, 
      settings = $.extend({}, defaults, options); 

     this.html($.myPlugin.getHtml(settings.theValue)); 
    }; 

    $.myPlugin = { 
     getHtml: function(value) { 
      return "<span>" + value + "</span>"; 
     } 
    }; 

})(jQuery); 

使用法：

$("#foo").myPlugin({ theValue: 10 }); 
var html = $.myPlugin.getHtml(10); 

• オフまず、あなたは決してinitメソッドを呼び出していなかったので、何も仕事に行くありませんでした。自動的に呼び出されることはありません。おそらくあなたはjQueryUI widget factoryを考えていたでしょうか？
• さらに、elementはプラグインに渡されません。thisは、プラグインが呼び出された要素を参照します。あなたはoptionsを渡すだけです。
• 最後に、静的なjQueryメソッドを作成するには、$に接続してください。

例：http://jsfiddle.net/xF2S6/