jQuery 插件开发指南

  那么首先我们来简单的看一下最正统的 jQuery 插件定义方式:

  

复制代码 代码如下:

  (function ($) {

  $.fn.插件名 = function (settings) {

  //默认参数

  var defaultSettings = {

  }         /* 合并默认参数和用户自定义参数 */

  settings = $.extend(defaultSettings, settings);

  return this.each(function () {             //代码         });   //插件在元素内多次出现

  } })(jQuery);

  先来看模板中的第一行代码(当然我们要把这一行代码的后半部分给揪出来一起看,不然第一行就完全无意义了):

  

复制代码 代码如下:

  (function ($) {

  })(jQuery);

  这行代码其实是用于创建一个匿名函数。如果你对匿名函数和闭包不了解,将会对这种代码非常疑惑,那么强烈建议您阅读【详谈JavaScript 匿名函数及闭包】这篇文章。

  jQuery 的继承方法 $.extend —— $.extend 在jQuery 插件开发中有个很重要的作用,就是用于合并参数。

  

复制代码 代码如下:

  $.fn.tip = function (settings) {

  var defaultSettings = {

  //颜色

  color: 'yellow',

  //延迟

  timeout: 200     }

  /* 合并默认参数和用户自定义参数 */

  settings = $.extend(defaultSettings, settings);

  alert(settings.input); <br>}

  jQuery 插件定义第二种方式:

  

复制代码 代码如下:

  (function ($) {

  //插件定义--更换名字

  $.fn.tabpanel = function (method) {

  var methods = $.fn.tabpanel.methods;

  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 {

  }

  }

  //支持的方法

  $.fn.tabpanel.methods =

  {

  //初始化

  init: function (p_options) {

  tabpanelBind(p_options, this);

  },

  add: function (p_options) {

  addTab(p_options, this);

  tabpanelBind(p_options, this);

  // debugger

  }    }

  function add(p_options) {

  var _defaults = {

  id: ""

  }

  <br>    //内部实现略.........<br>        return _index;

  }

  <br>})(jQuery);<br><br>调用  $("#team").tabpanel('add',"");

  好了,上面介绍的这2种开发方式都是最常用的,小伙伴们先好好学习下吧,后续我们再介绍的更深入些