HTML5 Verileriyle Daha İyi UX Kurma- * Özellikler

JavaScript ile daha sonra erişmek için özel bir HTML öğesine özel veri eklemek hiç istediniz mi? HTML5 piyasaya sürülmeden önce, DOM ile ilişkilendirilmiş özel verileri saklamak çok karışık bir durumdu ve geliştiriciler standart olmayan nitelikler getirmek ya da problemi çözmek için eski setUserData () yöntemini kullanmak gibi her türden kötü niyetli haberi kullanmak zorunda kaldılar.

Neyse ki, artık HTML5'in yeni bir global tanıtımı yaptığı için bunu yapmak zorunda değilsiniz. veri-* HTML öğelerine ek bilgi yerleştirmeyi mümkün kılan özellikler. Yeni veri-* Öznitellikler HTML'yi daha genişletilebilir hale getirme, bu nedenle daha karmaşık uygulamalar oluşturmanıza olanak sağlar, ve Ajax çağrıları veya sunucu tarafı veritabanı sorguları gibi yoğun kaynak kullanan teknikleri kullanmak zorunda kalmadan daha sofistike bir kullanıcı deneyimi yaratın.

Yeni küresel niteliklerin tarayıcı desteği, tüm modern tarayıcılar tarafından desteklendikleri için nispeten iyidir (IE8-10 kısmen desteklemektedir).

Sözdizimi veri-* Öznitellikler

Yeni sözdizimi veri-* öznitelikler, aria ön ekli özniteliklere benzer. Yerine küçük harfli bir dize ekleyebilirsiniz. * işaret. Ayrıca, her özniteliğe bir dize biçiminde bir değer atamanız gerekir..

Diyelim ki oluşturmak istediğinizi Hakkımızda sayfasında her çalışanın çalıştığı bölümün adını saklayın. Eklemek dışında başka bir şey yapmak zorunda değilsiniz. veri bölümü aşağıdaki gibi uygun HTML öğesine özel öznitelik:

 
 
 John Doe 
 
 Jane Doe 
 

görenek veri-* öznitelikler, tıpkı tıpkı gibi sınıf ve İD Nitelikler, böylece her HTML öğesinde bunları kullanabilirsiniz. Ayrıca birçok ekleyebilirsiniz veri-* İstediğiniz gibi bir HTML etiketine öznitelikler. Yukarıdaki örnekte, örneğin adında yeni bir özel özellik sunabilirsiniz. Veri Kullanıcı çalışan kullanıcı adlarını saklamak için.

 
 
 John Doe 
 
 Jane Doe 
 

Genel bir kural olarak, bir HTML öğesine kendi özel niteliğinizi eklemek istiyorsanız, onu her zaman önekle veri- dize. Aynı şekilde, başkasının kodunda veri önekli bir öznitelik gördüğünüzde, bunun yazar tarafından tanıtılan özel bir öznitelik olduğundan emin olabilirsiniz..

Ne Zaman Kullanılır ve Ne Zaman Özel Nitelikler Kullanılmaz

W3C özel tanımlar veri-* gibi öznitelikleri:

“Özel veri nitelikleri, sayfaya veya uygulamaya özel özel verileri depolamak üzere tasarlanmıştır;.”

Kullanmayı düşünmeye değer veri-* Öznitellikler depolamak istediğiniz veriler için başka bir anlamsal özellik bulamadığınızda.

Bunları yalnızca şekillendirme amacıyla kullanmak en iyi fikir değildir; sınıf ve stil Öznitellikler. HTML5'in semantik bir niteliği olduğu bir veri türü saklamak istiyorsanız, örneğin datetime için öznitelik öğesini, onu veri öneki özelliği yerine kullanın.

Bunu not etmek önemlidir veri-* öznitelikler verileri tutar sayfaya veya uygulamaya özel, bu, arama motorları ve dış uygulamalar gibi kullanıcı aracıları tarafından göz ardı edileceği anlamına gelir. Veri öneki özelliklerine yalnızca, HTML’yi barındıran sitede çalışan kodla erişebilirsiniz.

görenek veri-* öznitelikler Bootstrap ve Zurb Foundation gibi ön uç çerçeveler tarafından da yaygın olarak kullanılmaktadır. İyi haber, veri ön ekli özellikleri bir çerçevenin parçası olarak kullanmak istiyorsanız JavaScript'in nasıl yazılacağını bilmek zorunda olmamanız gerektiğidir, çünkü sadece bir fonksiyonelliğini tetiklemek için HTML koduna eklemeniz gerekir. önceden yazılmış JavaScript eklentisi.

Aşağıdaki kod snippet'i, Bootstrap’da bir düğmeye basarak sol tarafa bir araç ipucu ekler. Veri mafsallı ve veri yerleştirme özel özellikler ve bunlara uygun değerler atama.

  Soldaki araç ipucu 

Hedef veri-* CSS ile öznitelikler

Her ne kadar tavsiye edilmez veri-* sadece stil oluşturma amacıyla, genel özellik seçicileri yardımı ile ait oldukları HTML öğelerini seçebilirsiniz. Belirli bir veri ön ekli niteliği olan her bir öğeyi seçmek istiyorsanız, CSS'nizde bu sözdizimini kullanın:

 li [veri kullanıcısı] renk: mavi; 

Özel kodlarda depolanan tüm veriler görünmez olduktan sonra, yukarıdaki kod snippet'inde mavi renkte görüntülenecek olan kullanıcı adlarının bu olmadığını unutmayın.

 li [data-department = "IT"] sınır: düz mavi 1 piksel; 

 var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap kullanıcı: "janedoe", bölüm: "IT" 

 var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe

 $ ("# jane"). vurgulu (function () var department = $ ("# jane"). data ("department"); alert (department););

 var town = $ ("# jane") Veriler ("şehir", "New York");