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>

css部分

    ul li {

      list-style: none;

      float: left;

      overflow: hidden;

      border: 1px solid #333;

      margin: 0 10px;

      padding: 0 10px;

      text-align: center;

      color: #333;

    }

    .tab_content > div {

      display: none;

      border: 1px solid #333;

    }

    .current {

      background: #333;

      color: #fff;

    }

插件部分

    ;

    (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 () {

            // 逻辑处理

            var _this = $(this);

            _this.find('.tab_nav>li').click(function () {

              $(this).addClass('current').siblings().removeClass('current');

              var index = $(this).index();

              _this.find('.tab_content>div').eq(index).show().siblings().hide();

            });

          })
          // ----


        }

      };

      $.fn.tabPlugin = function (options) {

        var tabClass = new Tab(this, options);

        return tabClass.tabInit();

      }

    })(jQuery, window);

红线中间注解是主要关注功能

javascript调用插件

   $(function () {

      $('.tab').tabPlugin();

    })

以上以实现选项卡功能，会发现如果在其它地方也使用，还的改 “类名” 插件中红色字体部分。

解决参数传入

在 this.defaults= {} 初始化默认参数，在下图中使用：

这些红色框框，需要 “”变成“” 可以配置，其它地方也可以使用。

　　功能代码

这里使用了 var _self = this; 这里的this指向该类对象，通过_self.options.属性来获取参数

   $(function () {

      var def = {

        eventType: 'mouseover'

      }

      $('.tab').tabPlugin(def);

    })

参数传入 mouseover时，就会更改事件，其它参数也是一样的。这样改其来是不是很方便。

对象模式开发

　　结构如下

    (function ($, win, undefined) {

      $.fn.tab = function (options) {

        var defaults = {

          //各种参数，各种属性

        };

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

        this.each(function () {

          //各种功能

        });

        return this;

      }

    })(jQuery, window);

在each下对功能处理

处理方式跟之前是一样的，只是在结构上有所不通，功能是一样的

代码

 ;(function ($, win, undefined) {

      $.fn.tab = function (options) {

        var defaults = {

          currentClass: 'current',

          tabNav: '.tab_nav>li',

          tabContent: '.tab_content>div',

          eventType: 'click'

        };

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

        this.each(function () {

          var _this = $(this);

          _this.find(options.tabNav).on(options.eventType, function () {

            $(this).addClass(options.currentClass).siblings().removeClass(options.currentClass);

            var index = $(this).index();

            _this.find(options.tabContent).eq(index).show().siblings().hide();

          })

        });

        return this;

      }

    })(jQuery, window);

参考地址

巴特西

Tab 插件（一）

最新文章

热门文章