株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。
横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
21-10) 1. アニメーション効果でリッチなタブパネルを表示する slideUp()
基本のタブ（見出し）パネル
動作； タブ部分（#info_2110
ul.tab li a）をクリック（.click(function()）すると
下のパネルの表示（.slideDown("1000")でが切り替わる。
| jQueryの書き方 |
/*------------------------------------ */ //21-10) アニメーション効果でリッチなﾀﾌﾞﾊﾟﾈﾙに /*------------------------------------ */ //初期処理 $("#info_2110 ul.panel li:not("+$("#info_2110 ul.tab li a.selected").attr("href")+")").hide(); //クリック処理 $("#info_2110 ul.tab li a").click(function(){ $("#info_2110 ul.tab li a").removeClass("selected"); $(this).addClass("selected"); $("#info_2110 ul.panel li").slideUp("1000"); $($(this).attr("href")).slideDown("1000"); return false; }); |
|---|---|
| ｃｓｓの書き方 |
/*------------------------------------------------------- 21-10. アニメーション効果でリッチなﾀﾌﾞﾊﾟﾈﾙに -------------------------------------------------------- */ #info_2110{ width:500px; } #info_2110 ul.tab{ padding:0; } #info_2110 ul.tab li{ list-style-type:none; width:100px; height:40px; float:left; } #info_2110 ul.tab li a{ outline:none; background:url("../images/ani_tab.jpg"); display:block; color:blue; line-height:40px; text-align:center; } #info_2110 ul.tab li a.selected{ background:url("../images/ani_tab_selected.jpg"); text-decoration:none; color:#333; cursor:default; } #info_2110 ul.panel{ clear:both; border:1px solid #9FB7D4; border-top:none; padding:0; } #info_2110 ul.panel li{ list-style-type:none; padding:10px; text-indent:1em; color:#333; } |
| HTMLの書き方 |
<div id="info_2110" class="marLft50"> <ul class="tab"> <li><a href="#tab21" class="selected">JavaScript</a></li> <li><a href="#tab22">CSS</a></li> <li><a href="#tab23">HTML</a></li> <li><a href="#tab24">jQuery</a></li> <li><a href="#tab25">XHTML</a></li> </ul> <ul class="panel"> <li id="tab21"> シンプル セレクターは、文字列・・・ </li> <li id="tab22"> データ ビューにサンプル 文字列・・・ </li> <li id="tab23"> データ ビューを作成した後、文字列・・・ </li> <li id="tab24"> DetailsView コントロールを使用すると、文字列・・・ </li> <li id="tab25"> [レイヤー] パネルで、文字列・・・ </li> </ul> </div> |
- シンプル セレクターは、HTML 要素タイプだけで構成するか、HTML 要素タイプの直後に単一 ID、1 つ以上のクラス、および 1 つの擬似クラスを任意に (任意の順序で) 組み合わせて指定して構成します。ユニバーサル セレクター (*) も、ページ内のすべて要素に適用されますが、シンプル セレクターと見なされます。 セレクターがページ内の要素と一致した場合、一致した要素に、そのセレクターに関連付けられているスタイル ルールが適用されます。 複数のシンプル セレクターは、セレクター相互の関係を示す文字によって一緒にチェーン化することができます。このような文字は、シンプル セレクター相互のコンテキスト上の関係、 つまり、子孫、子、および直前直後の兄弟などといった関係を指定します。以下のスタイル ではュメント ツリー内で最上位の見出しが相互に隣接して表示される場合、 見出しの間のスペース量を減らします。 スタイル シートのサイズを小さくするには、複数のセレクターをコンマ区切りのリストにグループ化することができます。コンマ文字を使用すれば、1 つの宣言ブロックを複数の要素タイプ簡単適用することがきます。
- データ ビューにサンプル データを表示すると便利なことがあります。たとえば、データ ソースに数百ものレコードがある場合は、データ ビューにサンプル データを表示してデータ ビューの表示状態を変更する方が、 実際のデータを表示するよりも早て簡で。ま、デー には新しいデタが含まれていないこと、またはデータがまったく含まれていないことがあるため、 データ ビューの変更中にサンプル データを表示する場合があります。Microsoft Expression Web を使用すると、データ ビューにサンプル デーに表示できます。 データ ビューを作成するときに、指定した条件を満たすデータだけがビューに表示されるようにフィルターを適用できます。たとえば、データ ソースに膨大な数のレコードがある場合に、 その一部だけをデータ ビューに表示するフィルターを作成します。 フィルターを作成するときに、データに適用する 1 つまたは複数の式を作成すると、これらの条件を満たすデータが、データ ビューに追加されます。 式の節には、フィール名 (フィルターをするフィールド名前)、演算子 (等しい、より大きい、より小さいなど、値に適用するルール)、および値 (検索するデータ) という 3 つの基本的な部分があります。 1 つのフィルターで複数の式を使用するには、データに対する追加条件を指定する新しい節を追加します。 フィルターに複数の条件節が含まれている場合は、複数の条件節をグループ化して、別の条件節の前に適用することができます。条件節が適用される順序を指定すると、 データ ビューに表示されるデータを正確に操作できます。 サンプル データが表示されるのは、[デザイン] ビューのみです。サンプル データを表示しても、実際のデータには影響しません。
- データ ビューを作成した後、データ ソースの別のフィールドを表示するために、既存のデータ ビューに列を追加したり、削除したり、並べ替えることができます。 データ ビューで列を追加、削除、または並べ替えると、データ ビューに表示されるフィールドを追加、削除、または並べ替えることになります。データ ビューで 、複数のフィールドが異なる列に表示される場合は、[列の編集] ダイアログ ボックスのオプションを使用して、列を追加、削除、または移動できます。 データ ビューの行にフィールドが表示される場合も、[列の編集] ダイアログ ボックスのオプションを使用して、行を追加、削除、または移動できます。
- DetailsView コントロールを使用すると、対応するデータ ソースのレコードを 1 つずつ表示、編集、挿入、または削除できます。既定では、DetailsView コントロールは、 レコードの各フィールドを個別の行に表示します。DetailsView コントロールは、マスター ビューと詳細ビュー形式のデザインで、レコードを更新したり新しいレコードを挿入するためによく使用します。 つまり、マスター コントロールで選択されるレコードによって、DetailsView コントロールに表示されるレコードが決まります。DetailsView コントロールは、 そのデータ ソースが複数のレコードを公開している場合でも、一度にデータ レコードを 1 つだけ表示します。DetailsView コントロールに表示されるレコードを並べ替えることはできません。 既定では、DetailsView コントロールは読み取り専用モードでデータを表示します。ただし、このコントロールは、TextBox コントロール や CheckBox など、 編集可能なコントロールを含む行を表示するための編集モードもサポートしています。また、DetailsView コントロールを構成して、[削除] ボタンを表示することもできます。 お客様は、このボタンをクリックして対応するレコードをデータ ソースから削除できます。
- [レイヤー] パネルで、レイヤーの表示状態と ID を設定できます。Microsoft Expression Web では、レイヤーは、1 組の div タグで定義し、 その位置プロパティは相対または絶対に設定します。ここで示す手順以外に、レイヤーの表示状態は [CSS プロパティ] パネルで、レイヤーの ID は [タグのプロパティ] パネルで設定することもできます。 詳細については、「CSS プロパティ パネル」および「タグ プロパティ パネル」を参照してください。 ブラウザーでは、ページの DocType 宣言が読み取られ、ページで使用されている HTML のバージョンが特定されます。Microsoft Expression Web では、新しいページに DocType 宣言が自動的に挿入されるように、既定の DocType を設定できます。 新しいページに DocType 宣言が自動的に挿入されないように設定することもできます。DocType 宣言の例を次に示します。
ホーム | ｊＱｕｅｒｙのトップへ戻る | トップへ戻る
