2011-11-29 11 views
6

jquery-pluginに、異なるプラグイン関数でアクセス可能な個々のローカル変数を与える方法はありますか?jquery-pluginのグローバル変数またはローカル変数

私のスクリプトは内容 '123'で警告を表示しますが、私は 'abc'を期待しています。変数 't'は各プラグインに対して1回だけ存在し、2回は存在しません。したがって、各プラグインインスタンスに対して、変数 't'のインスタンスも存在するはずです。

<html> 
<head> 
<title></title> 

<script type="text/javascript" src="jquery/jquery-1.7.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    (function ($) { 
     var t = null; 
     $.fn.doSomething = function() 
     { 
      alert(t); 
     } 
     $.fn.myHtmlControl = function(option) { 
      t = option; 
     } 
    })(jQuery); 

    $(function() { 
     $('#ctrl1').myHtmlControl("abc"); 
     $('#ctrl2').myHtmlControl("123");    
     $('#ctrl1').doSomething(); 
    })   
</script> 

</head> 
    <body> 
     <div id='ctrl1'>Ctrl1</div> 
     <div id='ctrl2'>Ctrl2</div> 
    </body> 
</html> 

答えて

7

これを行うための通常の方法は、上の特定の要素に関連して情報を保存するためにdata機能を使用することです要素そのもの。だからあなたのケース(live example)に:

(function ($) { 
    var defaults = { 
     msg1: "(msg1)", 
     msg2: "(msg2)" 
    }; 

    $.fn.doSomething1 = function() 
    { 
     alert(getOption(this, "msg1")); 
     return this; 
    } 
    $.fn.doSomething2 = function() 
    { 
     alert(getOption(this, "msg2")); 
     return this; 
    } 

    $.fn.myHtmlControl = function(options) { 
     this.data("myHtmlControl", $.extend({}, defaults, options)); 
     return this; 
    }; 

    function getOption(inst, name) { 
     var obj = inst.data("myHtmlControl"); 
     return (obj || defaults)[name]; 
    } 

    function setOption(inst, name, value) { 
     var obj = inst.data("myHtmlControl"); 
     if (!obj) { 
      obj = $.extend({}, defaults); 
      inst.data("myHtmlControl", obj); 
     } 
     obj[name] = value; 
    } 
})(jQuery); 
jQuery(function($) { 

    $("#theButton").click(function() { 
     $('#ctrl1').myHtmlControl({msg1: "abc"}); 
     $('#ctrl2').myHtmlControl({msg2: "123"}); 
     alert("about to do ctrl1"); 
     $('#ctrl1').doSomething1().doSomething2(); 
     alert("about to do ctrl2"); 
     $('#ctrl2').doSomething1().doSomething2(); 
    }); 

}); 
24

必要なのはここにある:

// jQuery Plugin Boilerplate 
// A boilerplate for jumpstarting jQuery plugins development 
// version 1.1, May 14th, 2011 
// by Stefan Gabos 

// remember to change every instance of "pluginName" to the name of your plugin! 
(function($) { 

    // here we go! 
    $.pluginName = function(element, options) { 

     // plugin's default options 
     // this is private property and is accessible only from inside the plugin 
     var defaults = { 

      foo: 'bar', 

      // if your plugin is event-driven, you may provide callback capabilities for its events. 
      // execute these functions before or after events of your plugin, so that users may customize 
      // those particular events without changing the plugin's code 
      onFoo: function() {} 

     } 

     // to avoid confusions, use "plugin" to reference the current instance of the object 
     var plugin = this; 

     // this will hold the merged default, and user-provided options 
     // plugin's properties will be available through this object like: 
     // plugin.settings.propertyName from inside the plugin or 
     // element.data('pluginName').settings.propertyName from outside the plugin, where "element" is the 
     // element the plugin is attached to; 
     plugin.settings = {} 

     var $element = $(element), // reference to the jQuery version of DOM element the plugin is attached to 
      element = element;  // reference to the actual DOM element 

     // the "constructor" method that gets called when the object is created 
     plugin.init = function() { 

      // the plugin's final properties are the merged default and user-provided options (if any) 
      plugin.settings = $.extend({}, defaults, options); 

      // code goes here 

     } 

     // public methods 
     // these methods can be called like: 
     // plugin.methodName(arg1, arg2, ... argn) from inside the plugin or 
     // element.data('pluginName').publicMethod(arg1, arg2, ... argn) from outside the plugin, where "element" 
     // is the element the plugin is attached to; 

     // a public method. for demonstration purposes only - remove it! 
     plugin.foo_public_method = function() { 

      // code goes here 

     } 

     // private methods 
     // these methods can be called only from inside the plugin like: 
     // methodName(arg1, arg2, ... argn) 

     // a private method. for demonstration purposes only - remove it! 
     var foo_private_method = function() { 

      // code goes here 

     } 

     // fire up the plugin! 
     // call the "constructor" method 
     plugin.init(); 

    } 

    // add the plugin to the jQuery.fn object 
    $.fn.pluginName = function(options) { 

     // iterate through the DOM elements we are attaching the plugin to 
     return this.each(function() { 

      // if plugin has not already been attached to the element 
      if (undefined == $(this).data('pluginName')) { 

       // create a new instance of the plugin 
       // pass the DOM element and the user-provided options as arguments 
       var plugin = new $.pluginName(this, options); 

       // in the jQuery version of the element 
       // store a reference to the plugin object 
       // you can later access the plugin and its methods and properties like 
       // element.data('pluginName').publicMethod(arg1, arg2, ... argn) or 
       // element.data('pluginName').settings.propertyName 
       $(this).data('pluginName', plugin); 

      } 

     }); 

    } 

})(jQuery); 

出典:http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/

+0

作品、感謝:

あなたが複数のオプションを格納する必要がある場合
(function ($) { $.fn.doSomething = function() { alert(this.data("myHtmlControl")); } $.fn.myHtmlControl = function(option) { this.data("myHtmlControl", option); } })(jQuery); 

は、ここでより堅牢な例(live copy)です。そして、なぜこの基本的な概念が組み込み関数として提供されていないのだろうか。 – TechNyquist

関連する問題