HTML5 Data Attribute
Bu yazımca kısaca HTML5 ile birlikte gelen data attritube kullanımından bahsedeceğim.
Bu attribute sayesinde HTML elemanları üzerinde (div, button, input vb.) istediğiniz bir veriyi(datayı) tutabiliyorsunuz.
Data atrritube kullanımı şu şekildedir.
data-data_adi=”data_degeri”
“data-” yazımından dan sonra oluşturacağınız data attribute’e istediğiniz bir ismi verebilir ve içerisine string formatında istediğiniz veriyi doldurabilirsiniz. Bir html elemanı üzerinde istediğiniz kadar data attribute kullanabilirsiniz. Tanımlama yaparken büyük harf kullanmamaya özen gösteriniz, yazım standartlarına aykırı ve bazen çalışmayabiliyor.
Örnek vermek gerekirse bir ürün listemiz var diyelim. Site ziyaretçileri “Satın Al” butonuna tıkladıklarında satın alma işlemi gerçekleşecek.
<table> <tr> <th>Urun Adı></th> <th>İşlem</th> </tr> <tr> <td>Microsoft Lumia 640XL</td> <td><input type="button" value="Satın Al" data-urunid="14"></td> </tr> <tr> <td>LG G4</td> <td><input type="button" value="Satın Al" data-urunid="15"></td> </tr> <tr> <td>Apple iPhone 6</td> <td><input type="button" value="Satın Al" data-urunid="16"></td> </tr> </table>
Yukarıdaki gibi bir yapıda müşterilerimiz “Satın Al” butonuna bastıklarında hangi ürünü satın almak istediklerini anlamak için ilgili ürünün ID değerine ulaşmam gerekecek. Örnekte olduğu gibi bunu data-urunid alanını oluşturarak tuttum.
Şimdi jQuery kullanarak data nesnesine nasıl ulaşabileceğime bakalım.
var urunID= $(this).data('urunid'); // veya $(this).attr('data-urunid');
Sadece jQuery kullanarak değil direk olarak javascript ile de hatta ilgili buttonlara runat=”server” vererek C# tarafında da bu data attributelerine ulaşabilirsiniz.