SpryTabbedPanels.jsを作ってみた。
今回も懲りずに、タブを押すと、コンテンツが切り替わるJavaScriptです。
Spryを使った、SpryTabbedPanels.jsというJavaScriptです。
こんなのです。
/* SpryTabbedPanels.jsの準備 */
こちらから、"Downloads"より一番したにある、Spryのファイルをダウンロードしてください。それを解凍し、"widgets"→"tabbedpanels"内の"SpryTabbedPanels.css"と"SpryTabbedPanels.js"の二つのファイルを抜き取ってください。
これで準備は完了です。
/* SpryTabbedPanels.jsの設置 */
まず、フォルダの構成は、
index.html
css
- SpryTabbedPanels.css
js
- SpryTabbedPanels.js img
- frm_box_01.gif
- frm_box_02.gif
- frm_box_03.gif
- img_tab.gif
- img_tab_o.gif
となっています。
次に、<head>～</head>内に次のソースを書いていきます。
<link rel="stylesheet" href="css/SpryTabbedPanels.css" type="text/css" media="all">
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
width: 365px;
}
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#tab_btm {
background-image: url(img/frm_box_03.gif);
background-repeat: no-repeat;
background-position: left top;
height: 20px;
width: 365px;
}
p{
width: 350px;
}
--></style>
<script src="js/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript"><!--
window.onload = function() {
new Spry.Widget.TabbedPanels("tabPanel1");
}
// --></script>
最後に、<body>タグを書きます。
<div class="TabbedPanels" id="tabPanel1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">タブ1</li>
<li class="TabbedPanelsTab" tabindex="0">タブ2</li>
<li class="TabbedPanelsTab" tabindex="0">タブ3</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<p>タブ1のコンテンツが表示されます。</p>
</div>
<div class="TabbedPanelsContent">
<p>タブ2のコンテンツが表示されます。</</p>
</div>
<div class="TabbedPanelsContent">
<p>タブ3のコンテンツが表示されます。</</p>
</div>
</div>
</div>
<div id="tab_btm"></div>
数を増やしたい時は、class="TabbedPanelsTab"でタブを、class="TabbedPanelsContent"でそれに対応するコンテンツを増やせば大丈夫です。その際、CSSでサイズの調整が必要になります。
/* 参考サイト */
pry:SpryTabbedPanels*サイトをコンパクト化する
【Adobe Spry TIPS 】タブパネル[to-R]
GoodSleep : クリックしたタブに応じて表示内容が変わる
こちらでサンプルダウンロードできます。
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)