今日の人気記事

  1. 画像に拡大・縮小ボタンを「Zoomer」
  2. 入力に応じてテキストエリアの高さを調節「Autosize」

テーブルにタブ機能を追加「Table Tabs」

スポンサーリンク

テーブルにタブ機能を追加するプラグイン「Table Tabs」を紹介します。

jQueryプラグイン「Table Tabs」

このプラグインを使えば、Tableにタブ機能を追加することができます。クリックでtbody部分を切り替える仕組みです。

タブを使うとWebサイト上の限られたスペースで、多くのコンテンツをユーザーにみてもらうことができるので、便利ですね。

スポンサーリンク

デモページで、テーブルに付加されたタブ機能を試してみてください。

「Table Tabs」のデモ

ソース( HTML + jQuery )

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Table Tabsのデモでーす。">
<title>Table Tabs - jQuery Plugin Demo</title>
<link rel="stylesheet" href="tabletabs.css">
<style>
table {
  margin: 20px;
}
th, td {
  padding: 10px;
}
</style>
</head>
<body>
<h1>Table Tabs のデモだよ。</h1>
<p>クリックでタブを切り替えることができます。</p>
<table border="1" class="table table-hover table-tabs">
  <thead>
    <tr>
      <th><a href="#" class="tab-control">タブ①</a></th>
      <th><a href="#" class="tab-control">タブ②</a></th>
    </tr>
</thead>
<tbody>
<tr>
<td colspan="2">
タブ①のコンテンツだよ。<br />
ああああああああああああああああああああ
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>タブ②</td><td>コンテンツだよ。</td>
</tr>
<tr>
<td colspan="2">
いいいいいいいいいいいいいいいいいいいい
</td>
</tr>
</tbody>
</table>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="tabletabs.js"></script>
<script>
  $('.table-tabs').tableTabs();
</script>
</body>
</html>
  • https://github.com/ezhikov/jQuery-Table-Tabs
スポンサーリンク

関連記事(一部広告含む)