将所有“yourPluginName”替换为您实际的插件名称。关于“radius”的内容只是一个选项(传递给插件的参数)的示例。
(function($){
$.yourPluginName = function(el, radius, options){
// To avoid scope issues, use 'base' instead of 'this'
// to reference this class from internal events and functions.
var base = this;
// Access to jQuery and DOM versions of element
base.$el = $(el);
base.el = el;
// Add a reverse reference to the DOM object
base.$el.data("yourPluginName", base);
base.init = function(){
if( typeof( radius ) === "undefined" || radius === null ) radius = "20px";
base.radius = radius;
base.options = $.extend({},$.yourPluginName.defaultOptions, options);
// Put your initialization code here
};
// Sample Function, Uncomment to use
// base.functionName = function(paramaters){
//
// };
// Run initializer
base.init();
};
$.yourPluginName.defaultOptions = {
radius: "20px"
};
$.fn.yourPluginName = function(radius, options){
return this.each(function(){
(new $.yourPluginName(this, radius, options));
// HAVE YOUR PLUGIN DO STUFF HERE
// END DOING STUFF
});
};
})(jQuery);
用法
$(function() {
$("#round-me").yourPluginName("20px");
});
这非常有用,谢谢!
另一个非常棒且有用的代码片段!
继续努力!
不错的模板。与我见过的其他模板布局截然不同,但我一定会尝试一下。
这是一个替代的 jQuery 插件模板。
谢谢
不错的模板。
此模板与 jquery 文档完全不同。这种模板格式有什么好处吗?
我发现这个模板是我用过的所有模板中最好的一个。在过去的几年里,它一直是我的起点。
我不完全理解其组织的逻辑。如果您的示例具有一些事件驱动的功能,我认为会更容易理解。
如何使用此模板使函数公开?
例如,访问名为 base.foo 的函数?
干杯!
您可以使用 DOM 对象中的反向引用访问类似 base.foo 的内容。
$(‘someElement’).data(‘pluginName’).foo();
我也想知道 Peter G 的问题的答案。有人知道吗?
jQuery 团队没有使用此插件设计,因为它污染了 jQuery 函数命名空间。jQuery 版本更好,因为它允许您在更自然的上下文中使用“this”关键字。
+1:由于命名空间污染,这不是官方的 jQuery 方法。您仍然可以通过其他方式访问“this”——您不需要“base”。
这些有没有可能在 ie 中工作?我在左角得到条带——可能在右边也有,但它们在 div 的外部。在它工作之前,或者有一些其他解决方法,我被图像按钮困住了……有什么想法吗——除了忽略 ie6、7、8、9 之外?
尽管此插件确实具有不规则的结构,但它根本不会污染
$.fn
命名空间。只要您像这样声明函数所有函数都在
$.yourPluginName
下命名空间。这是因为所有内容都包装在主插件闭包中。此外,使用
base
代替this
是明智的,因为它可以防止新手用户将其与另一个函数上下文中的this
混淆。例如,如果您在
base.init()
内部引用this
,则您指的是 init 函数本身,而不是您的插件。使用base
使得插件所属的内容和不属于插件的内容一目了然。为什么要这样做
$.fn.yourPluginName = function(radius, options){
return this.each(function(){
(new $.yourPluginName(this, radius, options));
这简直是完美。