ماهذه الخاصية الجديدة في html

لاحظ أنه هذه الخصائص تبدأ بكلمة data-

أي يتم استخدام السمة data- * لتخزين البيانات المخصصة الخاصة بالصفحة أو التطبيق. ، أيضا تمنحنا السمة data- * القدرة على تضمين سمات البيانات المخصصة في جميع عناصر HTML.

يمكن بعد ذلك استخدام البيانات المخزنة (المخصصة) في JavaScript للصفحة لإنشاء تجربة مستخدم أكثر جاذبية (بدون أي مكالمات Ajax أو استعلامات قاعدة بيانات من جانب الخادم).

تتكون السمة data- * من جزأين:

• يجب ألا يحتوي اسم السمة على أي أحرف كبيرة ، ويجب أن يتكون من حرف واحد على الأقل بعد البادئة "data-"
• يمكن أن تكون قيمة السمة أي سلسلة

وبالتالي تقوم بوتستراب باستخدام الخاصية data-* لتخزين بيانات مخصص للصفحة ليتم استخدامها من خلال JavaScript

هاته الخصائص خاصة حصرا ببوتستراب 5 ولكنه جائز تعريفها في HTML فهي مخصصة وتحمل بيانات يتعامل معها البوتستراب بطريقة ما،

كانت هاته الخصائص على نحو data-target و data-toggle وغيرها .. ولكن مؤخرا وفي النسخة الخامسة من بوتستراب، تم اضافة bs اختصارا عن bootstrap لتمييز هاته الخصائص.

وبنفس المنطق، يمكنك اضافة أية خصائص تخصك او تخزن أي بيانات تتعلق بشيء لا توفره HTML كالتالي مثلا:

<h2 custom="hello">
io. Hsoub 
</h2>

ثم سيمكن الوصول اليها عن طريق الجافاسكربت كالتالي:

var h2 = document.querySelector('h2');
var attr = h2.getAttribute('custom');
console.log(attr); // hello

ولكن لتنظيم هاته العملية تقترح HTML اضافة الى كل هاته الخواص الخاصة السابقة data، فبدل custom تصبح data-custom و بدل target تصبح data-target وهكذا.. ويكون هذا لإلتقاطها وحقنها في مجموعة البيانات dataset المرافقة لهذا العنصر او الوسم.

<h2 data-custom="hello">
io. Hsoub 
</h2>

ليكون التعامل معها عن طريق الجافاسكربت كالتالي:

var h2 = document.querySelector('h2');
var attr = h2.dataset.custom;
console.log(attr) // hello 

مرحبًا ، ببساطة شديدة سمة الـ data هي مثل لتخزين معلومات معينة لهذا العنصر في html ، كمثال بسيط ، عندي العديد من العناصر لديها نفس الـ id من هذا النوع

<input type='text' id='user_id' />
<input type='text' id='user_id' />

، وأريد القيام بالتعديل على مستخدم أو يوزر معين منهم ، سأحتاج لتمييز كل منهم بالأيدي الخاص باليوزر بالشكل التالي

<input type='text' id='user_id' data-id='1' />
<input type='text' id='user_id' data-id='2' />

طبعًا يمكنك إنشاء سمة بأي إسم بعد ال data- وهي ليست خاصة بالبوتستراب.

طبعًا هناك ضوابط ، تحديدًا ضابطين لإنشاءها وهي:-

1. أن لا تتكون من أحرف كبيرة ، مثلًا لا يمكنك إنشاء data-USERNAME.
2. يمكن أن تكون أي نص.

سأقوم بإرفاق العديد من التوثيقات لشرحها بشكل أكثر تفصيلًا كما طلبت.