JS は、Repeater control_javascript スキルに非表示領域を作成するコードを実装します。-jsチュートリアル-php.cn

Web アプリケーションの規模が大きくなるにつれて、データが増えすぎて 1 ページに同時に表示されるページが見苦しくなり、ユーザーが退屈して操作しにくくなることがあります。したがって、この記事では、より良いデータ表示効果を実現するために、リピーターコントロールの非表示領域の使用方法を紹介します。

データページングの使用や、各データの主要な内容を最初に表示し、詳細データの場合はユーザーが必要とするだけのマスター/詳細メソッドの使用など、過剰なデータの読み込みを防ぐ方法は数多くあります。詳細リンクをクリックするだけで十分です。この記事では、データを折りたたんで非表示にする別の方法を紹介します。ユーザーが各レコードの詳細な説明を表示する必要がある場合、元のデータレコードの直下にあるリンクウィンドウを開く必要はありません。元々非表示だったデータが表示されます。これにより、ユーザの操作が便利となる。まずは実際の効果を見てみましょう (http://aspnet.4guysfromrolla.com/demos/collapsibleRepeater.aspx)。次に、その効果をリピーターに実装する方法を見てみましょう。

上記の効果を実現するには、クライアント側のスクリプト技術を使用して、特定の領域を非表示または表示する必要があります。 IE 4.x 以降では、このテクノロジを実装できます。たとえば、ユーザーがクリックしたときに

タグ内のコンテンツを動的に非表示にしたり、ユーザーがマウスを特定の領域に移動したときに

タグ内のコンテンツを表示したりできます。重要な点は、その表示と可視性の CSS スタイルプロパティにあります。次のコードは、ユーザーが [HIDE CONTENT] ボタンをクリックすると、最初に表示されていたテキストが非表示になり、[Show content] をクリックすると、元のテキストが再度表示されます。

コードをコピーコードは次のとおりです:

このテキストは、下の適切なボタンをクリックすると表示または非表示になります...
< /div>
onclick="showHideContent(' someRegion', false);">

上記の JavaScript コードでは、HTML 要素の表示属性と可視性属性が最大限に活用されており、これら 2 つの属性は同時に使用する必要があることに注意してください。まず、ボタンボタンの onclick イベントで、カスタム JavaScript で記述された関数 showhidecontent が呼び出されます。この関数には、id と show という 2 つのパラメータがあります。たとえば、id は表示または非表示にする領域の名前を表します。この例では、表示または非表示にします。非表示領域は

タグ内のテキストであり、show は領域を非表示にするか表示するかを決定するブール値です。 showhidecontent 関数では、show の値に応じて表示属性と可視性属性が制御されます。

上記の例の原理を理解した後、それをリピーター制御に適用できます。たとえば、ユーザーが尋ねたい質問が多数含まれた FAQ を作成したい場合、上記の方法を使用して、まずリピーターコントロールを使用してユーザーの質問をリストし、ユーザーが質問をクリックすると、答えが表示されたり隠れたりするのは非常に便利です。リピーターのコードスニペットは次のとおりです:

コードをコピー

コードは次のとおりです:

;

<%# DataBinder.Eval(Container.DataItem, "Description") %>

提出者: <%# DataBinder.Eval(Container.DataItem, "SubmittedByName") %>
< b>Views: <%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:d}") %>
> FAQ :

<%# DataBinder.Eval(Container.DataItem, "Answer") <🎜; >

上記のコードは静的リピーターのみを記述していることがわかります。次に、要件を満たすためにリピーターのテンプレート列にいくつかの変更を加える必要があります。
まず、各レコードに 2 つの

タグを作成します。1 つは FAQ の質問を表示し、もう 1 つは質問に対する回答を表示します。各

タグには、各レコード内で一意の ID が割り当てられます。質問を表示する

マークの ID は h インデックスとして記録されます (インデックスは itemindex を使用した、Repeater コントロール内の各項目の ID 番号です)。回答を表示する

マークの ID は、 dindex として記録されます。コードは次のとおりです:

コードをコピーコードは次のとおりです:

 ; 
.header { フォントサイズ: 大きい; フォントの太さ: 太字; カーソル: ポインター; 
 フォントファミリー: Verdana;表示:なし; 背景色:#eeeeee; 
 
 );'> 
 <%# DataBinder.Eval(Container.DataItem, "Description") %> 

 送信済み作成者: <%# DataBinder.Eval(Container.DataItem, "SubmittedByName") %>

 ビュー: DataBinder.Eval(Container.DataItem, "ViewCount", "{0:d}") %>
FAQ:
 🎜> <%# DataBinder.Eval(Container.DataItem, "Answer") %> 
 
 コードの後半に注目してみましょう。
onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);'> は、各レコードの質問部分を  のようにラップします。  などのタグをクリックすると、toggledisplay 関数が呼び出されます。この関数内で、受信したパラメータが表示する必要がある領域であるかどうかがチェックされます (
var elem = document によって注意してください)。 . getElementById('d' id);) を判定して、はいの場合は表示属性と可視属性を表示に設定します。そうでない場合は表示されません。