quang cao hosting

Sử dụng một số Extender trong Ajax Control Toolkit

Xem: 2276    Tải: 0   Thảo luận: 0   Mục: ASP.NET Framework   Lĩnh vực: Máy tính - công nghệ

0 điểm   ( 8 đánh giá ) File đã được kiểm thử

CollapsiblePanel Extender

Đây là một extender dùng để mở rộng hoặc thu nhỏ một panel khác, giống như việc kết hợp hai panel lại tạo thành một panel chứa nội dung.

<act:CollapsiblePanelExtender ID="cpe" runat="server" TargetControlID="CollapsibleCustomersPanelContent"
 	    ExpandControlID="CollapsibleCustomersPanel" CollapseControlID="CollapsibleCustomersPanel"
 	    Collapsed="true" ExpandDirection="Vertical" ImageControlID="ToggleImage" ExpandedImage="~/images/selected.png"
 	    ExpandedText="Collapse" CollapsedImage="~/images/notselected.png" CollapsedText="Expand" />

Thuộc tính TargetControlID là ID của panel đích sẽ dùng để điểu khiển việc mở rộng / thu nhỏ. ExpandControlID và CollapseControlID chỉ ra panel sẽ được mở rộng và thu nhỏ. Thông thường hai thuộc tính thường chỉ về cùng một panel.

 	<asp:ScriptManager ID="ScriptManager1" runat="server">
	</asp:ScriptManager>
 	 
 	<act:CollapsiblePanelExtender ID="cpe" runat="server" TargetControlID="CollapsibleCustomersPanelContent"
 	    ExpandControlID="CollapsibleCustomersPanel" CollapseControlID="CollapsibleCustomersPanel"
 	    Collapsed="true" ExpandDirection="Vertical" ImageControlID="ToggleImage" ExpandedImage="~/images/selected.png"
 	    ExpandedText="Collapse" CollapsedImage="~/images/notselected.png" CollapsedText="Expand" />
 	 
 	<asp:Panel ID="CollapsibleCustomersPanel" runat="server">
 	    <asp:Image ID="ToggleImage" runat="server" ImageUrl="~/images/notselected.png" />
 	    <b>Click Me</b>
 	</asp:Panel>
 	 
 	<div style="color: Blue">
 	    <asp:Panel ID="CollapsibleCustomersPanelContent" runat="server">
 	        <b>Ảnh một</b><br />
 	        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/penguin.png" />
 	    </asp:Panel>
 	    <b>Ảnh hai</b><br />
 	    <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/network.png" />
 	</div>

Minh họa:

DragPanel Extender

Đây là một trong những extender đơn giản nhất của Ajax Control Toolkit. Nó chỉ bao gồm hai thuộc tính: một để chi ra panel chứa nội dung sẽ di chuyển khi kéo và một chỉ ra panel làm tay cầm để di chuyển. Xem ví dụ dưới đây để hiểu rõ hơn.

<div>
 	    <asp:ScriptManager ID="ScriptManager1" runat="server">
 	    </asp:ScriptManager>
 	 
 	    <act:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="ContentPanel"
 	        DragHandleID="DragHandlePanel" />
 	 
 	    <asp:Panel ID="ContentPanel" runat="server">
 	        <asp:Panel ID="DragHandlePanel" runat="server" BorderStyle="Ridge">
 	            <div style="background-color: ActiveCaption">
 	                <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Selected.png" />
 	                Chim cánh cụt</div>
 	        </asp:Panel>
 	        <asp:Panel ID="Panel1" runat="server" BorderStyle="Solid">
 	            <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/penguin.png" />
 	        </asp:Panel>
 	    </asp:Panel>
 	</div>

Đoạn mã trên ta thêm hai panel vào một panel chính với ID là ContentPanel mô phỏng một cửa sổ con. Trong hai panel con, panel đầu tiên sẽ được dùng làm thanh tiêu đề giả, panel còn lại để hiển thị nội dung.

TextBoxWatermark Extender

Đây là một extender được sử dụng khá phổ biến trong các trang web chẳng hạn như các textbox đăng nhập, đăng kí thành viên và tìm kiếm. Extender này cho phép tạo dòng chữ hiển thị mặc định trên textbox để gợi ý nội dung cần nhập vào cho textbox. Khi nhấn chuột vào textbox này để nhập liệu, dòng chữ sẽ tự động biến mất và trở thành một textbox trống bình thường. Ngoài việc hiển thị văn bản, bạn còn có thể tùy chỉnh màu sắc, các định dạng thông qua thuộc tính WatermarkCssClass. Bạn thêm một style class mới tên là watermarked định dạng màu nền và màu chữ rồi dòng lệnh này phía sau control AutoCompleteExtender trong đoạn mã:

<cc1:TextBoxWatermarkExtender runat="server" ID="TextBoxWatermark1" TargetControlID="txtInput"
	    WatermarkText="Nhập từ cần tra" WatermarkCssClass="watermarked" />

Kết quả hiển thị tùy thuộc vào nội dung của style class watermarked của bạn và giá trị của thuộc tính WatermarkText.

DropShawdow Extender

Đây là một extender dùng để tạo hiệu ứng bóng đổ cho các Panel, bạn có thể gán độ mờ đục và kích thước của bóng. Trong ví dụ này để tạo bóng cho TextBox, bạn cần dùng một Panel bao bên ngoài và làm hiệu ứng trên Panel này.

 	<asp:Panel ID="Panel2" runat="server" BackColor="White" Width="300px">
 	    <div style="margin-left: 2px">
 	        <asp:TextBox ID="txtInput" runat="server" AutoPostBack="True" BorderWidth="0px" OnTextChanged="txtInput_TextChanged"
 	            Width="280px"></asp:TextBox>
 	    </div>
 	    <cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" Opacity=".65" Rounded="true"
 	    TargetControlID="Panel2" Width="5" />
 	</asp:Panel>

Đây là minh họa sau khi sử dụng extender này:

Kết luận

Nhìn chung thì cách sử dụng các extender này khá đơn giản, chỉ việc copy và paste. Tuy nhiên đa số các lập trình viên thích tự viết cho mình các chức năng tương tự thay vì sử dụng control hoặc thư viện có sẵn, trừ phi chúng tương đối phức tạp. Một đặc điểm nữa là sử dụng phương pháp này không cho phép bạn thấy được cơ chế thực hiện bên dưới và hiệu suất của nó cũng là một vấn đề cần quan tâm.

Sử dụng một số Extender trong Ajax Control Toolkit

Sử dụng một số Extender trong Ajax Control Toolkit Đăng ngày 19-02-2014  Extender là một control dùng để gắn vào những control khác trên trang, tên của chúng được kết thúc bằng từ bằng hậu tố Extender. Khi được gắn với control khác, extender cung cấp cho control đó những chức năng mới rất hữu dụng. Phần lớn các control trong Ajax Control Toolkit là extender. 5/10 2276

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 
File gợi ý cho bạn
File tải nhiều nhất
Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2021. All rights reserved. Bản quyền thuộc VinaGon
Email: info@vinagon.com
Hotline: 086.924.3838