Tin tức

Thiết kế web:Thay đổi hoạt ảnh sử dụng mã 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 sử dụng mã JavaScript  phía máy trạm (lient-side)

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 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>

Hoạt ảnh sẽ được thực hiện bởi một nut s HTML:

<input type="button" id="Button1" runat="server" value="Launch Animation" />

Sau đó, thêm  điều khiển AnimationExtender vào trang, thiết lậ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" />

Lưu ý: rằng không có thẻ <Animations> trong AnimationExtender. Mã tùy chỉnh JavaScript được sử dụng để cung cấp các hoạt ảnh sẽ được sử dụng với điều khiển.
Như với các API máy chủ của AnimationExtender, không có cách nào dễ dàng để chỉ định một hoạt ảnh để mở rộng được nêu ra. Tuy nhiên, đối tượng mở rộng  không đưa ra các phương thức đọc và ghi các hoạt ảnh riêng được đăng ký với các sự kiện khách nhau (OnClick, OnLoad, vv). Dưới đây là một số ví dụ:
get_OnClick()
set_OnClick()
get_OnLoad()
set_OnLoad()
...

Định dạng của các giá trị trả về của các hàm get_ * () và định dạng của các tham số cho hàm  set_ * () là một chuỗi JSON, cung cấp đối tượng mô tả những gì XML có. Hiện nay, không có cách nào để truyền đối tượng vào, nhưng nó có thể đọc một đối tượng từ một hoạt ảnh (các phương thức get_OnXXXBehavior ()).
Đây là một chuỗi JSON (không có dấu ngoặc kép phân chia ranh giới và định dạng độc đáo) đại diện cho một hoạt ảnh kích hoạt bởi các nút, nhưng hoạt ảnh khung văn bản khí thay đổi kích thước nó và làm mờ cùng lúc:

{
 "AnimationName":"Sequence",
 "AnimationChildren":[
 {
 "AnimationName":"EnableAction",
 "Enabled":"false",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Parallel",
 "AnimationChildren":[
 {
 "AnimationName":"FadeOut",
 "Duration":"1.5",
 "Fps":"24",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Resize",
 "Width":"1000",
 "Height":"150",
 "Unit":"px",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 }]
 }]
}

Mã JavaScript dưới đậy gán mô tả JSON hoạt ảnh  OnClick của đối tượng mở rộng và chạy nó:

<script type="text/javascript">
 function pageLoad()
 {
 var ae = $find("ae");
 var animation = '{"AnimationName":"Sequence","AnimationChildren":[{"AnimationName":"EnableAction","Enabled":"false","AnimationChildren":[]},{"AnimationName":"Parallel","AnimationChildren":[{"AnimationName":"FadeOut","Duration":"1.5","Fps":"24","AnimationTarget":"Panel1","AnimationChildren":[]},{"AnimationName":"Resize","Width":"1000","Height":"150","Unit":"px","AnimationTarget":"Panel1","AnimationChildren":[]}]}]}';
 ae.set_OnClick(animation);
 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