jquery.dualtab.js

README.md

jquery.dualtab.js プラグイン

Script Spec.

• require: jQuery v1.8.3 - v1.10.2
• Event binding: .bind()

使い方

HTML

<div id="tab01">
  <ul class="tab_list">
    <li><a href="#content01-A">content01-A</a></li>
    <li><a href="#content01-B">content01-B</a></li>
    <li><a href="#content01-C">content01-C</a></li>
  </ul>
  <div id="content01-A">content01-A</div>
  <div id="content01-B">content01-B</div>
  <div id="content01-C">content01-C</div>
</div>\

JavaScript

$("#tab01").dualTab({
  // セレクトされるタブに追加するクラス (DEFUALT : ".tab_open)"
  selected : "current",

  // #tab01 から find されるメニュー要素 (DEFAULT : ".mod_tab_menu)"
  menus    : "> .tab_list li",

  // #tab01 から find されるコンテンツ要素 (DEFAULT : ".mod_tab_body")
  body     : "> div"
});

ライセンス

BSD ライセンス

その他

バグを発見したら教えて欲しい

jquery.dualtab.d.ts

interface DualTabConfigs {
  selected: string;
  menus: string;
  body: string;
}

interface DualTabStatic {
  (configs: DualTabConfigs);
}

interface DualTab {
 (): JQuery;
 (configs: DualTabConfigs): JQuery;
}

interface JQueryStatic {
  dualTab: DualTabStatic;
}

interface JQuery {
  dualTab: DualTab;
}

jquery.dualtab.js

(function ($) {
  $.dualTab = function (element, options){
		// this.root に宣言オブジェクトを格納
		// これを元にfindで要素を探す XSS 対策
		this.root = $(element);

		this.selected = options.selected || "tab_open";
		this.menus_ = options.menus || ".mod_tab_menu";
		this.body_  = options.body  || ".mod_tab_body";

		this.menus = this.root.find(this.menus_);
		this.body  = this.root.find(this.body_);


		// タブコンテンツを初期化（非表示にする）
		this.body.hide();

		// メニュークリックの有効化
		this.menuClick();

		// 初期化時に location.hash を find でチェックする
		// 該当する要素が無いか length で確認する
		if (this.root.find(location.hash).length > 0) {
			this.root.find(location.hash).show();

			// a[href=#<condition>] に一致する要素の親要素を current に設定する
			this.setCurrentTab(location.hash);

		} else {
			// 先頭のタブのclassを取得して同じクラス名がついているものにselectedを追加
			// この場合tab1にselectedを追加
			this.setFirstTab();
		}
	}

	$.extend($.dualTab.prototype, {
		resetDualTab : function () {
			// タブメニューを初期化（カレントを消す）
			this.menus.removeClass(this.selected);

			// タブコンテンツを初期化（非表示にする）
			this.body.hide();
		},

		setFirstTab : function () {
			var target = this.menus.first().find("a").attr("href");
			this.setCurrentMenu(target, false);
			this.setCurrentTab(target);
		},

		setCurrentTab : function (target) {
			this.menus.find("a[href=" + target + "]").parent().addClass(this.selected);
		},

		setCurrentMenu : function (target, setLocation) {
			if (setLocation) {
				location.hash = target;
			}
			this.setCurrentTab(target);
			this.root.find(target).fadeIn();
		},

		menuClick : function () {
			var self = this;

			this.menus.find("a").bind("click keypress", function (event) {
				event.preventDefault();

				self.resetDualTab();
				self.setCurrentMenu($(this).attr("href"), true);

				return false;
			});
		}
	});

	$.fn.dualTab = function (options) {
		return this.each(function(){
			new $.dualTab(this, options)
		});
	};
})(jQuery);

karma.conf.js

// Karma configuration
// Generated on Fri Aug 02 2013 15:38:14 GMT+0900 (JST)


// base path, that will be used to resolve files and exclude
basePath = '';


// list of files / patterns to load in the browser
files = [
  MOCHA,
  MOCHA_ADAPTER,
  "karma.runner.js",
  "jquery.dualtab.js"
];


// list of files to exclude
exclude = [
  
];


// test results reporter to use
// possible values: 'dots', 'progress', 'junit'
reporters = ['progress'];


// web server port
port = 9876;


// cli runner port
runnerPort = 9100;


// enable / disable colors in the output (reporters and logs)
colors = true;


// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel = LOG_INFO;


// enable / disable watching file and executing tests whenever any file changes
autoWatch = true;


// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers = ['Chrome'];


// If browser does not capture in given timeout [ms], kill it
captureTimeout = 60000;


// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun = false;

karma.runner.js

(function () {
  "use strict";

  var html = [], makeTabHTML;


  /**
   * makeTabHTML
   *
   * @param key
   * @param content
   * @returns {string}
   */
  makeTabHTML = function (key, content) {
    var html = '', template = '';

    template = '\
      <div id="tab{#id}">\
        <ul class="tab_list">\
          <li><a href="#content{#id}-A">content{#id}-A</a></li>\
          <li><a href="#content{#id}-B">content{#id}-B</a></li>\
          <li><a href="#content{#id}-C">content{#id}-C</a></li>\
        </ul>\
        <div id="content{#id}-A">content{#id}-A</div>\
        <div id="content{#id}-B">content{#id}-B{#content}</div>\
        <div id="content{#id}-C">content{#id}-C</div>\
      </div>\
    ';

    template = template.replace(/\{#content\}/, function (){ return content || ""; });
    html     = template.replace(/\{#id\}/g, key);
    return html;
  };


  html.push('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>');
  html.push('<style type="text/css"> * { margin: 0; padding: 0; } </style>');
  html.push('<div id="page__contents">');
    html.push(makeTabHTML("01"));
    html.push(makeTabHTML("02", makeTabHTML("03")));
  html.push('</div>');


  document.write(html.join("\n"));

})();


setTimeout(function () {
  (function ($) {

    $("#tab01, #tab02, #tab03").dualTab({
      selected: "current",
      menus:    "> .tab_list li",
      body:     "> div"
    });

  })(jQuery);
}, 500);