前回は、実際にBootstrapをインストールし、簡単な動作を確認しました。
今回も引き続き、Bootstrap標準の機能について、ご紹介します。
■作成したHTMLページ
今回作成したHTMLページは、図1のものです。
＜図1 サンプルページ＞
ヘッダー部分に、プルダウン式のメニューを配置しています。
コンテンツ部分には、タブで切り替わる部品を2つ、配置しています。
たとえば、ヘッダー部分で図2のように、「2-3」を選択すると
コンテンツ部分では「2-3」のタブが選択状態になります。
＜図2 ヘッダー部分でメニューを選択＞
＜図3 ヘッダー部分でメニューを選択＞
御覧の通り、タブ表現も、中身のコンテンツもさし変わっていますが、
これらの機能は、難しいJavaScriptを組むことなく、
Bootstrapの標準機能で、ほとんどできてしまいます。
■参考サイト
前回もご紹介しましたが、以下のページに、詳しい内容が記載されています。
http://php-fan.org/sample_code_demo/bootstrap-js.html#tabs
■HTMLの紹介
今回作成した、HTMLの中身は、以下の通りです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<header style="text-align:center; background-color:#FFFF88; margin-bottom:20px;">
<div style="display: flex; text-align:center; border: 1px solid #000000;">
<div style="width:50%; margin-top:auto; margin-bottom:auto;">
テストページ
</div>
<div>
<ul class="nav pills">
<li class="dropdown" id="menu1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
メニュー1
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#1-1" onclick="changetab(1,1);">1-1</a></li>
<li><a href="#1-2" onclick="changetab(1,2);">1-2</a></li>
<li><a href="#1-3" onclick="changetab(1,3);">1-3</a></li>
</ul>
</li>
</ul>
</div>
<div>
<ul class="nav pills">
<li class="dropdown" id="menu2">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu2">
メニュー2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#2-1" onclick="changetab(2,1);">2-1</a></li>
<li><a href="#2-2" onclick="changetab(2,2);">2-2</a></li>
<li><a href="#2-3" onclick="changetab(2,3);">2-3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<content>
<ul class="nav nav-tabs">
<li class="active"><a id="tab-1-1" href="#1-1" data-toggle="tab">1-1</a></li>
<li> <a id="tab-1-2" href="#1-2" data-toggle="tab">1-2</a></li>
<li> <a id="tab-1-3" href="#1-3" data-toggle="tab">1-3</a></li>
</ul>
<div class="tab-content" style="width:100%; height:100px; border: 1px solid #000000;">
<div class="tab-pane active" id="1-1">
1-1 のコンテンツ
</div>
<div class="tab-pane" id="1-2">
1-2 のコンテンツ
</div>
<div class="tab-pane" id="1-3">
1-3 のコンテンツ
</div>
</div>
<br>
<ul class="nav nav-tabs">
<li class="active"><a id="tab-2-1" href="#2-1" data-toggle="tab">2-1</a></li>
<li> <a id="tab-2-2" href="#2-2" data-toggle="tab">2-2</a></li>
<li> <a id="tab-2-3" href="#2-3" data-toggle="tab">2-3</a></li>
</ul>
<div class="tab-content" style="width:100%; height:100px; border: 1px solid #000000;">
<div class="tab-pane active" id="2-1">
2-1 のコンテンツ
</div>
<div class="tab-pane" id="2-2">
2-2 のコンテンツ
</div>
<div class="tab-pane" id="2-3">
2-3 のコンテンツ
</div>
</div>
</content>
<script>
function changetab(a,b) {
$('#tab-' + a + '-' + b).click();
}
</script>
</body>
</html>
■タブの動きについて
タブの動きは、大きく3つの要素で成り立っています。
１）タブのグループ
２）タブ
３）そのタブが選択された時、どのコンテンツがActiveになるか
１）タブのグループ
<ul class="nav nav-tabs">…</ul>
が、タブのグループ単位になります。
２）タブ
タブのグループの中に記載している1つ1つのリスト、
<li><a data-toggle="tab"></a></li>
が、タブになります。
data-toggle=”tab” を設定することで、この部品が選択された時に、
タブが有効になります。
３）そのタブが選択された時、どのコンテンツがActiveになるか
aタグの中に記載している、
href=”#1-1″
が指示しているidになります。
たとえば、#1-1でしたら、
<div class="tab-pane active" id="1-1"> 1-1 のコンテンツ </div>
が有効になります。
■ヘッダーのメニューとの連動
ヘッダーのメニューは、プルダウン式になっています。
プルダウンの動きだけでしたら、参考サイトに詳細記載されていますが、
以下のように記載します。
<ul class="nav pills"> <li class="dropdown" id="menu1"> <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> メニュー1 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#1-1">1-1</a></li> <li><a href="#1-2">1-2</a></li> <li><a href="#1-3">1-3</a></li> </ul> </li> </ul>
しかし、このままだと、タブの部分とは連動してくれません。
そこで今回は、
<li><a href="#1-1" onclick="changetab(1,1);">1-1</a></li>
のように、onclickイベントを追加して、JavaScriptで
<script>
function changetab(a,b) {
$('#tab-' + a + '-' + b).click();
}
</script>
と記述し、タブも一緒に変更されるようにしています。
※今回、自分で書いたJavaScriptコードは、これだけです！
■終わりに
動きのあるコンテンツも、自分でほとんどJavaScriptコードを書くことなく
簡単に作ることが出来ました。
Bootstrapには、標準でまだまだ、便利な機能がございますので、
是非、使ってみて頂きたいです。
弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。