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

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

jQuery

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

 

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

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

jQueryの書き方 /*------------------------------------ */
//31-05)   アコーディオンを横向きに展開する
/*------------------------------------ */
//初期処理
$("#info3105 dd:not(:first)").css("width","0px");
$("#info3105 dt:first span").addClass("selected");
//選択処理
$("#info3105 dt").click(function(){
if($("+dd.d05",this).css("width")=="0px"){
$("#info3105 dt:has(.selected) +dd").animate({"width":"0px"});
$("+dd.d05",this).animate({"width":"495px"});
$("#info3105 dt span").removeClass("selected");
$("span",this).addClass("selected");
}
//マウスホオーバー処理
}).mouseover(function(){
$("span",this).addClass("over");
//マウスオーバ後処理
}).mouseout(function(){
$("span",this).removeClass("over");
});
//自動スライド処理 setInterval()
$("#b3105").toggle(function(){
if($("#info3105 dd.d05").eq(1).css("width")=="0px"){
$("dd.d05").css("width","0px");
$("dd.d05").eq(1).animate({"width":"495px"});
$("#info3105 dt span").removeClass("selected");
$("#info3105 dt span").eq(1).addClass("selected");
}
}
,function(){
if($("#info3105 dd.d05").eq(2).css("width")=="0px"){
$("dd.d05").css("width","0px");
$("dd.d05").eq(2).animate({"width":"495px"});
$("#info3105 dt span").removeClass("selected");
$("#info3105 dt span").eq(2).addClass("selected");
}
}
,function(){
if($("#info3105 dd.d05").eq(0).css("width")=="0px"){
$("dd.d05").css("width","0px");
$("dd.d05").eq(0).animate({"width":"495px"});
$("#info3105 dt span").removeClass("selected");
$("#info3105 dt span").eq(0).addClass("selected");
}
});

var timerID1 = setInterval(function(){
$("#b3105").click();
},5000);
cssの書き方 /*-------------------------------------------------------
21-08. アコーディオンを横向きに展開する  横型、マウスオーバー
-------------------------------------------------------- */
.mode_2108{
width:600px;
height:300px;
margin:50px auto;
overflow:hidden;
}
.mode_2108 dl{
width:600px;
height:300px;
}
.mode_2108 dt{
width:35px;
height:300px;
float:left;
}
.mode_2108 dt span{
display:block;
width:100%;
height:100%;
text-indent:-9999px;
}
.mode_2108 dt span.over{
cursor:pointer;
}
.mode_2108 dt span.selected{
cursor:default;
}
.mode_2108 dt.step1 span{
background:url("../images/ani_background-1.jpg");
}
.mode_2108 dt.step1 span.over{
background:url("../images/ani_background-1-over.jpg");
}
.mode_2108 dt.step1 span.selected{
background:url("../images/ani_background-1-selected.jpg");
}
.mode_2108 dt.step2 span{
background:url("../images/ani_background-2.jpg");
}
.mode_2108 dt.step2 span.over{
background:url("../images/ani_background-2-over.jpg");
}
.mode_2108 dt.step2 span.selected{
background:url("../images/ani_background-2-selected.jpg");
}
.mode_2108 dt.step3 span{
background:url("../images/ani_background-3.jpg");
}
.mode_2108 dt.step3 span.over{
background:url("../images/ani_background-3-over.jpg");
}
.mode_2108 dt.step3 span.selected{
background:url("../images/ani_background-3-selected.jpg");
}
.mode_2108 dd.d03,
.mode_2108 dd.d05{
margin:0;
width:495px;
height:300px;
float:left;
background:#D4D0C8;
overflow:hidden;
}
.mode_2108 dd p{
width:450px;
text-indent:1em;
padding:20px;
}
HTMLの書き方 <div id="info3105" class="mode_2108">
<dl>
<dt class="step1"><span>Step.1</span></dt>
<dd class="d05">
<p>
シンプル セレクターは文字列・・・
</p>
</dd>
<dt class="step2"><span>Step.2</span></dt>
<dd class="d05">
<p>
通常、スタイル ルールは、文字列・・・
</p>
</dd>
<dt class="step3"><span>Step.3</span></dt>
<dd class="d05">
<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 プロパティ] パネルを使用します。 [新しいスタイル] ダイアログ ボックスは、[書式] メニューまたは [スタイル] ツール バーを使用して開くこともできます。詳細については、「スタイルの作成」および「スタイルの変更」を参照してください。 [新しいスタイル] および [スタイルの変更] ダイアログ ボックスには、同じカテゴリとプロパティが用意されています。[カテゴリ] ボックスの右側に表示されるプロパティには、選択したカテゴリが反映されます。