在jquery插件中定义选项的正确位置
Correct place to define options in jquery plugin
我有一个jQuery插件,它使用名称空间(方法),还具有可在初始化时重写的默认选项。
我想知道定义和使用选项的最佳方式是在名称空间中使用此插件。
我最初在包装函数中使用$.fn.dropIt.settings
来定义设置,但后来改为在init
方法中定义它们。然而,就范围而言,这是非常有限的。。
以下是我的插件中的相关代码
(function($, window, document, undefined){
var methods = {
init: function(options)
{
var settings = $.extend({
trigger: "hover",
animation: 'slide', /* none, slide, fade, grow */
easing: 'swing', /* swing, linear, bounce */
speedIn: 400,
speedOut: 400,
delayIn: 0,
delayOut: 0,
initCallback: function(){},
showCallback: function(){},
hideCallback: function(){}
}, options);
$(this).each(function(index, ele){
$ele = $(ele);
$ele.addClass('dropit');
//Attach event handlers to each list-item
$('li', $ele).dropIt('attach', settings);
//If list is displayed veritcally, add extra left padding to all sub-menus
if($(ele).hasClass('vertical'))
{
$('li', $ele).find('ul').addClass('nested sub-menu');
} else {
$('li ul', $ele).addClass('nested').find('ul').addClass('sub-menu');
}
});
//Call custom callback
settings.initCallback.call();
//Return jQuery collection of lists
return $(this);
},
attach: ...
_trigger: ...
_hide: ...
}
};
$.fn.dropIt = function(method){
//Variables and Options
var $this = $(this);
// Method calling logic
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.dropIt' );
}
};
})(jQuery, window, document);
在阅读了jQuery插件/创作页面后,我的插件结构基本上是这样的:
(function ($) {
var defaults = {
// set default options
}
// internal functions
var methods = {
// plugin methods
}
$.fn.pluginName = function (method) {
}
})(jQuery);
而且,和您所做的一样,$.extend
是init方法中的默认值,但为了清楚起见,我喜欢单独声明默认值。它对我来说一直很好。
我总是将设置对象设置为插件范围的全局var,如下所示:
(function($, window, document, undefined){
var settings; //NOTE THIS LINE
var methods = {
init: function(options)
{
settings = $.extend({ //AND THIS LINE
trigger: "hover",
animation: 'slide', /* none, slide, fade, grow */
easing: 'swing', /* swing, linear, bounce */
speedIn: 400,
speedOut: 400,
delayIn: 0,
delayOut: 0,
initCallback: function(){},
showCallback: function(){},
hideCallback: function(){}
}, options);
$(this).each(function(index, ele){
$ele = $(ele);
$ele.addClass('dropit');
//Attach event handlers to each list-item
$('li', $ele).dropIt('attach', settings);
//If list is displayed veritcally, add extra left padding to all sub-menus
if($(ele).hasClass('vertical'))
{
$('li', $ele).find('ul').addClass('nested sub-menu');
} else {
$('li ul', $ele).addClass('nested').find('ul').addClass('sub-menu');
}
});
//Call custom callback
settings.initCallback.call();
//Return jQuery collection of lists
return $(this);
},
attach: ...
_trigger: ...
_hide: ...
}
};
$.fn.dropIt = function(method){
//Variables and Options
var $this = $(this);
// Method calling logic
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.dropIt' );
}
};
})(jQuery, window, document);
编辑:您也可以执行$(this).data('youPlugInName', settings)
,然后如果您想在以后更改它,您可以从data('yourPlugInName')
中检索它,并更新您想要的任何属性。
相关文章:
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 更改Chrome扩展中的选项卡位置
- 谷歌地图点击链接/选项卡更改标记位置地图
- 保留选项后的滚动位置(单击时)
- 为什么首先单击文档空白处的任何位置启动代码,而不是单击超链接,以及为什么打开了太多选项卡
- 在jquery插件中定义选项的正确位置
- 从Web应用程序发送地理位置,即使选项卡不在焦点上
- Angularjs select:如何获取所选项目的位置并设置默认选择
- 使用 JavaScript 更改选项的位置
- 通过火狐扩展在特定位置打开选项卡
- 使用页面上其他位置的链接激活选项卡
- 根据滚动位置更新选择菜单中的选定选项
- 画布的奇怪行为 上下文变量定义位置导致选项卡处于非活动状态时画布呈现冻结
- 如何检测选项卡的激活位置
- 保存文件选项,用于将html文件保存在系统中的给定位置
- 在 Firefox 中,当选择具有位置和 z 索引时,为什么更改事件不会在选项卡上触发
- 谷歌地图API v3可拖动光标选项,如位置
- 窗口位置 在新选项卡中打开
- 需要找到我的单选选项已检查值更改的位置
- 谷歌标记位置选项:从谷歌融合表中检索纬度和经度