ウェブディレクション ユーザビリティ SEO アクセス解析 デザイン制作 システム webapi使い方サンプル 見本になるサイト

Ajaxのadobe spry(アドビスプライ)で作成するタブ切り替えパネル

yahooトップの真ん中にあるトピックスや経済などのタブきりかえのレイアウトを実装したい場合、いろいろなAjaxのサンプルがあるとおもいます。

とくにjqueryあたりなどがメジャーどころかもしれませんが、今回は
adobe spryでこのタブパネルを実現する方法を記載してみます。


【1】 ■■■■■■■■■■■
adobe spry は イラストレーターやらAdobe Dreamweaverなどを発売しているAdobeが出しているAjaxのライブラリです。

この中にtabきりかえのajaxがありますのでそちらを利用して作成していきます。

ちなみにですが、adobe spry の優れた点は、とてもソースコードがシンプルなことです。

CSSなどもわかりやすく記載されていますので、ある程度CSSなどの知識のある人はカスタマイズするのが楽だとおもいます。


【2】作成の手順 ■■■■■■■■■■■

こちらの「adobe spry」のページから
http://labs.adobe.com/technologies/spry/

ダウンロードの
「Get prerelease 1.6.1 of Spry framework now」(2010/10/13現在)

のリンクを押してダウンロードしてください。


*ダウンロードはアドビの会員登録をしないダウンロードできない仕様になっています(2010/10/13現在)


ダウンロードして解凍すると、いろいろとファイルがくっついてきますが、タブパネルを実現する為に必要なのは

「widgets」

というフォルダにある

「tabbedpanels」

というフォルダのなかに入っているファイル達です。

こちらのディレクトリにタブパネルのサンプルが入っています。

「SpryTabbedPanels.html」をクリックすると

タブパネルの見本がでてきます。基本的にはこちらを利用して作成することになります。


■■■■■■■■■■■■■■■■■■■■■■

Ajaxのadobe spryのタブパネルでつくってみたサンプル

http://web-directors.net/sample/tabspry/index.html

■■■■■■■■■■■■■■■■■■■■■■


サンプルのソースコード
■■■■■■■■■■■■■■■■■■■■■■

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Spry Tabbbed Panels</title>

<!-- tabパネルに必要なcssファイル -->
<link href="SpryTabbedPanels.css" rel="stylesheet" type="text/css" />

<!-- tabパネルに必要なjsファイル -->
<script language="JavaScript" type="text/javascript" src="SpryTabbedPanels.js"></script>

</head>
<body>
<p></p>
<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="1">Tab 2</li>
<li class="TabbedPanelsTab" tabindex="2">Tab 3</li>
<li class="TabbedPanelsTab" tabindex="3">Tab 4</li>

</ul>
<div class="TabbedPanelsContent">タブパネルのサンプルです</div>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Tab 2 Content</div>
<div class="TabbedPanelsContent">Tab 3 Content</div>
<div class="TabbedPanelsContent">タブパネルのサンプルです<br>一番始めに開くタブのデフォルトを「Tab 4」に設定しています<br />
<img src="GN043_L.jpg" width="480" height="640" /></div>

</div>
</div>

<!-- ページにアクセスされた際に一番最初に開いておきたいタブパネルを指定 -->
<script language="JavaScript" type="text/javascript">
var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab:3 });
</script>
</body>
</html>

■■■■■■■■■■■■■■■■■■■■■■


<!-- ページにアクセスされた際に一番最初に開いておきたいタブパネルを指定 -->

この下にある javascript の中の


「new Spry.Widget.TabbedPanels("tp1", 〜〜」の記載の「tp1」を、タブとして機能させたい<div>にidとして指定すればタブとしての機能をするようになります


また、この中のjavascriptの

{ defaultTab:3 }

の記載がデフォルトで開いているタブパネルを指定しています。

この「3」という数字は

HTMLのタブパネルの記載

<li class="TabbedPanelsTab" tabindex="3">Tab 4</li>

のtabindex="3"に対応しています


Ajaxのadobe spry では、このような形でわりとシンプルにタブを作成することが可能です。


ちなみにですが、「spry」はスプライと読みます。

http://translate.google.co.jp/?hl=ja#en|ja|spry

「プスレイ」とか「エスピーアールワイ」とか、変な読みかたしていると恥ずかしいので、正式な読みかたで、発音してあげてくださいね




Yahoo!ブックマークに登録     
このエントリーをはてなブックマークに追加

無料素材イラストダウンロード
今週のピッアップ記事
ウェブディレクターズスタッフブログ

メルマガ購読・解除
 
webディレクターズリンク集