Home > スポンサー広告 > TabContent:タブを使った動的なコンテンツを作成


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 Comments:-

taka URL 2008-12-22 (月) 22:13

かっこいいですね。ありがとうございます。

質問なのですが、これはタブの数を増やすことはできますか?
まったく自分で知識がないもので、すみません。

教えて頂けるとうれしいです。

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/207-d730dfe7
Listed below are links to weblogs that reference
スポンサーサイト from TRASH

Home > スポンサー広告 > TabContent:タブを使った動的なコンテンツを作成

Home > IT Tips > TabContent:タブを使った動的なコンテンツを作成


TabContent:タブを使った動的なコンテンツを作成

タブをクリックすることで、記事を動的に変化させるJavaScript+CSSの実装方法を紹介したいと思います。これを使うことで、ページをスペースも縮小できつつ内容を充実させられるし、ユーザビリティも向上するのではないかと思います。
Tab Contentのサンプルはこちらです。
1.js(tab.js)をダウンロード
2.CSS(tab.css)をダウンロード
tab.js
tab.css
3.<head> ~ </head> に以下を記述
<link rel="stylesheet" type="text/css" href="/file/tab.css" />
<script type="text/javascript" src="/file/tab.js"></script>
4.適用させたい記事で以下のような記述をする
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
</ul>

<div style="border:1px solid gray; width:400px; margin-bottom: 1em; padding: 10px">
<div id="country1" class="tabcontent">
Tab content 1 here<br /></div>
<div id="country2" class="tabcontent">
Tab content 2 here<br /></div>
<div id="country3" class="tabcontent">
Tab content 3 here<br /></div>
<div id="country4" class="tabcontent">
Tab content 4 here<br /></div>
</div>

<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>

<p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Prev</a><a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Next</a></p>
<ul> ~ </ul>間はタブ箇所を意味します
<div> ~ </div>間はタブ内のコンテンツ箇所を意味します
<script> ~ </script>間は表示・切り替えさせる仕組みになります
<p> ~ </p>間は切り替えボタンですが、なくても問題ありません

※赤文字は一致させてください
※青文字がタブタイトルや中身のコンテンツです

その他、CSSをアップロード前にカスタマイズしたり、4項の <div style=""> をカスタマイズして、お好みのスタイルにしてください。
スポンサーサイト

 Comments:1

taka URL 2008-12-22 (月) 22:13

かっこいいですね。ありがとうございます。

質問なのですが、これはタブの数を増やすことはできますか?
まったく自分で知識がないもので、すみません。

教えて頂けるとうれしいです。

Comment Form

 Trackback+Pingback:0

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/207-d730dfe7
Listed below are links to weblogs that reference
TabContent:タブを使った動的なコンテンツを作成 from TRASH

Home > IT Tips > TabContent:タブを使った動的なコンテンツを作成

Recent Comments
Recent Trackback
Feeds

↑Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。