今日の人気記事

  1. Tableカラム(列)にソート機能を追加「Tablesorter」
  2. 水平・垂直スクロースのシングルページを実装「fullPage.js」
  3. 時間入力を補助する「timepicker」
  4. ソート・フィルター・ページャー付きのテーブル「Datatable」
  5. select要素の複数選択フォームを実装「Multiple Select」

水平・垂直のどちらにもタブ設置可のコンテンツを実装「Vertical Tabs」

スポンサーリンク

水平・垂直のどちらにもタブを設置できるタブコンテンツを実装するプラグイン「Vertical Tabs」を紹介します。

jQueryプラグイン「Vertical Tabs」

このプラグインを使えば、水平(コンテンツの上部)と垂直(コンテンツの左側)のどちらにも簡単にタブメニューを設置することができます。

Webサイトに表示できるコンテンツの大きさは限られています。そのため、タブを使ってユーザーが見やすいようにコンテンツを整理したい!といった場合には、このプラグインを使用するのがいいかもしれませんね。

スポンサーリンク

デモページのタブコンテンツをご覧ください。

「Vertical Tabs」のデモ

ソース( HTML + jQuery )


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Vertical Tabs のデモでーす。">
<title>Vertical Tabs - jQueryプラグイン</title>
<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="css/vertical-tabs.css">
</head>
<body>
<h1>Vertical Tabs のデモでーす。</h1>
<h2>垂直にタブを設置</h2>
<div id="demo1">
  <ul>
    <li><a href="#one">タブ 1.</a></li>
    <li><a href="#two">タブ 2.</a></li>
    <li><a href="#three">タブ 3.</a></li>
  </ul>
  <div id="one">コンテンツ 1.</div>
  <div id="two">コンテンツ 2.</div>
  <div id="three">コンテンツ 3.</div>
</div>
<h2>水平にタブを設置</h2>
<div id="demo2">
  <ul>
    <li><a href="#one">タブ 1.</a></li>
    <li><a href="#two">タブ 2.</a></li>
    <li><a href="#three">タブ 3.</a></li>
    <li><a href="#four">タブ 4.</a></li>
    <li><a href="#five">タブ 5.</a></li>
  </ul>
  <div id="one">コンテンツ 1.</div>
  <div id="two">コンテンツ 2.</div>
  <div id="three">コンテンツ 3.</div>
  <div id="four">コンテンツ 4.</div>
  <div id="five">コンテンツ 5.</div>	
</div>

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="js/vertical-tabs.js"></script>
<script>
  $( "#demo1" ).tabs({ orientation: "horizontal" });
  $( "#demo2" ).tabs({ orientation: "vertical" });
</script>

</body>
</html>
スポンサーリンク

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