Wykonywanie animacji przy użyciu kodu po stronie klienta (C#)
Autor: Christian Wenz
Kontrolka Animacja w zestawie narzędzi ASP.NET AJAX Control Toolkit nie tylko jest kontrolką, ale całą strukturą do dodawania animacji do kontrolki. Wykonywanie animacji może być również wyzwalane przy użyciu niestandardowego kodu JavaScript po stronie klienta.
Omówienie
Kontrolka Animacja w zestawie narzędzi ASP.NET AJAX Control Toolkit nie tylko jest kontrolką, ale całą strukturą do dodawania animacji do kontrolki. Wykonywanie animacji może być również wyzwalane przy użyciu niestandardowego kodu JavaScript po stronie klienta.
Kroki
Najpierw dołącz element ScriptManager na stronie, a następnie załadowano bibliotekę ASP.NET AJAX, umożliwiając korzystanie z zestawu narzędzi control Toolkit:
<asp:ScriptManager ID="asm" runat="server" />
Animacja zostanie zastosowana do panelu tekstu, który wygląda następująco:
<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
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>
W skojarzonej klasie CSS panelu zdefiniuj ładny kolor tła, a także ustaw stałą szerokość panelu:
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
Następnie dodaj element AnimationExtender do strony, podając IDatrybut , TargetControlID i obowiązkowy runat="server"element :
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
W węźle <Animations> użyj polecenia <OnClick> , aby uruchomić animacje po kliknięciu panelu przez użytkownika. Dodaj dwie animacje do wykonania równolegle:
<Animations>
<OnClick>
<Parallel>
<FadeOut Duration="1.5" Fps="24" />
<Resize Width="1000" Height="150" Unit="px" />
</Parallel>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
Na potrzeby pokazu ta animacja (i każda inna animacja utworzona przy użyciu zestawu narzędzi Control Toolkit) jest wykonywana przy użyciu kodu JavaScript po uruchomieniu strony. Przede wszystkim potrzebujemy dostępu do AnimationExtender kontroli. Biblioteka ASP.NET AJAX udostępnia $find() funkcję dla tego zadania:
var ae = $find("ae");
Kontrolka AnimationExtender uwidacznia bogaty interfejs API, w tym metody o nazwach identycznych z procedurami obsługi zdarzeń używanymi w znacznikach XML: OnClick(), OnLoad()i tak dalej. Na przykład wywołanie OnClick() metody wykonuje animację w elemecie <OnClick> kontrolki AnimationExtender :
ae.OnClick();
Oto kompletny kod JavaScript po stronie klienta, który emuluje kliknięcie panelu po pełnym załadowaniu strony, zwróć uwagę, że pageLoad() nazwa funkcji jest używana przez ASP.NET AJAX po załadowaniu strony i wszystkich dołączonych bibliotek JavaScript.
<script type="text/javascript">
function pageLoad() {
var ae = $find("ae");
ae.OnClick();
}
</script>
Animacja jest uruchamiana natychmiast bez kliknięcia myszy (kliknij, aby wyświetlić obraz pełnowymiarowy)
