jQuery ui tabでjqplotとかっこいいタブを使う

ページ遷移やスクロールせずに簡単に情報を見せることができるタブは訪問者にとっても使いやすいと思います。

jQuery ui tabを使うとかなりスマートでかっこいいものが作れます。

１．ヘッダー

<!– tab –>

<script type="text/javascript" src="<?= $this->BasePath ?>/share/js/tab/jquery.cookie.js"></script>

<script type="text/javascript" src="<?= $this->BasePath ?>/share/js/tab/jquery.ui.core.js"></script>

<script type="text/javascript" src="<?= $this->BasePath ?>/share/js/tab/jquery.ui.widget.js"></script>

<script type="text/javascript" src="<?= $this->BasePath ?>/share/js/tab/jquery.ui.tabs.js"></script>

<link href="<?= $this->BasePath ?>/share/js/tab/ui.tabs.css" rel="stylesheet" type="text/css" />

２．スクリプト・・・選択されたタブとjqplotを使ったのでグラフの再表示を行っています。

<script type="text/javascript">

$(function() {

$('#ui-tab').tabs({cookie: {expires: 1} });

$('#ui-tab').bind('tabsshow', function(event, ui) {

if (ui.index == 0 && plot1._drawCount == 0) {

plot1.replot();

}else if (ui.index == 1 && plot2._drawCount == 0) {

plot2.replot();

}

});

});

</script>

３．タブ

<div id="ui-tab">

<ul>

<li><a href="#fragment-1"><span>google</span></a></li>

<li><a href="#fragment-2"><span>yahoo</span></a></li>

</ul>

<div id="fragment-1"></div>

<div id="fragment-1"></div>

</div>