推荐一款jQuery插件模板_jquery-js教程-PHP中文网

推荐一款jQuery插件模板_jquery

php中文网

发布： 2016-05-16 16:21:26

原创

1093人浏览过

我使用jquery已经有相当长的时间了，并且我会常常为它写一些插件（plugin）。我尝试过用不同的方式去写，现在这个模板是我最喜欢的：

;(function($) {

  // multiple plugins can go here

  (function(pluginName) {

    var defaults = {

      color: 'black',

      testFor: function(div) {

        return true;

      }

    };

    $.fn[pluginName] = function(options) {

      options = $.extend(true, {}, defaults, options);

      return this.each(function() {

        var elem = this,

          $elem = $(elem);

        // heres the guts of the plugin

          if (options.testFor(elem)) {

            $elem.css({

              borderWidth: 1,

              borderStyle: 'solid',

              borderColor: options.color

            });

          }

      });

    };

    $.fn[pluginName].defaults = defaults;  

  })('borderize');

})(jQuery);

//下面是用法

$('div').borderize();

$('div').borderize({color: 'red'});

　　以下是我喜欢这种模板的原因

　　1. 你仍然可以访问里面的默认选项，即便它被重写了（简单地通过父属性的访问）

　　2. 通过修改pluginName即可更改插件的名字。（这种方式对代码压缩也非常有利）

网站建设响应式网站模板5.6

网站建设响应式网站模板源码是以cmseasy为核心进行开发的cmseasy模板，软件可免费使用，模板附带测试数据！网站建设响应式网站模板源码特点：整体采用浅色宽屏设计，简洁大气，电脑手机自适应布局，大方美观，功能齐全，值得推荐的一款模板，每个页面精心设计，美观大方，兼容各大浏览器；所有代码经过SEO优化，使网站更利于搜索引擎排名，是您做网站建设响应式网站模板的明确选择。无论是在电脑、平板、手机上都

查看详情

　　第#1点非常强大，比如说我们希望复写这个方法，但是仍然希望保留原来的方法，我们可以看下面的例子：

复制代码代码如下:

$('.borderize').borderize({

    testFor: function(elem) {

        var $elem = $(elem);

        if (elem.is('.inactive')) {

            return false;

        } else {

            // calling "parent" function

            return $.fn.borderize.defaults.testFor.apply(this, arguments);

        }

    }

});

We can even do this with regular properties like this

var someVarThatMayBeSet = false;

/* code ... */

$('.borderize').borderize({

    color: someVarThatMayBeSet ? 'red' : $.fn.borderize.defaults.color

});