検索

ホームページ  >  記事  >  ウェブフロントエンド  >  JS は、Repeater control_javascript スキルに非表示領域を作成するコードを実装します。

JS は、Repeater control_javascript スキルに非表示領域を作成するコードを実装します。

WBOY
WBOYオリジナル
2016-05-16 18:19:301012ブラウズ

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);) を判定して、はいの場合は表示属性と可視属性を表示に設定します。そうでない場合は表示されません。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Cookie_js オブジェクト指向の JS オブジェクト指向プログラミング次の記事：Cookie_js オブジェクト指向の JS オブジェクト指向プログラミング

関連記事

続きを見る