Sbalení a rozbalení panelu JavaScriptem (VB)

Christian Wenz

Stáhnout PDF

Ovládací prvek CollapsiblePanel v ASP.NET AJAX Control Toolkit rozšiřuje panel a poskytuje mu možnost sbalit jeho obsah a znovu ho rozbalit. Tyto dvě akce lze také aktivovat z vlastního kódu JavaScriptu.

Přehled

Ovládací prvek CollapsiblePanel v ASP.NET AJAX Control Toolkit rozšiřuje panel a poskytuje mu možnost sbalit jeho obsah a znovu ho rozbalit. Tyto dvě akce lze také aktivovat z vlastního kódu JavaScriptu.

Postup

Nejprve vytvořte novou ASP.NET stránku a zahrňte do ScriptManager jednoho prvku.<form> Tím se načte knihovna ASP.NET AJAX, která je vyžadována sadou nástrojů Control Toolkit:

<asp:ScriptManager ID="asm" runat="server" />

Pak vytvořte panel s textem, aby byl efekt sbalení/rozbalení viditelný:

<asp:Panel ID="Panel1" CssClass="panelClass" runat="server">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
</asp:Panel>

Jak vidíte, panel odkazuje na třídu CSS, která je zde zobrazena (a v podstatě definuje barvu pozadí a šířku panelu):

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

Ovládací CollapsiblePanelExtender prvek vyžaduje TargetControlID atribut, aby sada nástrojů věděla, který panel má na vyžádání sbalit nebo rozbalit:

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server"
 TargetControlID="Panel1" />

Extender v současné době bohužel nezpřístupňuje konkrétní rozhraní API pro sbalení nebo rozbalení panelu, ale některé nezdokumentované metody ano. Nejprve na stránku přidejte tři tlačítka HTML, která pak aktivují JavaScript na straně klienta, aby sbalil nebo rozbalil obsah panelu:

<input type="button" id="Button1" runat="server" value="Open" onclick="doOpen();" />
<input type="button" id="Button2" runat="server" value="Close" onclick="doClose();" />
<input type="button" id="Button3" runat="server" value="Toggle" onclick="doToggle();" />

V kódu JavaScriptu na straně klienta (počínaje <script type="text/javascript">na ) je potřeba použít metodu $find()CollapsiblePanelExtenderpro přístup k . $find("cpe") vrátí odkaz na něj. Odsud budou konkrétní metody řešit daný úkol.

Metoda pro otevření (rozbalení) panelu se nazývá _doOpen(); následující kód implementuje doOpen() funkci volanou při kliknutí na první tlačítko:

function doOpen() 
{
 $find("cpe")._doOpen();
}

Pro zavření nebo sbalení panelu je potřeba spustit metodu _doClose() . Takže když uživatel klikne na druhé tlačítko, zavolá se následující kód JavaScriptu:

function doClose() 
{
 $find("cpe")._doClose();
}

Třetí tlačítko přepíná stav panelu: ze sbalené na rozbalený a naopak. Zobrazí CollapsiblePanelExtender metodu toggle() , která přesně to udělá: obrátí stav panelu. Existuje však i jiný přístup (který metoda interně používá toggle() ): Metoda get_Collapsed()CollapsiblePanelExtender() nám říká, jestli je panel sbalený nebo ne. V závislosti na návratové hodnotě této funkce se pak panel buď rozbalí (_doOpen() metoda), nebo sbalí (_doClose()):

function doToggle() 
{
 var cpe = $find("cpe");
 //cpe._toggle();
 if (cpe.get_Collapsed()) {
 cpe._doOpen();
 } else {
 cpe._doClose();
 }
}

Třetí tlačítko změní stav panelu: ze sbalené na rozbalený a zpět (kliknutím zobrazíte obrázek v plné velikosti).

Předchozí