الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

تعرف على الخاصية -data في html5

بدأه Mr.B في 11 أغسطس 2013 · 6 رد · 1,029 مشاهدة · في قسم البرمجة بــ Javascript
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم ورحمة الله

 

تسمح html5 لك بإنشاء خصائص attributes أنت تحددها وتضمين معلومات في الوسم عن طريق الخاصية -data، مثال عليها:

<div class="comment" data-user-id="132442" data-user-name="Mr.B" data-comment-id="1432423" data-date="1376233064454">
  ...
</div>

يعني فقط تكتب:

data-

وتتبعها بأي اسم تريد. هذه لها فائدة كبيرة خصوصاً مع جافاسكربت والأجاكس، تخيل مثلاً لو أنك تريد عرض الملف الشخصي للعضو دون الحاجة للإنتقال من الصفحة عن طريق أجاكس، فيمكنك عن طريق جافاسكربت قراءة الخاصية data-user-id وجلب بيانات العضو عن طريق الأجاكس، لا أذكر كيف كانت الحياة قبلها :lol: .

 

بالنسبة للوصول لها عن طريق جافاسكربت، فيمكنك استخدام الوظيفة element.getAttribute اذا كنت تستخدم جافاسكربت فقط هكذا:

element.getAttribute('data-user-id')

واذا كنت تستخدم jqeury فيمكنك اسخدام اما الوظيفة attr هكذا:

$(element).attr('data-user-id')

أو الطريقة الأفضل استخدام data (لاحظ أنك لست بحاجة لكتابة data):

$(element).data('user-id')

مثال لاستخراج أرقام التعليقات بجافاسكربت فقط:

<!DOCTYPE html><html lang="ar"><head>  <meta charset="utf-8" />  <title>مثال</title>  <style>body{direction:rtl;}</style>  <script>    (function() {        window.addEventListener('load', function() {            var comments = document.getElementsByClassName('comment');            for( var i = 0 ; i < comments.length ; i++ ) {                console.log(comments.getAttribute('data-comment-id'));            }        });    })();  </script></head><body>  <div class="comment" data-comment-id="1001">هذا التعليق رقم 1001</div>  <div class="comment" data-comment-id="1003">تعليق رقم 1003</div>  <div class="comment" data-comment-id="1006">طريقة جملية، رقمي 1006</div>  <div class="comment" data-comment-id="1012">شكراً ورقمي 1012</div>  <div class="comment" data-comment-id="1013">رقمي 1003</div></body></html>

نفس المثال لكن باستخدام jquery:

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="utf-8" />
  <title>مثال</title>
  <style>body{direction:rtl;}</style>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script>
    (function() {
        $(document).ready(function() {
            $('.comment').each(function() {
                console.log($(this).data('comment-id')); // أو $(this).attr('data-comment-id')
            });
        });
    })();
  </script>
</head>
<body>
  <div class="comment" data-comment-id="1001">هذا التعليق رقم 1001</div>
  <div class="comment" data-comment-id="1003">تعليق رقم 1003</div>
  <div class="comment" data-comment-id="1006">طريقة جملية، رقمي 1006</div>
  <div class="comment" data-comment-id="1012">شكراً ورقمي 1012</div>
  <div class="comment" data-comment-id="1013">رقمي 1003</div>
</body>
</html>

لو فقتحت المنقح، عني استخدم المنقح الافتراضي في فايرفوكس من Tools > Web developer > Web console ستجد الـlog:

 

post-231926-0-07838000-1376234882.png

 

بالتوفيق

post-231926-0-07838000-1376234882_thumb.

تم تعديل هذه المشاركة بواسطة Mr.B في 12 أغسطس 2013 في 01:47

5
#2

السلام عليكم

 

شكراً على هذه المعلومة المفيدة جداً .

 

أنا استخدم نفس النمط ولكن بدون استخدام data بمعنى إضافة خواص أخرى للعنصر غير خواصه المدعومه لتخزين البيانات بها لإستخدامها مع لغة javaScript أو css

 

مثال بإستخدام مكتبه jQuery :

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="utf-8" />
  <title>مثال</title>
  <style>
    body{direction:rtl;}
    div[commentID="1001"]{
        color:#F00;
    }
    div[commentID="1003"]{
        color:#000;
    }
    div[commentID="1006"]{
        color:#F0F;
    }
    div[commentID="1012"]{
        color:#0FF;
    }
    div[commentID="1013"]{
        color:#00F;
    }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
    $(function(){
        $(function(){
            var data = '';
            $('.comment').each(function() {
                data += $(this).attr('commentID')+'\n';
            });
            alert(data);
        });
    });
  </script>
</head>
<body>
  <div class="comment" commentID="1001">هذا التعليق رقم 1001</div>
  <div class="comment" commentID="1003">تعليق رقم 1003</div>
  <div class="comment" commentID="1006">طريقة جملية، رقمي 1006</div>
  <div class="comment" commentID="1012">شكراً ورقمي 1012</div>
  <div class="comment" commentID="1013">رقمي 1003</div>
</body>
</html>

- كما يمكن أيضاً استخدام إنشاء عناصر خاصة في HTML واستخدامها أيضاً في لغة JavaScript و css , هذا كله بعيد عن W3C :D .

تم تعديل هذه المشاركة بواسطة ahmedsaoud31 في 11 أغسطس 2013 في 20:50

1

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

#3

getAttribute ستأتي بأي خاصية حتى لو كانت غير مدعومة، إلا أن اضافة خاصية غير قياسية ممنوع وستعطي خطأ مثل:

Attribute commentId not allowed on element div at this point.
#4
Mr.B كتب:

 

getAttribute ستأتي بأي خاصية حتى لو كانت غير مدعومة، إلا أن اضافة خاصية غير قياسية ممنوع وستعطي خطأ مثل:

Attribute commentId not allowed on element div at this point.

- بالطبع ولكن كنت ألجأ إلى هذا لأن data لم تكن قد أضيفت بعد أو أنني لم أسمع عنها , وقد أشرت لأن هذا مخالف لقواعد الـ W3C .

 

ahmedsaoud31 كتب:
هذا كله بعيد عن W3C :D .

 

أين ظهرت لك رسالت الخطأ هذه :

Attribute commentID not allowed on element div at this point.

استخدمت الشكل التالي ولم يظهر أي خطأ :

alert(document.getElementsByTagName("div")[0].getAttribute("commentID"));

- الواضح من كودك أنك تستخدم firebug لمعالجة javaScript .

 

تعديل:

الكود السابق كان به خطأ وهو استخدام comment-id بدلاً من commentID لأني قمت بالتعديل على كودك , فقد تم التصحيح في نفس المشاركة السابقة .

تم تعديل هذه المشاركة بواسطة ahmedsaoud31 في 11 أغسطس 2013 في 21:01

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

#5

الخطأ الذي أقصده هو الخطأ الذي يظهر عند التحقق من مطابقة الصفحة للمعاير (Markup Validation Service) ، مشكلة استخدام شيء غير موافق يعني أن المتصفح يقرر بنفسه كيفة التعامل مع الخطأ، يعني لاتستغرب لو تجاهل متصفح هذه الخاصية لأنها لاتطابق الخصائص القياسية أو لم يتعرف عليها.

1
#6
اقتباس
الخطأ الذي أقصده هو الخطأ الذي يظهر عند التحقق من مطابقة الصفحة للمعاير (Markup Validation Service) ، مشكلة استخدام شيء غير موافق يعني أن المتصفح يقرر بنفسه كيفة التعامل مع الخطأ، يعني لاتستغرب لو تجاهل متصفح هذه الخاصية لأنها لاتطابق الخصائص القياسية أو لم يتعرف عليها.

- كلام سليم , حتي الخواص القياسية كما تعلم لم تستقر جميع المتصفحات على تطبيقها حتى الآن , نأمل هذا فمن أكبر العقبات التي تواجه مطور الويب خصيصاً هو التوافقية مع أغلب المتصفحات .

- طبعاً كنت استخدم هذا لأني لم أسمع عن data من قبل ولكن طالما وجدنا البديل القياسي طبعاً الأولى إستخدامه , شكراً لك مجدداً على هذه اللفتة الجميلة منك .

1

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

#7

إذا أراد أحد التأكّد من دعم خاصية حديثة ، في html css جافاسكربت وغيرها، فيمكنه الإطلاع على الموقع Can I use، موقع به جدول لكل خاصية ومدى دعم المتصفحات الشهيرة لها.

مواضيع مشابهة