webデザイナの学習・Tipsなど

本・ツール・webサービス等のレビュー

リンク集

スペシャルコンテンツ

REDLINEって何?

YUI「Tabview」サンプルページ

水平にタブを並べる場合

これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。

サンプル

フォームでもテーブルでも画像でも中身は何でもOK。

左にタブを並べる場合

これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これはYUIのtabviewのサンプルです。これは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>

なんといってもソースがキレイなのが気に入った(笑)
トップページなんかでスペースを有効活用していろんなものを見せたいときなんかに使えそう。

>>Redline Magezine::YUIライブラリでタブ切替の元記事へ戻る