株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。
横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
21-09) 1. ポータルサイト風ﾀﾌﾞﾊﾟﾈﾙ show()
基本のタブ（見出し）パネル
動作； タブ部分（#info_2109
ul.tab li a）をクリック（.click(function()）すると
下のパネルの表示（show(））で切り替わる。
| jQueryの書き方 |
/*------------------------------------ */ //21-09) 基本のﾀﾌﾞﾊﾟﾈﾙの作り方 /*------------------------------------ */ //初期処理 $("#info_2109 ul.panel li:not("+$("#info_2109 ul.tab li a.selected").attr("href")+")").hide() //クリック処理 $("#info_2109 ul.tab li a").click(function(){ $("#info_2109 ul.tab li a").removeClass("selected"); $(this).addClass("selected"); $("#info_2109 ul.panel li").hide(); $($(this).attr("href")).show(); return false; }); |
|---|---|
| ｃｓｓの書き方 |
/*--------------------------------------------- 21-09) 基本のﾀﾌﾞﾊﾟﾈﾙの作り方 ---------------------------------------------- */ #info_2109{ width:500px; } #info_2109 ul.tab{ padding:0; } #info_2109 ul.tab li{ list-style-type:none; width:100px; height:40px; float:left; } #info_2109 ul.tab li a{ outline:none; background:url("tab.jpg"); display:block; color:blue; line-height:40px; text-align:center; } #info_2109 ul.tab li a.selected{ background:url("tab_selected.jpg"); text-decoration:none; color:#333; cursor:default; } #info_2109 ul.panel{ clear:both; border:1px solid #9FB7D4; border-top:none; padding:0; } #info_2109 ul.panel li{ list-style-type:none; padding:10px; text-indent:1em; color:#333; } |
| HTMLの書き方 |
<div id="info_2109"> <ul class="tab"> <li><a href="#tab11" class="selected">JavaScript</a></li> <li><a href="#tab12">CSS</a></li> <li><a href="#tab13">HTML</a></li> <li><a href="#tab14">jQuery</a></li> <li><a href="#tab15">XHTML</a></li> </ul> <ul class="panel"> <li id="tab11"> 文字列１ ・・・ </li> <li id="tab1２"> 文字列１ ・・・ </li> <li id="tab1３"> 文字列１ ・・・ </li> <li id="tab14"> 文字列４ ・・・ </li> <li id="tab15"> 文字列１５ ・・・ </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 宣言の例を次に示します。
ホーム | ｊＱｕｅｒｙのトップへ戻る | トップへ戻る
