Tin tức

Thiết kế web : Thay đổi hoạt ảnh từ phía máy chủ

16/04/2013

Tổng quan:

Điều khiển Animation trong ASP.NET AJAX Control Toolkit không chỉ là một điều khiển mà nó hoàn toàn là một khung để thêm các hoạt ảnh. Các hoạt ảnh này cũng có thể thay đổi phía máy chủ (server-side)

Các bước:

Trước tiên, thêm ScriptManager vào trong trang; sau đó, thư viện ASP.NET AJAX được nạp, theo đó có thể sử dụng  Control Toolkit:

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

Hoạt ảnh sẽ được áp dụng cho khung văn bản như sau:

<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>
Trong lớp liên quan đến CSS cho khung văn bản, định nghĩa màu nền cũng như gán độ rộng cố định cho khung như sau:
<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

Phần còn lại của mã này chạy phía máy chủ và không sử dụng thẻ đánh dấu, thay vì vậy sử dụng mã để tạo điều khiển AnimationExtender :
<script runat="server">
void Page_Load()
{
 AjaxControlToolkit.AnimationExtender ae = new AjaxControlToolkit.AnimationExtender();
 ae.TargetControlID = "Panel1";


Tuy nhiên, Control Toolkit hiện không cung cấp truy cập API để tạo ra các hình ảnh động riêng. Tuy nhiên, có thể thiết lập thuộc tính Animations của AnimationExtender một chuỗi có chứa các mã XML được sử dụng khai báo các hình ảnh động. Theo thứ tự, để tạo mã XML mà không chứa thẻ <Animations> bạn có thể sử dụng hỗ trợ XML của NET Framework, như trong đoạn mã sau, chỉ cần cung cấp các chuỗi.:
ae.Animations = "<OnLoad><Parallel><FadeOut Duration=\"1.5\"
Fps=\"24\" /><Resize Width=\"1000\" Height=\"150\"
Unit=\"px\" /></Parallel></OnLoad>";

Cuối cùng, thêm điều khiển AnimationExtender vào trang hiện tại trong <form runat="server"> , đảm bảo rằng hoạt ảnh được bao gồm và chạy:

form1.Controls.Add(ae);
}
</script>

 
 Bạn có thể tải mã để kiểm thử tại đây.

Công ty Cổ phần Eastern Sun Việt Nam