Asp.net Flyout Một ví dụ về Flyout đưa ra cảnh báo đối với Form

Khi thiết kế Form cho người dùng nhập thông tin. Có khi yêu cầu người dùng nhập chính xác thông tin như Email, Số diện thoại, … Bài viết này tôi sẽ hướng dẫn thực hiện việc đưa ra cảnh báo khi người dùng đưa chon trỏ chuột vào Textbox là hiện lên cảnh báo yêu cầu nhập chính xác thông tin

Để làm được điều này bạn có thể dùng jquery nhưng ở bài viết này tôi sử dụng một thư viên “obout_Flyout2_NET.dll”. Bạn sẽ có liên kết download ở cuối bài viết. Sau khi có thư viện này bạn add vào thư mục Bin của ứng dụng. Giờ trong code bạn thực hiện rất đơn giản như minh họa sau đây:

<%@ Page Language=”C#” %>
<%@ Register Assembly=”obout_Flyout2_NET” Namespace=”OboutInc.Flyout2″ TagPrefix=”cc1″ %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head runat=”server”>
<title>tieuyeuit.wordpress.com
<style>
.BaoFrame{
position:relative;
border: 1px solid #DDDDDD;
background-color:#FFF3D7;
width:250px;
text-align:center;
}
.TieuDe
{
border-bottom:1px solid #DDDDDD;
color:Maroon;
font-weight:bold;
}
.CanhBao
{
color:#FF3300;
background-color:#fff;
}
</style>
</head>
<body>
<form id=”form1″ runat=”server”>
<div style=”padding-left:100px”>
Email: <asp:TextBox ID=”txtEmail” runat=”server”></asp:TextBox>
<cc1:Flyout ID=”Flyout1″ AttachTo=”txtEmail” runat=”server” Position=”BOTTOM_CENTER”>
<div class=”BaoFrame”>
<div class=”TieuDe”>CHÚ Ý</div>
<div class=”CanhBao”>
Bạn hãy nhập chính xác địa chỉ Email của bạn để tiện cho việc liên lạc</div>
</div>
</cc1:Flyout>
</div>
</form>
</body>
</html>

Bạn có thể Add thư viện này vào Toolbox để khi sử dụng có thể kéo thả cho dễ dàng. Ở Control này sẽ có khá nhiều thuộc tính. Ở đây bạn chú ý thuộc tính Position=”BOTTOM_CENTER” sẽ hiển thị xuống phía dưới căn giữa của Textbox. Bạn có thể tìm hiểu thêm các thuộc tính khác để ứng dụng cho phù hợp với yêu cầu của bạn. Các Style sheet bạn cũng có thể thay đổi để đưa ra cảnh báo bắt mắt hơn.

Cuối cùng bạn có thể download thư viện và code này nghiên cứu thêm Download
p/s:Theo hmweb.com.vn

Chúc bạn thành công

Về tieuyeuit
Lập trình viên Asp.net Tôi chia sẻ một,bạn chia sẻ một và chúng ta có rất nhiều!

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: