Cacher is the code snippet organizer for pro developers

#SelectTab Class

タブ切り替えクラス

Class (Protoype)

/**
 * selectTab Module Description v1.1.0
 * @fileoverview タブ切り替えモジュール。callbackを指定できる。
 *    対応ブラウザはモダンブラウザ（IE8以上）
 */
var SelectTab = (function () {
  var constructor = function () {
    this.el = {};
    this.$el = {};
    this.$tabPages = {};
    this.$openPageTrigger = {};
  };
  var proto = constructor.prototype;
  /**
   * Entry point
   * @param {Object} elm - 全ての要素を含んだラッパーのDOM要素
   * @param {Function} callback - 任意でタブ切り替えが完了した際のコールバック関数を指定可能
   */
  proto.set = function (el, callback) {
    this.callback = callback || function(){};
    if(el){
      this.$el = $(el);
      this.setEl();
    }else{
      throw new Error('el is Required');
    }
    this.setEl();
    this.setEvent();
    return this;
  };
  proto.setEl = function () {
    this.$tabPages = this.$el.find('.js-selectTab-tabPages');
    this.$openPageTrigger = this.$el.find('.js-selectTab-openPageTrigger');
    return this;
  };
  proto.setEvent = function () {
    var that = this;
    this.$openPageTrigger.on('click', function() {
      var currentPageClass = $(this).data('pageClass');
      that.openCurrent(currentPageClass);
    });
    return this;
  };
  proto.reset = function () {
    this.$tabPages.children().removeClass('hide').hide();
    return this;
  };
  proto.openCurrent = function (currentPageClass) {
    this.reset();
    this.$tabPages.find('.' +currentPageClass).show();
    this.callback();
    return this;
  };
  return constructor;
})();

Usage

HTML

<div id="js-selectTab">
  <ul>
    <li class="js-selectTab-openPageTrigger" data-page-class="js-tabPage1">page1</li>
    <li class="js-selectTab-openPageTrigger" data-page-class="js-tabPage2">page2</li>
    <li class="js-selectTab-openPageTrigger" data-page-class="js-tabPage3">page3</li>
  </ul>
  <div class="js-selectTab-tabPages">
    <div class="js-tabPage1">page1</div>
    <div class="js-tabPage2 hide">page2</div>
    <div class="js-tabPage3 hide">page3</div>
  </div>
</div>

JS

var callback = function () {
 // ...
};

var selectTab = new SelectTab();
selectTab.set('#js-selectTab', callback);