Bu yazımda CSS'in genişletilmiş bir versiyonu olan SASS (Syntactically Awesome Style Sheets)'ı ele alacağım. CSS yazma deneyimini geliştiren ve stil tabanlı projelerde daha...
JQuery İle Data Attribute Değerini Alma
Bu yazımda HTML 5'de sıkça kullanılan data attritube özelliğinden bahsedeceğim. Data attritube özelliğini HTML'deki elemanlardan olan div, button, a href ve input gibi bir çok farklı yerde kullanabilmekteyiz. Bu elemanlara data özelliği ekleyerek istediğimiz verileri kullanıcı görmeden saklayıp rahatlıkla kullanabilmekteyiz. Web sitelerinde genellikle çoklu seçimlerin olduğu yerlerde (alış-veriş, sepete atma) veya toplu bir işlem uygulayacağımız yerlerde kullanabiliriz.
Kullanımı
data-data_adi="data_degeri"
Örnek: data-product-id="131" data-product-id adlı data'mıza ulaştığımızda 131 değerine ulaşabiliriz.
Örnek Kullanımı
Bir alış-veriş sitesinde telefon, bilgisayar ve tablet olmak üzere üç kategorimiz olsun. Bu kategorileri her tıkladığımda o kategoriye ait kategori id değerini almak isteyelim. Aldıktan sonra kendi amacınıza göre farklı işlemler yaptırabilirsiniz. JQuery ile veri alacağımız için çalıştıracağımız sayfaya JQuery kütüphanesi çağırmamız gerekiyor. JQuery kütüphanesini buradan sayfanıza çağırabilirsiniz.
CSS Kodu
h3.categories{
padding:5px 0;
font-size:18px;
color:#333641;
border-bottom:2px solid #00aabf;
}
a.category{
padding: 3px 5px;
background-color: #00aabf;
border: 1px solid #00aabf;
text-align: center;
font-size: 14px;
color: #ffffff;
text-decoration: none;
}
a.category:hover{
background-color: #ffffff;
border: 1px solid #00aabf;
color: #00aabf;
}
JQuery Kodu
$(".category").click(function(){
//Data yöntemi ile veri alma
var categoryId=$(this).data("category-id");
//Attr yöntemi ile veri alma
var categoryIdTwo=$(this).attr("data-category-id");
alert("Data= "+categoryId+" Attr= "+categoryIdTwo);
});
JQuery kodumuzda iki farklı kullanım mevcuttur. Data yönteminde HTML'de belirlemiş olduğunuz data-'dan sonra yazdığınız değişken ismini yazdığınızda veriyi alabilirsiniz. Attr yönteminde de farklı olarak data- ile başlayarak devam eden data tanımlayıcısı ve değişkenin hepsi yazılmalıdır. Attr'de HTML elementlerine ulaşırken data'da sadece data elementlerine ulaşabilmektedir. Kategoriye tıkladığınızda o kategoriye ait iki farklı yöntem ile aynı sonucu getiren bir alert gelecektir. Verileri aldıktan sonra ihtiyaçlarınıza göre kullanabilirsiniz.
CodePen Linki: tıklayınız
Önizleme
Umarım faydalı olmuştur. İyi çalışmalar dilerim.
Yorum yapabilmek için giriş yapmalısınız. Giriş yapmak için tıklayınız.