株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

     横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

31-06) 1. 自動的に動くタブパネル Ajaxのload()を使用

 

自動的に画像をスライド表示する
setInterval(function) はid要素(#b3106)を5秒間隔でクリック動作の処理を行なう。

動作; 5秒間隔でタブパネル画面の表示を繰り返す。
     マウスで選択すると選択されたタブパネル画面を表示する。
     表示データは外部ファイルを読み込み(.load())表示する。

jQueryの書き方 /*------------------------------------ */
//31-06) 簡単に更新できるタブパネル s3-4-3
/*------------------------------------ */
//初期処理
$("#info3106 p.panel").load($("#info3106 ul.tab li a.selected").attr("href"));
//選択処理
$("#info3106 ul.tab li a").click(function(){
$("#info3106 ul.tab li a").removeClass("selected");
$(this).addClass("selected");
$("#info3106 p.panel").load($("#info3106 ul.tab li a.selected").attr("href"));
return false;
});
//自動動作処理
$("#b3106")
.toggle(function(){
$("#info3106 ul.tab li a").removeClass("selected");
$("#info3106 ul.tab li a").eq(1).addClass("selected");
$("#info3106 p.panel").load($("#info3106 ul.tab li a.selected").attr("href"));
}
,function(){
$("#info3106 ul.tab li a").removeClass("selected");
$("#info3106 ul.tab li a").eq(2).addClass("selected");
$("#info3106 p.panel").load($("#info3106 ul.tab li a.selected").attr("href"));
});
--- 省略 ---
var timerID1 = setInterval(function(){
$("#b3106").click();
},5000);
cssの書き方 /*-------------------------------------------------------
31-06. 簡単に更新できるタブパネル クラス要素
-------------------------------------------------------- */
.mode_3106{
width:500px;
}
.mode_3106 ul.tab{
padding:0;
}
.mode_3106 ul.tab li{
list-style-type:none;
width:100px;
height:40px;
float:left;
}
.mode_3106 ul.tab li a{
outline:none;
background:url("../images/ani_tab.jpg");
display:block;
color:blue;
line-height:40px;
text-align:center;
}
.mode_3106 ul.tab li a.selected{
background:url("../images/ani_tab_selected.jpg");
text-decoration:none;
color:#333;
cursor:default;
}
.mode_3106 p.panel{
clear:both;
border:1px solid #9FB7D4;
border-top:none;
padding:10px;
text-indent:1em;
color:#333;
}
HTMLの書き方 <div id="info3106" class="mode_3106 marLft50">
<ul class="tab">
<li><a href="../data/ani_JavaScript.txt" class="selected">JavaScript</a></li>
<li><a href="../data/ani_CSS.txt">CSS</a></li>
<li><a href="../data/ani_HTML.txt">HTML</a></li>
<li><a href="../data/ani_jQuery.txt">jQuery</a></li>
<li><a href="../data/ani_XHTML.txt">XHTML</a></li>
</ul>
<p class="panel"></p>

</div>