Merhaba arkadaşlar bu makalemizde dropDownList nesnesinde tooltip nasıl kullanılır? Bunu göreceğiz. Bu örnekte dropDownList de seçili item ile ilgili açıklama bilgisini tooltip te göstereceğiz.
Tooltip uygulamasını yapabilmemiz için projemizde jquery.min.js javascriptini kullanacağız.
Şekil 1
WebForm1.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace dropdownlist_tooltip
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
bindData();
}
}
private void bindData()
{
Dictionary<int, string> personList = new Dictionary<int, string>();
personList.Add(0, "-Select-Sec-");
personList.Add(1, "Bahadir Sahin");
personList.Add(2, "Melissa Parker");
personList.Add(3, "Tommy Paton");
personList.Add(4, "Alice May");
personList.Add(5, "Michael Alon");
personList.Add(6, "Mike Carson");
personList.Add(7, "Tracy Abbot");
personList.Add(8, "Nancy White");
personList.Add(9, "Jack Fox");
personList.Add(10, "Alina Benson");
personList.Add(11, "Joe Eagle");
personList.Add(12, "Johanna Manson");
personList.Add(13, "Emilia Peterson");
personList.Add(14, "Anna Rice");
personList.Add(15, "Maggie Clark");
DropDownList1.DataSource = personList;
DropDownList1.DataValueField = "Key";
DropDownList1.DataTextField = "Value";
DropDownList1.DataBind();
}
}
}
WebForm1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="dropdownlist_tooltip.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="javascript/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("[id*=DropDownList1] option").each(function (i) {
if (i > 0) { // skipping adding tooltip on first item i.e. on '--Select--'
// ilk eklenen item select icin tooltip eklemeyi atliyoruz
// add item text as tooltip
// item lere tooltip ekliyoruz
$(this).prop("title", $(this).text());
// to add Item value as tooltip comment above line and uncomment below line
// yukaridaki satiri item degeri tooltip aciklamasi ekleyebilirsiniz. asagidaki
//satiri tooltip acıklamasi icin kullanmayabilirsiniz
//ben bu uygulamada kisi id ve kisinin ad soyadini tooltip aciklamasi olarak gosterdim
$(this).prop("title", "Person Id: " + $(this).val() + " - " + $(this).text() );
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server" Font-Names="Arial" Font-Size="X-Large" Width="306px">
</asp:DropDownList>
</div>
</form>
</body>
</html>
Bir makalenin daha sonuna geldik. Bir sonraki makalede görüşmek üzere. Bahadır ŞAHİN
0 comments:
Yorum Gönder