如何给一个jquery-plugin单独的局部变量，这是在不同的插件函数访问?
我的脚本显示了一个内容为'123'的警报，但我期待'abc'。所以变量't'在每个插件中只存在一次而不是两次。因此，对于每个插件实例，也应该有一个变量'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>
你只需要:
// 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/
通常的方法是使用data函数将与特定元素相关的信息存储在元素本身上。所以在您的情况下(实际示例):
(function ($) {
$.fn.doSomething = function()
{
alert(this.data("myHtmlControl"));
}
$.fn.myHtmlControl = function(option) {
this.data("myHtmlControl", option);
}
})(jQuery);
如果你需要存储多个选项，这里有一个更健壮的例子(活拷贝):
(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();
});
});