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

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

jQuery

21-08) 1. アコーディオンを横向きに展開する

 

視覚的な横向きのアコーディオンを作る

動作; マウスオーバー().mouseover(function(){)時の選択ラベルを灰色の背景色で表示し、
     マウスアウト(.mouseout(function())時に背景色を元に戻す。
     クリック(.click(function())後の展開中は
     オレンジ色のラベルで背景色とパネルを表示(addClass("selected");)する。

jQueryの書き方 /*------------------------------------ */
//21-08)  アコーディオンを横向きに展開する
/*------------------------------------ */
//初期処理
$("#info2108 dd:not(:first)").css("width","0px");
$("#info2108 dt:first span").addClass("selected");
//選択処理
$("#info2108 dt").click(function(){
  if($("+dd.d03",this).css("width")=="0px"){
    $("#info2108 dt:has(.selected) +dd").animate({"width":"0px"});
    $("+dd.d03",this).animate({"width":"495px"});
    $("#info2108 dt span").removeClass("selected");
    $("span",this).addClass("selected");
  }
  //マウスホオーバー処理
  }).mouseover(function(){
   $("span",this).addClass("over");
    //マウスオーバ後処理
   }).mouseout(function(){
      $("span",this).removeClass("over");
});
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="info2108" class="mode_2108">
<dl>
<dt class="step1"><span>Step.1</span></dt>
<dd class="d03">
<p>
シンプル セレクターは、文字列 ・・・
</p>
</dd>
<dt class="step2"><span>Step.2</span></dt>
<dd class="d03">
<p>
通常、スタイル ルールは、文字列 ・・・
</p>
</dd>
<dt class="step3"><span>Step.3</span></dt>
<dd class="d03">
<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 プロパティ] パネルを使用します。 [新しいスタイル] ダイアログ ボックスは、[書式] メニューまたは [スタイル] ツール バーを使用して開くこともできます。詳細については、「スタイルの作成」および「スタイルの変更」を参照してください。 [新しいスタイル] および [スタイルの変更] ダイアログ ボックスには、同じカテゴリとプロパティが用意されています。[カテゴリ] ボックスの右側に表示されるプロパティには、選択したカテゴリが反映されます。