Number作为默认的jquery插件选项

时间:2013-11-13 22:45:11

标签: javascript jquery jquery-plugins settings

我有点问题。 我设置了一些jquery插件默认设置:

defaults = {
    insdElmnts: 'img',
    cursorDistance : 10
};
function plugin (options) {
    this.settings = $.extend({}, defaults, options);
}

我尝试使用这个cursorDistance像这样:

_mark.css({
    left: 10 - this.settings.cursorDistance,
    top: 10 - this.settings.cursorDistance
});

但我有一些错误:无法读取未定义的属性'cursorDistance'。 什么不对?我需要添加一些单位吗?谢谢你的帮助。

1 个答案:

答案 0 :(得分:2)

1)如果你正在开发jquery插件 - "这个"里面意味着" jquery collection"。当你调用$(" .element_class")。plugin(); - 在插件函数内部,这将等于$(" .element_class")。要访问集合的每个元素 - 您应该使用.each()。

2)使用.data()方法将一些数据与html元素相关联。插件示例:

(function($){  
   var defaults = {
       insdElmnts: 'img',
       cursorDistance : 10
   };

   $.fn.pluginName= function(options) {
      //here "this" means "jquery collection"
      return this.each(function () {
          //here "this" means "html element"
          var el = $(this);    
          el.data("settings", $.extend({}, defaults, options));
          /** do here something that you need **/
      });  
   };
})(jQuery);

3)使用.data方法从插件外部提取数据:

_mark.css({
    left: 10 - _mark.data("settings").cursorDistance,
    top: 10 - _mark.data("settings").cursorDistance
});

但最好尝试编写一个能够完成所有必要工作的好插件。