Tin tức

Thiết kế web: Vô hiệu hóa các hành động trong hoạt ảnh

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. Nó cũng hỗ trợ các hành đồng như sự kiện bấm chuột. Tuy nhiên một sự kiện bấm chuột khởi động một hoạt ảnh.  Bạn có thể vô hiệu hóa nhấp chuột trong thời gian hoạt ảnh 
Các bước 
Đầu tiên, bạ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 một nút HTML như sau:
<input type="button" ID="Button1" runat="server" Value="Launch Animation" />


Lưu ý rằng một điều khiển HTML được sử dụng thay vì một Web Control khi chúng ta không muốn nút tạo postback, nó sẽ khởi động các hình ảnh động phía máy trạm cho chúng ta.
Sau đó, thêm AnimationExtender vào trang, cung cấp một ID, thuộc tính TargetControlID và thuộc tính bắt buộc runat="server":

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

Bên trong thẻ <Animations> , <OnClick> để xử lý nhấp chuột. Tuy nhiên, nút có thể được bấm trong thới gian hoạt ảnh. Thẻ <EnableAction> có thể mag lại điều đó. Gán thuộc tính Enabled="false" để vô hiệu hóa nút như một phần của hoạt ảnh. Khi bạn sử dụng các hoạt ảnh riêng lẻ (việc vô hiệu hóa nút và các hoạt ảnh thực), Thẻ <Parallel> yêu cầu để gắn kết các hoạt ảnh với nhau. Dưới đây là toàn bộ mã đánh dấu cho  AnimationExtender:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">
 <Animations>
 <OnClick>
 <Parallel>
 <EnableAction Enabled="false" />
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Nó cũng sẽ có thể kích hoạt lại nút sau khi hoạt ảnh, bằng cách sử dụng thẻ XML sau đây ở cuối danh sách:

<EnableAction Enabled="true" />

Tuy nhiên, trong kịch bản nhất định sẽ không có ý nghĩa kể từ khi nút mờ dần và không nhìn thấy được vào cuối của hoạt ảnh.
 
 
Bạn có thể tải mã thử nghiệm tại đây.

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