Sbalení a rozbalení panelu JavaScriptem (C#)
CollapsiblePanel ovládací prvek v ASP.NET AJAX Control Toolkit rozšiřuje panel a poskytuje možnost sbalit jeho obsah a rozbalit jej znovu. Tyto dvě akce se dají aktivovat také z vlastního kódu JavaScriptu.
Přehled
CollapsiblePanel ovládací prvek v ASP.NET AJAX Control Toolkit rozšiřuje panel a poskytuje možnost sbalit jeho obsah a rozbalit jej znovu. Tyto dvě akce se dají aktivovat také z vlastního kódu JavaScriptu.
Postup
Nejprve vytvořte novou ASP.NET stránku a zahrňte do ScriptManager jednoho <form> prvku . Tím se načte knihovna ASP.NET AJAX, kterou vyžaduje sada nástrojů Control Toolkit:
<asp:ScriptManager ID="asm" runat="server" />
Pak vytvořte panel s textem, aby se efekt sbalení a rozbalení zobrazil:
<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 atribut , TargetControlID aby sada nástrojů věděla, který panel má na žádost 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 (spuštěný na <script type="text/javascript">) $find() je potřeba pro přístup k objektu použít metodu CollapsiblePanelExtender. $find("cpe") vrátí odkaz na něj. Od této doby 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. Zpřístupňuje CollapsiblePanelExtender metodu toggle() , která dělá přesně to: obrátí stav panelu. Existuje však také 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).
