Tin tức

Thiết kế web: Chạy các hoạt ảnh sử dụng mã phía Client

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 trạm (Client-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>

Sau đó thêm AnimationExtender vào trang, cung cấp ID, thuộc tính TargetControlID và  thuộc tính bắt buộc runat="server":

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">

Bên trong thẻ <Animations>, sử dụng <OnClick> để chạy các hoạt ảnh khi người dùng bấm vào khung văn bản. Thêm hai hoạt ảnh để thực hiện  song song:

 
<Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>


Đối với mục đích thử nghiệm, hoạt ảnh này (và bất kỳ hoạt ảnh khác được tạo ra bằng cách sử dụng Control Toolkit) được thực hiện bằng cách sử dụng mã JavaScript, khi trang chạy. Đầu tiên ta cần truy cập đến điều khiển AnimationExtender. Thư viện ASP.NET AJAX cung cấp hàm find () cho nhiệm vụ này:

var ae = $find("ae");

Điều khiển  AnimationExtender cung cấp API, bao gồm các phương thức với tên định danh và sự kiện được sử dụng trong mã XML: OnClick(), OnLoad(),. Ví dụ,  một lời gọi phương thức OnClick() thực thi hoạt ảnh trong sự kiện <OnClick>  của điều khiển AnimationExtender :

ae.OnClick();


Dưới đây là đoạn mã JavaScript phía máy khách hoàn chỉnh mô phỏng các nhấp chuột trên khung văn bản khi trang đã được nạp, lưu ý rằng tên hàm  pageLoad () sử dụng được gọi  bởi ASP.NET AJAX khi trang và tất cả các thư viện JavaScript đã được tải.

<script type="text/javascript">
 function pageLoad() {
 var ae = $find("ae");
 ae.OnClick();
 }
</script>


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

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