Rozwijanie i zwijanie panelu z poziomu języka JavaScript (C#)
Autor: Christian Wenz
Kontrolka CollapsiblePanel w zestawie narzędzi kontroli AJAX ASP.NET rozszerza panel i zapewnia możliwość zwijania zawartości i rozwijania go ponownie. Te dwie akcje można również wyzwolić z niestandardowego kodu JavaScript.
Omówienie
Kontrolka CollapsiblePanel w zestawie narzędzi kontroli AJAX ASP.NET rozszerza panel i zapewnia możliwość zwijania zawartości i rozwijania go ponownie. Te dwie akcje można również wyzwolić z niestandardowego kodu JavaScript.
Kroki
Najpierw utwórz nową stronę ASP.NET i dołącz element ScriptManager w jednym <form> elemecie. Spowoduje to załadowanie biblioteki ASP.NET AJAX wymaganej przez zestaw narzędzi Control Toolkit:
<asp:ScriptManager ID="asm" runat="server" />
Następnie utwórz panel z tekstem, aby można było zobaczyć efekt zwijania/rozwijania:
<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 widać, panel odwołuje się do klasy CSS pokazanej tutaj (i zasadniczo definiuje kolor tła i szerokość panelu):
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
Kontrolka CollapsiblePanelExtender wymaga atrybutu TargetControlID , aby zestaw narzędzi wiedział, który panel ma zwinąć lub rozwinąć po żądaniu:
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server"
TargetControlID="Panel1" />
Niestety rozszerzenie obecnie nie uwidacznia określonego interfejsu API do zwijania lub rozszerzania panelu, ale niektóre nieudokumentowane metody będą wykonywane. Najpierw dodaj trzy przyciski HTML do strony, co spowoduje wyzwolenie kodu JavaScript po stronie klienta w celu zwinięcia lub rozwinięcia zawartości 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();" />
W kodzie JavaScript po stronie klienta (rozpoczętym od <script type="text/javascript">), $find() należy użyć metody w celu uzyskania dostępu do elementu CollapsiblePanelExtender. $find("cpe") zwróci odwołanie do niego. W tym miejscu określone metody rozwiążą zadanie.
Metoda otwierania (rozszerzania) panelu jest wywoływana _doOpen(); następujący kod implementuje doOpen() funkcję wywoływaną po kliknięciu pierwszego przycisku:
function doOpen()
{
$find("cpe")._doOpen();
}
Aby zamknąć lub zwijać panel, _doClose() należy wykonać metodę . Dlatego po kliknięciu drugiego przycisku przez użytkownika jest wywoływany następujący kod JavaScript:
function doClose()
{
$find("cpe")._doClose();
}
Trzeci przycisk przełącza stan panelu: od zwiniętego do rozwiniętego i odwrotnie. Uwidacznia CollapsiblePanelExtender metodę toggle() , która dokładnie to robi: odwraca stan panelu. Istnieje jednak również inne podejście (które jest wewnętrznie używane przez toggle() metodę): get_Collapsed() metoda CollapsiblePanelExtender() informuje nas, czy panel jest zwinięty, czy nie. W zależności od wartości zwracanej tej funkcji panel jest następnie rozwinięty (_doOpen() metoda) lub zwinięty (_doClose()) metoda:
function doToggle()
{
var cpe = $find("cpe");
//cpe._toggle();
if (cpe.get_Collapsed()) {
cpe._doOpen();
} else {
cpe._doClose();
}
}
Trzeci przycisk zmienia stan panelu: od zwiniętego do rozwiniętego i z powrotem (kliknij, aby wyświetlić obraz pełnowymiarowy)
