シンプルなタブメニューボックス/コンテンツ表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

スポンサードリンク

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style type="text/css"> 
<!--
*{padding:0; margin:0;}
body{margin:10px;font-size:12px;color:#333; background-color:#000}

strong{color:#FF9900;}

div#tab-container-1 ul{
  height:30px;
  border-left:1px solid #999;
  border-bottom:1px solid #999;
  list-style:none;
}

div#tab-container-1 ul li{
  width:70px;
  height:29px;
  border:1px solid #999;
  border-left:none;
  border-bottom:none;
  background-color:#DDD;
  float:left;
}

div#tab-container-1 ul li.activeli{
  height:30px;
  background-color:#FFF;
}

div#tab-container-1 ul li a{
  display:block;
  width:70px;
  height:22px;
  padding-top:8px;
  color:#000;
  text-align:center;
  text-decoration:none;
}

div#tab-container-1 ul li.activeli a{font-weight:bold;}

div.tab{
  border:1px solid #999;
  border-top:none;
  padding:10px;
  background-color:#FFF;
}
--> 
</style> 
<script type="text/javascript" src="yetii.js"></script> 
</head>

<body>
  <div id="tab-container-1">
    <ul id="tab-container-1-nav">
      <li><a href="#sampletab1">SAMPLE1</a></li>
      <li><a href="#sampletab2">SAMPLE2</a></li>
      <li><a href="#sampletab3">SAMPLE3</a></li>
    </ul>
  
    <div class="tab" id="sampletab1">
    SAMPLE<strong>1</strong>で切り替えられるボックス
    </div>
  
    <div class="tab" id="sampletab2">
    SAMPLE<strong>2</strong>で切り替えられるボックス
    </div>
    
    <div class="tab" id="sampletab2">
    SAMPLE<strong>3</strong>で切り替えられるボックス
    </div>

	<script type="text/javascript">
	var tabber1 = new Yetii({
	id: 'tab-container-1'
	});
	</script>
  </div>
</body>
</html>

	Yetii

構造と導入がシンプルで、動作も軽快なタブ切り替え型ボックス、yetii.js。
yetii.jsのみで動作する為、他のライブラリを読み込まなくて良い。
デザインもCSSで行いやすく、タグの構造もシンプルなので、CMS等に導入しやすいと思う。

準備
実装
CSS

ダウンロード

上記「Download」タブから、Yetiisへ行きダウンロード。
ページ下部の「yetii.js」というリンクをクリックすると、jsファイルが表示されるので、
それをyetii.jsと名前をつけて、任意の場所へ保存する。

<head>～</head>にJavascriptを読み込ませる

　<script type="text/javascript" src="yetii.js"></script>　

ヘッダーにyetii.jsを読み込ませる。
とりあえず準備はこれだけ。

タグマークアップ

まず、タブ切り替えの範囲を下記のようにマークアップ。

<div id="tab-container-1">
</div>

id="tab-container-1"を定義つけるのが重要。
次は上記のタグ内に、タブメニューを設置。

<div id="tab-container-1">
  <ul id="tab-container-1-nav">
    <li><a href="#sampletab1">SAMPLE1</a></li>
    <li><a href="#sampletab2">SAMPLE2</a></li>
    <li><a href="#sampletab3">SAMPLE3</a></li>
  </ul>
</div>

ulに、tab-container-1-navを定義する。
li内のリンクには切り替えターゲットのボックスのIDを設定。
次はそのターゲットのボックスを設置する。

<div id="tab-container-1">
  <ul id="tab-container-1-nav">
    <li><a href="#sampletab1">SAMPLE1</a></li>
    <li><a href="#sampletab2">SAMPLE2</a></li>
    <li><a href="#sampletab3">SAMPLE3</a></li>
  </ul>
  <div class="tab" id="sampletab1">
     SAMPLE<strong>1</strong>で切り替えられるボックス;
  </div>
  <div class="tab" id="sampletab2">
     SAMPLE<strong>2</strong>で切り替えられるボックス;
  </div>
  <div class="tab" id="sampletab2">
    SAMPLE<strong>3</strong>で切り替えられるボックス;
  </div>
</div>

このとき、ターゲットのボックスのクラスに"tab"を定義することを忘れない。
そして最後に、スクリプト実行のトリガーを設置する。

<script type="text/javascript">
var tabber1 = new Yetii({
id: 'tab-container-1'});
</script>

これは適当なところでOK。
yetii.jsにid="tab-container-1"を処理する命令を送っている。同一ページ内に複数のタブを設置したい場合は、htmlのid,jsの部分のtab-container-1を変更する。
数字を変更するのが分かりやすくていいかもしれない。最後のjsはとりあえず設置した数だけ設定しておく。