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

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

jQuery

31-04)　1.自動で開閉する縦向き　アコーディオンパネル

　

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

動作；　5秒間隔で縦方向のアコーディオン画面の表示を繰り返す。
　　　　　マウスオーバー時にタイトル部に色を変更する。
　　　　　マウスで選択すると選択されたアコーディオン画面を表示する。

jQueryの書き方 /*------------------------------------ */
//31-04)　 使い勝手のいいアコーディオンを作る s3-3-2
/*------------------------------------ */
//初期処理
$("#info3104 dd:not(:first)").css("display","none");
$("#info3104 dt:first").addClass("selected");
//選択処理
$("#info3104 dt").click(function(){
if($("+dd.d04",this).css("display")=="none"){
$("dd.d04").slideUp("slow");
$("+dd.d04",this).slideDown("slow");
$("#info3104 dt").removeClass("selected");
$(this).addClass("selected");
}
//ﾏｳｽホｵｰﾊﾞｰ処理
}).mouseover(function(){
$(this).addClass("over");
//ﾏｳｽｵｰﾊﾞ後処理
}).mouseout(function(){
$(this).removeClass("over");
});

//自動スライド処理　setInterval()
$("#b3104").toggle(function(){
if($("#info3104 dd.d04").eq(1).css("display")=="none"){
$("dd.d04").slideUp("slow");
$("#info3104 dd.d04").eq(1).slideDown("slow");
$("#info3104 dt").removeClass("selected");
$("#info3104 dt").eq(1).addClass("selected")
}
}
,function(){
if($("#info3104 dd.d04").eq(2).css("display")=="none"){
$("dd.d04").slideUp("slow");
$("#info3104 dd.d04").eq(2).slideDown("slow");
$("#info3104 dt").removeClass("selected");
$("#info3104 dt").eq(2).addClass("selected");
}
}
,function(){
if($("#info3104 dd.d04").eq(0).css("display")=="none"){
$("dd.d04").slideUp("slow");
$("#info3104 dd.d04").eq(0).slideDown("slow");
$("#info3104 dt").removeClass("selected");
$("#info3104 dt").eq(0).addClass("selected");
}
});

var timerID1 = setInterval(function(){
$("#b3104").click();
},5000);
ｃｓｓの書き方 /*-------------------------------------------------------
31-04) 使い勝手のいいアコーディオンを作る たて型、マウスオーバー
-------------------------------------------------------- */
.mode_2107{
}
.mode_2107 dl{
width:600px;
margin:50px auto;
}
.mode_2107 dt{
line-height:35px;
font-size:large;
text-indent:3em;
font-weight:bold;
color:white;
height:35px;
background:url("../images/ani_background.jpg")
}
.mode_2107 dt.over{
background:url("../images/ani_background-over.jpg");
cursor:pointer;
}
.mode_2107 dt.selected{
background:url("../images/ani_background_selected.jpg");
cursor:default;
color:black;
}
.mode_2107 dd.d02,
.mode_2107 dd.d04{
height:300px;
background:#D4D0C8;
}
.mode_2107 dd p{
text-indent:1em;
padding:20px;
}
HTMLの書き方 <div id="info3104" class="mode_2107">
<dl>
<dt>Step.1</dt>
<dd class="d04">
<p>
シンプル セレクターは、文字列・・・
</p>
</dd>
<dt>Step.2</dt>
<dd class="d04">
<p>
通常、スタイル ルールは、文字列・・・
</p>
</dd>
<dt>Step.3</dt>
<dd class="d04">
<p>
[新しいスタイル] および 文字列・・・
</p>
</dd>
</dl>
</div>

Step.1

シンプル セレクターは、HTML 要素タイプだけで構成するか、HTML 要素タイプの直後に単一 ID、1 つ以上のクラス、および 1 つの擬似クラスを任意に (任意の順序で) 組み合わせて指定して構成します。 ユニバーサル セレクター (*) も、ページ内のすべて要素に適用されますが、シンプル セレクターと見なされます。 セレクターがページ内の要素と一致した場合、一致した要素に、そのセレクターに関連付けられているスタイル ルールが適用されます。 複数のシンプル セレクターは、セレクター相互の関係を示す文字によって一緒にチェーン化することができます。 このような文字は、シンプル セレクター相互のコンテキスト上の関係、つまり、子孫、子、および直前直後の兄弟などといった関係を指定します。 以下のスタイル ルールでは、ドキュメント ツリー内で最上位の見出しが相互に隣接して表示される場合、見出しの間のスペース量を減らします。

Step.2

通常、スタイル ルールは、ドキュメント構造内での要素の位置を基に適用されますが、カスケード スタイル シートでは、ドキュメント ツリーの外部にある情報に基づいて書式設定するために、 擬似クラスと擬似要素を使用します。擬似要素は、要素の一部 (:first-letterや :first-lineなど) を取り扱うのに使用します。 一方、擬似クラスは、名前、属性、コンテンツ (:first-child、:visited、:hover など) 以外で要素を分類する方法です。 通常、擬似クラスは、動的とみなされます。これは、お客様がドキュメントを操作すると、要素が擬似クラスを取得したり失なったりすることがあるからです。 擬似要素をセレクター要素と組み合わせる場合は、まずセレクターの種類を指定し、擬似要素は最後で指定します。他の要素 (クラス、ID、擬似クラス) は、どのような順序で指定してもかまいません。

Step.3

[新しいスタイル] および [スタイルの変更] ダイアログ ボックスでは、新しいスタイルまたは既存のスタイルをデザインし、デザインしたとおりにスタイルの外観をプレビューできます。 クラス、ID、要をベースにたスタイや、インライン スタイルだけでなく、複雑なセレクターを使用したスタイルなど、どのような種類のスタルでも作成および変更できます。 [新しいスタイル] ダイアログ ボックスでは、ページで現在選択しているアイテムタイルを適用したり、 既存または新規の外部 CSS (カスケード スタイル シート) やページの内部 CSS にスタイルを追加したりできます。 [新しいスタイル] または [スタイルの変更] ダイアログ ボックスを開くには、[スタイルの適用]、[スタイルの管理]、または [CSS プロパティ] パネルを使用します。 [新しいスタイル] ダイアログ ボックスは、[書式] メニューまたは [スタイル] ツール バーを用して開くことできます詳細については「スタイの作成」および「スタイルの変更」を参照してください。 [新しいスタイル] および [スタイルの変更] ダイアログ ボックスには、同じカテゴリとプロパティが用意されています。[カテゴリ] ボッスの右に表示されるプパティは、選択したカテゴリが反映されます。