使用CollapsiblePanelExtender:チュートリアル10のAjax.netシリーズを習得しやすいです

この章では、CollapsiblePanelExtenderを使用する方法について説明します。CollapsiblePanelExtenderとやや似アコーディオンの最後の章が、また、指定した領域のズームを制御することができます。しかし、管理領域は、アコーディオン基、領域のそれぞれとの間の相互作用を生成することができる基、他を開くこと、および主にズームCollapsiblePanelExtender単一の領域を制御するために閉じられます。

ステップ1:AJAXコントロールツールキットウェブサイトを作成します。

この例では、主にここに一覧表示するには、2つのパネルのコントロールとCollapsiblePanelExtenderコンポーネントに加え、いくつかの補助コントロールをする必要はありません。次のように:

< ASP パネルID = "パネル1" にrunat = "サーバー" のCssClass = "collapsePanelHeader">
            < ASP 画像 ID = "画像1" にrunat = "サーバー" IMAGEURL = "〜/画像/ expand.jpg" /> &NBSP;&NBSP;
            < ASP ラベル ID = "Label1を" にrunat = "サーバー">显示内容...... </ ASP ラベル>
</ ASP パネル>

これらは、パネル1のコードであり、状態Panel2を制御する責任があるパネル1の制御領域です。パネル1では、私たちは、ImageコントロールとLabelコントロールを定義する場所。両方のコントロールは、Panel2の状態に応じて異なる画像やテキストを表示することができます。

注意:これは、サーバーコントロールを使用する必要があり、そうでない場合CollapsiblePanelExtenderは、関連するコントロールを見つけることができません。

Panel2コンテンツがあれば上の記事のように、それはもはやここにリストされていません。

関連するCSSスタイルを取り付けます。

.collapsePanel {
   
    背景色 ;
    オーバーフロー隠されました ;
}
 
.collapsePanelHeader {   
    100% ;      
    高さ30px ;
    背景#666 ;
    #FFF ;
    フォント重量太字 ;
}

注意:上記のCSSスタイル、 collapsePanelがある Panel2のこのスタイルで使用されるスタイル、我々は高さを指定することはできません、そうでない場合は Panel2は通常、私たちすることができますセルフテストを表示し、非表示にすることができません。

ステップ2:設定CollapsiblePanelExtender

あまりにも多くのプロパティを設定するため、次のコードを参照してください。

< ajaxToolkit CollapsiblePanelExtender ID = "CollapsiblePanelExtender1" にrunat = "サーバー"
            CollapseControlID = "パネル1"
            ExpandControlID = "パネル1"
            TargetControlID = "Panel2"
            ImageControlID = "画像1"
            TextLabelID = "Label1を"
            CollapsedText = "表示内容......"
            ExpandedText = "隠された内容......"
            ExpandedImageは= "〜/画像/ collapse.jpg"
            CollapsedImage = "〜/画像/ expand.jpg">
</ ajaxToolkit CollapsiblePanelExtender >

CollapseControlIDは、隠された制御は、制御IDを、意味あるExpandControlIDがその値であるように、これは、制御領域の一例に過ぎないので、制御を制御IDの表示を意味するパネル1をあなたは二つの制御エリアを持っている場合は、それらの値を指定することができます。TagetControlIDは、ターゲット制御IDを制御する必要性を意味し、ここでPanel2がImageControlIDはここで、コントロールIDの状態の表示画面を指している画像1あなたが指定することはできませんされていない場合、。TextLabelIDはここで、表示制御IDのステータステキストを指しているのLabel1これを指定することはできませんされていない場合、。CollapsedTextExpandedTextCollapsedImageExpandedImageは異なる状態で表示されるテキストや画像を指定することで、彼らは実際の状況に応じて設定します。

セットアップし、実行します!示すように、結果:

「隠された内容」に隠された上で次の記事をクリックしてください。

終了:

この章では、使用するCollapsiblePanelExtenderを紹介します。やや似ていますが、アコーディオン、CollapsiblePanelExtender効果少し単調な、しかしアコーディオンは、異なる状態の表示画像とテキストを設定するよりも、我々は時間を選択右のコンポーネントを選択するために、現実から進まなければなら単純に使用して比較CollapsiblePanelExtenderとアコーディオン。

 

トラックバック:http://www.cnblogs.com/sbitxg521/archive/2007/12/29/1020308.html

ます。https://www.cnblogs.com/hdjjun/archive/2008/06/17/1223664.htmlで再現

おすすめ

転載: blog.csdn.net/weixin_34167043/article/details/94497401
おすすめ