2008

5/5

「tabAccordion」　設置説明　java script

Last modified: 2008年5月9日 （金）　 pm 5時29分
Posted by jun  Published in java script

▼


またまた、スライド式の 「tabAccordion」 という面白いスクリプトを発見したので試してみた。
・・・今回も、なんの問題もなく設置できました。　（＾∀＾）


設定方法

こちらからダウンロード

解凍後にできた「tabAccordion」フォルダを、ご自分のスクリプト置き場に転送してください。（ここでは /wp-content/js/tabAccordion/　に置いたものとして説明します。）

次に「JavaScript」 を、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。 自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script type="text/javascript" src="http://example.com/wp-content/js/tabAccordion/prototype.lite.js"></script>
<script type="text/javascript" src="http://example.com/wp-content/js/tabAccordion/moo.fx.js"></script>
<script type="text/javascript" src="http://example.com/wp-content/js/tabAccordion/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
var stretchers = document.getElementsByClassName('box');
var toggles = document.getElementsByClassName('tab');
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, 'nextSibling');
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
黄色の部分にファイルの設置場所（アドレス）を指定
赤文字の部分が、記事本文内に記述して「tabAccordion」に認識させる 「クラス名」 & 「タグ名」 です・・・この部分は変更できます。自分の場合は「クラス名」の「box」が使用していたのと、「タグ名」の「h3」のスタイルが問題あったので変更しました。


使用方法

本文投稿内の記述方法は・・・
ダウンロードして解凍したフォルダの中にある「tabbed.html」を参考にしてください・・・・σ(^◇^;)ヒヤアセ
せっかくですので、自分が設置してみた下記にあるサンプルの記述を載せておきます。
※　スタイルシートは別に用意して上記の<head>〜</head>の間で読み込ませる方法か、ご自分のテーマのスタイルシートに追記する方法などで良いと思いますが、この例は記事本文中に記述しました。
長いです！！
・・・下記サンプルのソースを見てもらうとわかると思いますが、この例は<head>間のスクリプト部分もすべて記事内に記述しています。　(;^_^A アセアセ
<!-- スタイル 部分 -->

<style type="text/css">
<!--
.tabtxt a{
color: #fff !important;
text-decoration: none;
}
.tabtxt a:hover{
color: #FF8000 !important;
}
p{
margin: 0;
padding: 5px;
line-height: 1.5em;
text-align: justify;

}
#wrapper{
width: 500px;
margin: 0 auto;
}
.box2{
background: #fff;
line-height: 18px !important;
}
.box2 img{
vertical-align:bottom !important;
}
.box2 ul{
padding: 20px 40px;
}
.box2 a{
color: #464646 !important;
text-decoration: none !important;
font-weight: bold !important;
}
.box2 a:hover{
color: #4f6cf4 !important;
font-weight: bold !important;
text-decoration: underline !important;
}
.boxholder{
clear: both;
padding: 5px;
background: #0A8DC7;
}
.tab{
float: left;
height: 32px;
width: 102px;
margin: 0 1px 0 0;
text-align: center;
background: #0A8DC7 url(http://example.com/wp-content/js/tabAccordion/images/greentab.jpg) no-repeat;
}
.tabtxt{
margin: 0;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 9px 0 0 0;
}
#post_entry ul {
margin: 0px;
}
-->
</style>



<!-- スクリプト 部分　１ -->

<script type="text/javascript" src="http://example.com/wp-content/js/tabAccordion/prototype.lite.js"></script>
<script type="text/javascript" src="http://example.com/wp-content/js/tabAccordion/moo.fx.js"></script>
<script type="text/javascript" src="http://example.com/wp-content/js/tabAccordion/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
var stretchers = document.getElementsByClassName('box2');
var toggles = document.getElementsByClassName('tab');
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(ul, i){
var div = Element.find(ul, 'nextSibling');
if (window.location.href.indexOf(ul.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>



<!-- メイン 部分 -->

<div id="wrapper">
<div id="content">
<div class="tab">
<ul class="tabtxt" title="カテゴリー"><a href="javascript:;">カテゴリー</a></ul>
</div>
<div class="tab">
<ul class="tabtxt" title="アーカイブ"><a href="javascript:;">アーカイブ</a></ul>
</div>
<div class="tab">
<ul class="tabtxt" title="ページ"><a href="javascript:;">ページ</a></ul>
</div>
<div class="tab">
<ul class="tabtxt" title="最近の人気記事"><a href="javascript:;">最近の人気記事</a></ul>
</div>
<div class="boxholder">
<div class="box2">
<p><ul>ここに表示させたい文章を記述</ul></p>
</div>
<div class="box2" style="background: #E1F0FF !important";>
<p><ul>ここに表示させたい文章を記述</ul></p>
</div>
<div class="box2" style="background: #CEE7FF !important";>
<p><ul>ここに表示させたい文章を記述</ul></p>
</div>
<div class="box2" style="background: #A6D2FF !important";>
<p><ul>ここに表示させたい文章を記述</ul></p>
</div>
</div>
</div>
</div>



<!-- スクリプト 部分　２ -->
<!-- ここも忘れずに記述してください。　ここは、メイン部分（記事内本文）の下に記述します。 -->

<script type="text/javascript">
Element.cleanWhitespace('content');
init();
</script>
と、いう感じで記述しました・・・うぅ～ん、カラフルゥ～～♪　　・・・っていうか、長すぎ！！　・・・(゜＿゜i)タラー・・・「

スタイル部分は多少変えてあります。
上記を例に、ついでに軽く説明しておきますと・・・
黄色文字のところは、ご自分の設置場所を指定。
「スクリプト 部分　１」 と 「メイン 部分」 の赤色文字は、連動しているので同じにします。
「スクリプト 部分　２」 と 「メイン 部分」 の橙色文字も、連動しているので同じにします。 
水色文字のところが、「タブ部分」になります。
桃色文字のところが、スライドする 「ボックス部分」になります。（サンプルでは「php」を使用しています。）
そして、こだわった部分？の青色文字のところで 「ボックス部分」の背景色を、それぞれ変えています・・・ぶっちゃけると白だ上下のスライドの動きがわかりづらかったからです・・・(;^_^A アセアセ


サンプル

こちらになります。


以上終了です。

人気度 : 17 %

「20点」　まったく役に立たなかったよ　。。｡･ﾟﾟ･(＞Д＜；)･ﾟﾟ･｡。。。「40点」　ちょっとだけ役に立ったかな　(T^T)「60点」　まぁ～まぁ～の記事だね　v（＾∀＾）v「80点」　良い記事だけど、あとちょっと・・・　(ノ´▽｀)ノオオオッ♪「100点」　探していたのはこの記事だ！！　(*ﾟ oﾟ*) マジっすか！？ （ 参考になったら、評価してねぇ～　(o*。_。)oペコッ

Previous Top



関係のある記事

No user の書き込みがあります

Subscribe to this post コメント RSS or トラックバック URL
コメントほしぃ～よぉ～　σ(^◇^;)

 お名前 (* 必須)

 メールアドレス (* 非公開)

 ウェブサイト (* 任意)