ASP.NET ve dinamik tooltip uygulaması
Bu çalışmada sizlere çok basit bir şekilde hazır bir javascript uygulamasının ASP.NET'te dinamik bir şekilde çalıştırılması örneğini göstereceğim. Tooltipler bildiğiniz gibi web projelerimizde bir elemanın, katmanın, nesnenin üzerine geldiğimizde açılan; içerisinde açıklayıcı metin vb. ifadeler barındıran "balon" uygulamalarıdır. Bu uygulamalarla ilgili yüzlerce ücretsiz örnek indirebilirsiniz. Sizlere şuradan indirdiğim scriptin dinamik olarak bir datalist içerisinde kullanımını hızlıca göstereceğim.
Uygulamayı indirip .rar dosyasını açtığınızda sadece tek bir boxover.js dosyasının kullanıldığını göreceksiniz.
Yeni bir ASP.NET web projesi başlatıyorum ve bahsettiğim javascript dosyasını projeme dahil ediyorum. Ardından head tagleri arasından çağırıyorum.
<script type="text/javascript" language="javascript" src="js/boxover.js"></script>
Proje dosyama bir imagebutton sürükleyip bırakıyorum.
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/doghat1.jpg" title="header=[Balk] body=[Metin</p>]" />
Dikkat ederseniz "title" adlı attribute özelliğine header ve body değerleri atadım. Projeyi çalıştırıp resmin üzerine geldiğimde aşağıdaki görüntüyü elde ettim.
Şimdi bunu dinamik olarak bir datalist objesi içinde listelenen itemlara nasıl uygulayacağımızı görelim.
Bir datalisti veritabanına bağlamak ve oradan verileri çekip listeleme konusuna burada girmeme gerek yok. Datalist içerisinde bir ASP Image nesnesi olduğunu varsayarsak codebehind kısmında bu nesnenin attributes özelliğinin add metodunu aşağıda belirttiğim şekliyle kullandığımızda dinamik olarak veritabanından değerleri çekip görüntüleyebiliriz.
ImgButton1.Attributes.Add("title", "header=[" + dt.Rows[0]["Baslik"].ToString() + "] body=[" + dt.Rows[0]["Aciklama"].ToString() + "]");
Gördüğünüz gibi dt adındaki datatableın sıfırncı rowundan Baslik ve Aciklama adlı fieldlarını tooltip olarak kullanıyoruz.
23 Mayıs 2009 Cumartesi akşam 23:59
Mesajınızı yazabilirsiniz