(Bootsrap Tooltip cho Link Button) - Trong quá trình xây dựng phần mềm, có những màn hình không đủ diện tích để thể hiện đầy đủ các Linkbuton vừa có hình ảnh, vừa có chữ. Vậy làm sao để mỗi Linkbutton chỉ có mỗi biểu tượng mà người dùng vẫn biết nút lệnh đó có chức năng gì? Có 1 giải pháp để giải quyết vấn đề này, đó là sử dụng Tooltip. Hôm nay Thủ thuật tin học sẽ giới thiệu với các bạn cách sử dụng Bootsrap Tooltip cho Link Button, nhờ các Bootstrap tooltip sẽ giúp người lập trình mô tả rõ hơn chức năng của từng Linkbutton.
Sau khi tải về, bạn sẽ có một file Zip. Tiến hành giải nén ta có một thư mục có tên bootstrap, bên trong có 3 thư mục : css, img, js.
- B2: Tạo Project trong Microsoft Visual Studio 2010
- B3: Tạo file Button.css có nội dung phía dưới và Copy vào thư mục Styles trong Project vừa tạo.
.icon-add {
background-image: url(Images/Icon/add.png);
background-position: center center;
height: 16px;
width: 16px;
}
.icon-edit {
background-image: url(Images/Icon/edit.gif);
background-position: center center;
height: 16px;
width: 16px;
}
.icon-update {
background-image: url(Images/Icon/save.png);
background-position: center center;
height: 16px;
width: 16px;
}
.icon-delete {
background-image: url(Images/Icon/delete.png);
background-position: center center;
height: 16px;
width: 16px;
}
.icon-cancel {
background-image: url(Images/Icon/back.png);
background-position: center center;
height: 16px;
width: 16px;
}
- B4: Tạo các thư mục Images trong thư mục Styles, và thư mục Icon trong thư mục Images vừa tạo.
- B5: Download các biểu tượng và Copy chúng vào thư mục Icon.
Bạn có thể tải về Biểu tượng bằng cách nhấn vào liên kết tải về dưới đây
- B6: Copy toàn bộ thư mục Bootstrap vừa Download vào Project.
- B7: Mở File Site.Master nhúng thêm các css và js Bootstrap vào Project, sau khi chèn xong mã HTML có dạng.
<head runat="server">
<title>Bootsrap Tooltip</title>
<link href="~/Styles/Site.css"rel="stylesheet"type="text/css"/>
<link href="~/bootstrap/css/bootstrap.css"rel="stylesheet"type="text/css"/>
<link href="~/Styles/Button.css"rel="stylesheet"type="text/css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip({
});
});
</script>
<asp:ContentPlaceHolderID="HeadContent"runat="server">
</asp:ContentPlaceHolder>
</head>
- B8: Mở file Default.aspx nhập vào các mã HTML phía dưới.
<%@ PageTitle="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="BootsrapTooltip._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Sử dụng Bootsrap Tooltip cho LinkButton trong Asp.net
</h2>
<br />
<div class="btn-group">
<asp:LinkButton ID="cmdAddNew"CssClass="btn"CommandName="Add"CausesValidation="true"runat="server"data-toggle="tooltip"data-placement="top"title="Add">
<i class="icon-add"></i>
</asp:LinkButton>
<asp:LinkButton ID="cmdUpdate"CssClass="btn"CommandName="Update"CausesValidation="true"runat="server"data-toggle="tooltip"data-placement="top"title="Update">
<i class="icon-update"></i>
</asp:LinkButton>
<asp:LinkButton ID="cmdDelete"CssClass="btn"CommandName="Delete"CausesValidation="false"runat="server"data-toggle="tooltip"data-placement="top"title="Delete">
<i class="icon-delete"></i>
</asp:LinkButton>
<asp:LinkButton ID="cmdCancel"CssClass="btn"CommandName="Cancel"CausesValidation="false"runat="server"data-toggle="tooltip"data-placement="top"title="Cancel">
<i class="icon-cancel"></i>
</asp:LinkButton>
</div>
</asp:Content>
Bootsrap Tooltip cho phép người lập trình có thể thay đổi vị trí hiển thị Tooltip như: trên, dưới, trái, phải với các thuộc tính: data-placement="top", data-placement="bottom", data-placement="left", data-placement="right"
Hoặc bạn cũng có thể thay đổi Css để Tooltip thực sự nổi bật.
Ngoài ra bạn cũng có thể sử dụng Code để thêm Tooltip cho LinkButton với cú pháp như sau:
Như vậy chúng ta đã hoàn thành việc tích hợp thư viện Bootstrap Tooltip vào Link Button của Asp.net rồi đó. Bây giờ chạy Project bạn sẽ có kết quả như ảnh phía dưới.
Hoặc bạn cũng có thể thay đổi Css để Tooltip thực sự nổi bật.
Ngoài ra bạn cũng có thể sử dụng Code để thêm Tooltip cho LinkButton với cú pháp như sau:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Try
If Page.IsPostBack = False Then
Dim sTooltip AsString = ""
With cmdAddNew
sTooltip = "Add Record"
.Attributes.Add("data-toggle", "tooltip")
'Position
.Attributes.Add("data-placement", "top")
'Label
.Attributes.Add("data-original-title", sTooltip)
End With
End If
Catch ex As Exception
End Try
End Sub
Như vậy chúng ta đã hoàn thành việc tích hợp thư viện Bootstrap Tooltip vào Link Button của Asp.net rồi đó. Bây giờ chạy Project bạn sẽ có kết quả như ảnh phía dưới.
Chúc các bạn thành công!
Quang Bình
0 comments Blogger 0 Facebook
Post a Comment