Wykonywanie animacji przy użyciu kodu po stronie klienta (VB)
Autor: Christian Wenz
Kontrolka Animacja w zestawie narzędzi kontroli AJAX ASP.NET to nie tylko kontrolka, ale cała struktura umożliwiająca dodawanie 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 kontroli AJAX ASP.NET to nie tylko kontrolka, ale cała struktura umożliwiająca dodawanie 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 dla 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 element runat="server":
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
W węźle <Animations> użyj polecenia <OnClick> , aby uruchomić animacje, gdy użytkownik kliknie panel. 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()itd. Na przykład wywołanie OnClick() metody wykonuje animację w elemencji <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 wywoł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 myszą (kliknij, aby wyświetlić obraz w pełnym rozmiarze)
