Tab 插件（一）

前言

使用Jquery封装插件，使代码复用不需要每个功能重新编写代码只需修改传入参数。

jQuery 插件常见到有类开发和对象开发模式， 在下边介绍两种模式使用，初次编写，有误拍砖。

jQuery 插件编写格式

    ;(function ($, win, undefined) {
       // your code...
    })(jQuery, window);

1、使用匿名函数避免与其它库冲突

2、未了避免问题，需要在插件的前后添加；（不影响程序运行）

类开发模式

结构如下

 
    ;(function ($, win, undefined) {
      var Tab = function (ele, opt) {
        this.$element = ele;
        this.defaults = {
          // 各种参数及属性
        };
        this.options = $.extend({}, this.defaults, opt);
      };
      Tab.prototype = {
        tabInit: function () {
          var _self = this;
          return this.$element.each(function () {
            // 逻辑处理
          })
        }
      }
    })(jQuery, window)

$.fn.tabPlugin = function(options){
        var tabClass = new Tab(this, options);
        return tabClass.tabInit();
      }

$.fn.tabPlugin 这个 tabPlugin 是插件名字（可以任意改名）

this.options = $.extend({}, this.defaults, opt);   将this.defaults和opt对象合并一个对象到{}中。直接使用this.options是两个对象整合

this.$element.each 是变量该对象。。

return this.$element.each(function () {}  return 可以加，也可以不加。添加为了实现jquery串连调用

HTML部分

<div class="tab">
  <ul class="tab_nav">
    <li class="current">tab1</li>
    <li>tab2</li>
    <li>tab3</li>
  </ul>
  　　
  <div class="tab_content">
    <div style="display:block;">html</div>
    <div>css</div>
    <div>js</div>
  </div>
</div>

View Code