jQuery UI の tabs を利用すると、タブを折りたたんで非表示にしたり、下付きのタブや縦方向に表示するタブを作成することができます。
今回は、tabs を使用して そのようなタブを実装する方法について、解説いたします。
基本的なタブの作成方法と移動可能なタブの作成方法については、以下のページもご参照下さい。
jQuery【 jQuery UI 】タブを作成するサンプル
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
jQuery UI の tabs を使用して 開閉可能なタブを作成します。
各タブをクリックしてみて下さい(アクティブなタブをクリックすると折りたたみ、再度クリックすると開きます)。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css">
<script type="text/javascript">
$(function() {
$("#tabArea").tabs({
collapsible:true
});
});
</script>
<div id="tabArea">
<ul>
<li><a href="#tab1">タブ1</a></li>
<li><a href="#tab2">タブ2</a></li>
<li><a href="#tab3">タブ3</a></li>
</ul>
<div id="tab1">
タブ1の内容です。<br><br><br>
</div>
<div id="tab2">
タブ2の内容です。<br><br><br>
</div>
<div id="tab3">
タブ3の内容です。<br><br><br>
</div>
</div>
tabs のオプション「 collapsible 」に true を設定すると、タブを閉じたり開いたりすることができるようになります。
jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。
jQuery UI の tabs を使用して 下付きのタブを作成することができます。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css">
<script type="text/javascript">
$(function() {
$("#tabArea2").tabs();
$(".tabBottom .ui-tabs-nav, .tabBottom .ui-tabs-nav > *")
.removeClass("ui-corner-all ui-corner-top" )
.addClass("ui-corner-bottom");
$(".tabBottom .ui-tabs-nav").appendTo(".tabBottom");
});
</script>
<div id="tabArea2" class="tabBottom">
<ul>
<li><a href="#tab1">下タブ1</a></li>
<li><a href="#tab2">下タブ2</a></li>
<li><a href="#tab3">下タブ3</a></li>
</ul>
<div id="tab1">
下タブ1の内容です。<br><br><br>
</div>
<div id="tab2">
下タブ2の内容です。<br><br><br>
</div>
<div id="tab3">
下タブ3の内容です。<br><br><br>
</div>
</div>
jQuery UI の tabs を使用して 縦方向のタブを作成することができます。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css">
<script type="text/javascript">
$(function() {
$("#tabArea3")
.tabs()
.addClass("ui-tabs-vertical ui-helper-clearfix");
$("#tabArea3 li")
.removeClass("ui-corner-top")
.addClass("ui-corner-left");
} );
</script>
<style>
.ui-tabs-vertical {
width: 100%;
}
.ui-tabs-vertical .ui-tabs-nav {
float: left;
width: 20%;
}
.ui-tabs-vertical .ui-tabs-nav li {
clear: left;
width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
}
.ui-tabs-vertical .ui-tabs-nav li a {
display:block;
width: 80%;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
float: right;
width: 80%;
}
</style>
<div id="tabArea3">
<ul>
<li><a href="#tab1">縦1</a></li>
<li><a href="#tab2">縦2</a></li>
<li><a href="#tab3">縦3</a></li>
</ul>
<div id="tab1">
縦タブ1の内容です。<br><br><br>
</div>
<div id="tab2">
縦タブ2の内容です。<br><br><br>
</div>
<div id="tab3">
縦タブ3の内容です。<br><br><br>
</div>
</div>
CSS の設定が少し大変ですが、色々と加工して試してみて下さい。
jQuery UI の tabs について、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
INTERNOUS,inc. All rights reserved.