タブパネル解説と実験のページ

ホーム

タブパネル(Adobe Spry framework for Ajax)を実行すると以下のようになります。

1.タブを上に配置した場合

  • CSS
  • JavaScript
  • PerlCGI
主にページの見栄え系に手を加える目的で使っています。
主にページの中で動作を起こす目的で使っています。
またタブパネルも、このテクノロジーで動いています。
難しいことは解りませんが、アクセスカウンターで使っています。

2.タブを横に配置した場合

  • CSS
  • JavaScript
  • PerlCGI
主にページの見栄え系に手を加える目的で使っています。
主にページの中で動作を起こす目的で使っています。
またタブパネルも、このテクノロジーで動いています。
難しいことは解りませんが、アクセスカウンターで使っています。

解説

1.タブを上に配置した場合
Windows XP のシステムプロパティ(コントロールパネル → パフォーマンスとメンテナンス → システムのプロパティ)のような・・・といえばピンとくるでしょうか、
CSS、JavaScript、PerlCGIっと横に並んでいる「見出し」をクリックすると直下にある、それぞれに対応した説明用パネルが「見出し」に合わせ、まるでページをめくるかのように切り替わります。
2.タブを横に配置した場合
動作自体は同じですが「見出し」部分を左横に配置した例です。
「見出し」の数が多い場合、横方向に限度のあるHTMLページではオーバフローして見栄えが悪くなってしまうでしょう・・・そんな場合に有効かと思います。

実験

以下にタブパネルコントロールを実装する際必要になるタグや、ファイルなどをまとめてみました。

1.Adobe Spry framework for Ajax ダウンロード → ダウンロードはID登録(無料)後になります。

例として、このページの構成を以下に表します(これは、単に構造を示すためですのでファイルリンクしていません)。

元ファイルはダウンロード後展開したSpry_P1_6_10-01フォルダーの中の次の場所にあります。

Spry_P1_6_10-01/widgets/tabbedpanels/

2.tabbedpanels.html

タブの位置はTabbedPanelsVTabbedPanels っと頭に V をつけるだけで、に変わります。

<!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>
<title>TabbedPanels/hiroshiのホームページ作成テクニック</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../sample/css/hiroshi1986.css" media="all" />
<link rel="stylesheet" type="text/css" href="SpryTabbedPanels.css" media="all">
<script type="text/javascript" src="../../js/SpryTabbedPanels.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>タブパネル解説と実験のページ</h1>

<p>1.タブを上に配置した場合</p>
<div class="TabbedPanels" id="tabPanel1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">CSS</li>
<li class="TabbedPanelsTab" tabindex="0">JavaScript</li>
<li class="TabbedPanelsTab" tabindex="0">PerlCGI</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">主にページの見栄え系に手を加える目的で使っています。</div>
<div class="TabbedPanelsContent">主にページの中で動作を起こす目的で使っています。<br />またタブパネルも、このテクノロジーで動いています。</div>
<div class="TabbedPanelsContent">難しいことは解りませんが、アクセスカウンターで使っています。</div>
</div>
</div>
<br />

<p>2.タブを横に配置した場合</p>
<div class="VTabbedPanels" id="tabPanel2">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">CSS</li>
<li class="TabbedPanelsTab" tabindex="0">JavaScript</li>
<li class="TabbedPanelsTab" tabindex="0">PerlCGI</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">主にページの見栄え系に手を加える目的で使っています。</div>
<div class="TabbedPanelsContent">主にページの中で動作を起こす目的で使っています。<br />またタブパネルも、このテクノロジーで動いています。</div>
<div class="TabbedPanelsContent">難しいことは解りませんが、アクセスカウンターで使っています。</div>
</div>
</div>

<div style="clear:both"></div>

</body>
</html>

3.main.js

実装するタブパネルコントロールのIDを編集・追加します。
具体的に、このページでは tbObj2 = ・・・tabPanel2・・・ を追加しています。

var tbObj1
var tbObj2

window.onload = function() {

tbObj1 = new Spry.Widget.TabbedPanels("tabPanel1");
tbObj2 = new Spry.Widget.TabbedPanels("tabPanel2");

}