テーブルにタブ機能を追加「Table Tabs」
当ページのリンクには広告が含まれています。
スポンサーリンク
テーブルにタブ機能を追加するプラグイン「Table Tabs」を紹介します。
jQueryプラグイン「Table Tabs」
このプラグインを使えば、Tableにタブ機能を追加することができます。クリックでtbody部分を切り替える仕組みです。
タブを使うとWebサイト上の限られたスペースで、多くのコンテンツをユーザーにみてもらうことができるので、便利ですね。
スポンサーリンク
デモページで、テーブルに付加されたタブ機能を試してみてください。
ソース（ 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
スポンサーリンク