التعليق: ربما عند استخدام jQuery Mobile ، سترى غالبًا استخدام Data-Rulle و Data-theme ، وما إلى ذلك. هذه هي سمات HTML5 مخصصة. وقد جمعت هذه المقالة بعض. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها.
ربما عند استخدام jQuery Mobile ، سترى غالبًا دور البيانات وموضوع البيانات وما إلى ذلك ، على سبيل المثال: يمكن أن يحقق الرمز التالي تأثير الرأس:
<Div Data-Role = "Header">
<h1> أنا العنوان </h1>
</div>
تصفح من خلال هاتفك المحمول ، والتأثير على النحو التالي:
لماذا يمكنك تحقيق تأثير الأسود في الأسفل وتركيز النص عن طريق كتابة رأس البيانات =؟
توفر هذه المقالة أبسط طريقة لتنفيذها ، بحيث يمكن للجميع أن يكون لديهم فهم بديهي لهذه الاستخدامات.
نكتب صفحة HTML لتخصيص سمة Data-chb = header. نأمل أن يكون لون خلفية منطقة DIV مع هذه السمة أسود ، والنص أبيض ، ويتم عرض المركز ؛ يتم عرض DIV التي لا تحتوي على سمة مخصصة للبيانات في الوضع الافتراضي. رمز HTML كما يلي:
<body>
<div data-chb = "header">
<h1> لقد استخدمت div من السمة المخصصة للبيانات chb </h1>
</div>
<br/>
<viv>
لم أستخدم بيانات CHB لتخصيص السمات ، لذلك أود أن أريها كما ينبغي ؛
</div>
</body>
لتحقيق تأثير عرض لون الخلفية السوداء والنص الأبيض وشاشة المركز ، نحدد CSS التالية:
<style>
.ui_header {
خلفية اللون: أسود ؛
محاذاة النص: المركز ؛
اللون: أبيض.
الحدود: 1 بكسل الصلبة #000 ؛
}
</style>
ثم نستخدم طريقة JS التالية لإضافة تعريفات CSS ديناميكيًا عند تحميل الصفحة ، وتغيير نمط العرض الخاص بـ DIV مع سمة البيانات chb:
<script type = "text/javaScript">
window.onload = function () {
var elems = document.getElementSbyTagName ("div") ؛
if (elems! = null && elems.length> 0) {
var length = elems.length ؛
// transfuse جميع عناصر التحكم DIV
لـ (var i = 0 ؛ i <length ؛ i ++) {
var elem = elems [i] ؛
// احصل على الخصائص المخصصة للتحكم
var customattr = elem.dataset.chb ؛
// يمكنك أيضًا الحصول على خصائص مخصصة من خلال الطريقة التالية
// var customattr = elem.dataset ["chb"] ؛
// إذا كانت قيمة الرأس التي قمنا بها مسبقًا ، فهذا يعني أنها يجب معالجتها
if (customattr == "header") {
// إضافة نمط
Elem.SetAttribute ("class" ، "ui_header") ؛
}
}
}
}
</script>
تعرض الصفحة النهائية التأثير التالي:
يحب الأشخاص دائمًا إضافة خصائص مخصصة إلى علامات HTML لتخزين البيانات ومعالجتها. لكن المشكلة في القيام بذلك هي أنك لا تعرف ما إذا كانت البرامج النصية الأخرى ستعيد تعيين خصائصك المخصصة في المستقبل. بالإضافة إلى ذلك ، لا يتوافق بناء جملة HTML الخاص بك مع مواصفات HTML ، وكذلك بعض الآثار الجانبية الأخرى. هذا هو السبب في أنك قمت بإضافة خاصية بيانات مخصصة إلى مواصفات HTML5 ، ويمكنك القيام بالكثير من الأشياء المفيدة معها.
يمكنك قراءة المواصفات التفصيلية لـ HTML5 ، ولكن استخدام سمة البيانات المخصصة هذه بسيطة للغاية. يمكنك إضافة أي سمة تبدأ بالبيانات إلى علامة HTML. لا يتم عرض هذه السمات على الصفحة. لن يؤثر ذلك على تخطيط صفحتك وأسلوبها ، لكنه قابل للقراءة وقابل للكتابة.
المقتطف التالي هو علامة HTML5 صالحة:
<div
data-myid = "3e4ae6c4e"> بعض البيانات الرائعة </div>
ولكن ، كيف تقرأ هذه البيانات؟ يمكنك بالتأكيد التكرار من خلال عناصر الصفحة لقراءة الخصائص التي تريدها ، ولكن JQuery لديها طرق مدمجة لمعالجة هذه الخصائص. استخدم طريقة JQuery's .data () للوصول إلى خصائص البيانات هذه. إحدى الطرق هي .Data (OBJ) ، والتي تظهر بعد إصدار JQuery 1.4.3 ، ويمكنه إرجاع سمة البيانات المقابلة.
على سبيل المثال ، يمكنك استخدام طريقة الكتابة التالية لقراءة قيمة سمة Myid للبيانات:
var myid = jQuery ("#asome"). البيانات ('myid') ؛
console.log (myid) ؛ يمكنك أيضًا استخدام بناء جملة JSON في خاصية البيانات-على سبيل المثال ، إذا كتبت HTML التالية:
<div data-Awesome = '{"game": "on"}'> </viv>
يمكنك الوصول مباشرة إلى هذه البيانات من خلال JS. من خلال القيمة الرئيسية لـ JSON ، يمكنك الحصول على القيمة المقابلة:
var gameStatus = jQuery ("#Awesome-json"). البيانات ('Awesome'). اللعبة ؛
console.log (gameStatus) ؛ يمكنك أيضًا تعيين قيم إلى سمة البيانات-مباشرة من خلال طريقة .data (المفتاح ، القيمة). الشيء المهم الذي تحتاج إلى الانتباه إليه هو أن هذه السمات-* يجب أن تكون هذه السمات مرتبطة بالعنصر الذي تكون فيه ، ولا تعاملها كأدوات تخزين لتخزين أي شيء.
يضيف المترجم: على الرغم من أن البيانات-* هي سمة تظهر فقط في HTML5 ، فإن jQuery عالمي ، لذلك في صفحات أو متصفحات غير HTML5 ، لا يزال بإمكانك استخدام طريقة .data (OBJ) لمعالجة البيانات.