YUI「Tabview」サンプルページ
水平にタブを並べる場合
左にタブを並べる場合
head内のソース
<link rel="stylesheet" type="text/css" href="../tabview/assets/tabview.css">
<link rel="stylesheet" type="text/css" href="../tabview/assets/border_tabs.css">
<script type="text/javascript" src="../yahoo/yahoo.js"></script>
<script type="text/javascript" src="../event/event.js"></script>
<script type="text/javascript" src="../dom/dom.js"></script>
<script type="text/javascript" src="../element/element-beta.js"></script>
<script type="text/javascript" src="../tabview/tabview.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var tabView = new YAHOO.widget.TabView('yuidemo01');
};
YAHOO.example.init();
</script>
<style type="text/css">
<!--
#yuidemo01 {
width:500px; /* 幅の指定 */
}
a{text-decoration:none;}
#yuidemo01 .yui-content {
padding:5px;
}
-->
</style>
タブを左に持ってくる場合は・・・
<script type="text/javascript">
YAHOO.example.init = function() {
var tabView = new YAHOO.widget.TabView('yuidemo02', { orientation: 'left' });
};
YAHOO.example.init();</script>
orientation: 'left'という部分でタブをどこに置くかを指定する。rightでもbottomでも使える。
body内のソース
<div id="yuidemo01" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="#tab1">サンプル01</a></li>
<li><a href="#tab2">サンプル02</a></li>
<li><a href="#tab3">サンプル03</a></li>
</ul>
<div class="yui-content">
<div id="tab1">
<p>これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。</p>
</div>
<div id="tab2">
<ul>
<li><a href="#">リストサンプル</a></li>
<li><a href="#">リストサンプル</a></li>
<li><a href="#">リストサンプル</a></li>
<li><a href="#">リストサンプル</a></li>
</ul>
</div>
<div id="tab3">
<form action="#">
<fieldset>
<legend>サンプル</legend>
<label for="foo">
<input id="foo" name="foo">
</label>
<input type="submit" value="submit">
</fieldset>
</form>
</div>
</div>
</div>
なんといってもソースがキレイなのが気に入った(笑)
トップページなんかでスペースを有効活用していろんなものを見せたいときなんかに使えそう。