ماذا تفعل سمات data-toggle
في Twitter Bootstrap؟ لم أجد إجابة في Bootstrap API.
لقد رأيت سؤالًا مشابهًا من قبل أيضًا ، link . لكنها لم تساعدني كثيرا.
إنها سمة بيانات HTML5 تقوم تلقائيًا بتوصيل العنصر بنوع عنصر واجهة المستخدم.
بعض الأمثلة:
data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"
انتقل إلى مستندات JavaScript وابحث عن تبديل البيانات وسترى استخدامها في أمثلة التعليمات البرمجية.
مثال واحد للعمل:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">Item</a></li>
</ul>
</div>
أي سمة تبدأ بـ data-
هي بادئة السمات المخصصة المستخدمة لبعض الأغراض المحددة (يعتمد هذا الغرض على التطبيق). تمت إضافته كعلاج دلالي لاستخدام الناس المكثف لـ rel
والسمات الأخرى لأغراض أخرى غير الأغراض الأصلية المقصودة (rel
غالبًا ما كانت تستخدم للاحتفاظ ببيانات لأشياء مثل تلميحات الأدوات المتقدمة).
في حالة Bootstrap ، لست على دراية بأعمالها الداخلية ، لكن انطلاقًا من الاسم ، أعتقد أنه من الخطورة السماح بتبديل الرؤية أو ربما وضع العنصر المتصل به (مثل قابل للطي شريط جانبي على Octopress.org ).
يحتوي html5doctor على مقالة جيدة عن سمة البيانات .
تعتبر الدورة 2 مثالًا آخر على الاستخدام المكثف لسمة البيانات .
على سبيل المثال ، لنفترض أنك تقوم بإنشاء تطبيق ويب لسرد الوصفات وعرضها. قد ترغب في أن يتمكن عملاؤك من فرز القائمة وعرض ميزات الوصفات وما إلى ذلك قبل اختيار الوصفة لفتحها. من أجل القيام بذلك ، تحتاج إلى ربط أشياء مثل وقت الطهي والمكون الأساسي وموقف الوجبة وما إلى ذلك داخل عناصر القائمة للوصفات مباشرةً.
<li><a href="recipe1.html">Borscht</a></li>
<li><a href="recipe2.html">Chocolate Mousse</a></li>
<li><a href="recipe3.html">Almond Radiccio Salad</a></li>
<li><a href="recipe4.html">Deviled Eggs</a></li>
للحصول على هذه المعلومات في الصفحة ، يمكنك القيام بالعديد من الأشياء المختلفة. يمكنك إضافة تعليقات إلى كل عنصر من عناصر LI ، ويمكنك إضافة سمات rel إلى عناصر القائمة ، ويمكنك وضع جميع الوصفات في مجلدات منفصلة بناءً على الوقت والوجبة والمكون (أي). كان الحل الذي اتخذه معظم المطورين هو استخدام سمات الفصل لتخزين معلومات حول العنصر الحالي. هذا له العديد من المزايا:
ولكن هناك بعض العيوب الرئيسية لهذا الأسلوب:
جميع الطرق الأخرى التي اقترحتها كانت لها هذه المشاكل وكذلك غيرها. ولكن نظرًا لأنها كانت الطريقة الوحيدة لتضمين البيانات بسرعة وسهولة ، فهذا ما فعلناه. سمات بيانات HTML5 إلى الإنقاذ
أضاف HTML5 نوعًا جديدًا من السمات إلى أي عنصر — عنصر البيانات المخصص (بيانات *). هذه هي السمات المخصصة (المشار إليها بعلامة *) التي يمكنك إضافتها إلى عناصر HTML الخاصة بك لتحديد أي نوع من البيانات التي تريدها. وهي تتألف من جزأين:
اسم السمة هذا هو اسم السمة. يجب أن يكون على الأقل حرفًا واحدًا على الأقل وأن يحتوي على بادئة البيانات. على سبيل المثال: مكون البيانات الرئيسي ، وقت طهي البيانات ، وجبة البيانات. هذا هو اسم البيانات الخاصة بك.
سمة Vaule مثل أي سمة HTML أخرى ، يمكنك تضمين البيانات نفسها في علامات اقتباس مفصولة بعلامة المساواة. يمكن أن تكون هذه البيانات أي سلسلة صالحة على صفحة ويب. على سبيل المثال: data-main-ingredient = "chocolate".
يمكنك بعد ذلك تطبيق سمات البيانات هذه على أي عنصر HTML تريده. على سبيل المثال ، يمكنك تحديد المعلومات في قائمة المثال أعلاه:
<li data-main-ingredient="beets" data-cooking-time="1 hour" data-meal="dinner"><a href="recipe1.html">Borscht</a></li>
<li data-main-ingredient="chocolate" data-cooking-time="30 minutes" data-meal="dessert"><a href="recipe2.html">Chocolate Mousse</a></li>
<li data-main-ingredient="radiccio" data-cooking-time="20 minutes" data-meal="dinner"><a href="recipe1.html">Almond Radiccio Salad</a></li>
<li data-main-ingredient="eggs" data-cooking-time="15 minutes" data-meal="appetizer"><a href="recipe1.html">Deviled Eggs</a></li>
بمجرد حصولك على هذه المعلومات في HTML الخاص بك ، ستتمكن من الوصول إليها باستخدام JavaScript ومعالجة الصفحة بناءً على تلك البيانات.
<!--Activate a modal without writing JavaScript. Set data-toggle="modal" on a
controller element, like a button, along with a data-target="#foo" or href="#foo"
to target a specific modal to toggle.-->
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
يخبر وجود سمة البيانات هذه Bootstrap بالتبديل بين الحالات المرئية أو المنطقية لعنصر آخر في تفاعل المستخدم.
يتم استخدامه لإظهار الوسائط ، ومحتوى علامة التبويب ، ونصائح الأدوات ، وقوائم المنبثقة ، فضلاً عن ضبط حالة الضغط لزر التبديل. يتم استخدامه بطرق متعددة دون وثائق واضحة.
إنها سمة بيانات HTML5 المعرفة في Bootstrap. وهو يربط زر لحدث ما.
الغرض من تبديل البيانات في bootstrap هو أنه يمكنك استخدام jQuery للعثور على جميع العلامات من نوع معين. على سبيل المثال ، يمكنك وضع data-toggle = "popover" في جميع علامات popover ومن ثم يمكنك استخدام محدد JQuery للعثور على كل هذه العلامات وتشغيل وظيفة popover () لتهيئة هذه العلامات. يمكنك أيضًا وضع class = "myPopover" على العلامة واستخدام محدد .myPopover لفعل الشيء نفسه. الوثائق مربكة ، لأنها تجعل الأمر يبدو أن شيئًا خاصًا يجري بهذه السمة.
هذه
<div class="container">
<h3>Popover Example</h3>
<a href="#" class="myPop" title="Popover1 Header" data-content="Some content inside the popover1">Toggle popover1</a>
<a href="#" class="myPop" title="Popover2 Header" data-content="Some content inside the popover2">Toggle popover2</a>
</div>
<script>
$(document).ready(function(){
$('.myPop').popover();
});
</script>
يعمل على ما يرام.
تم تقديم الكثير من الإجابات ، لكنها لم تصل إلى هذه النقطة. دعونا إصلاح هذا.
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
الى النقطة
data-
بواسطة محلل HTML5.data-toggle
لإنشاء وظيفة طي.كيف تستعمل: فقط 2 خطوات
class="collapse"
إلى العنصر #A
الذي تريد طيه.data-target="#A"
و data-toggle="collapse"
.الغرض: تتيح لنا سمة data-toggle
إنشاء عنصر تحكم لطي/توسيع div
(كتلة) إذا استخدمنا Bootstrap.
يقوم Bootstrap برفع معايير HTML5 للوصول إلى سمات عنصر DOM بسهولة داخل جافا سكريبت.
يشكل فئة من السمات ، تسمى سمات البيانات المخصصة ، والتي تسمح بتبادل معلومات الملكية بين HTML وتمثيل DOM الذي يمكن استخدامه بواسطة البرامج النصية. تتوفر جميع هذه البيانات المخصصة عبر واجهة HTMLElement للعنصر الذي تم تعيين السمة عليه. تتيح الخاصية HTMLElement.dataset الوصول إليها.
هنا يمكنك أيضًا العثور على المزيد من الأمثلة للقيم التي يمكن data-toggle
تعيينها. فقط قم بزيارة الصفحة ثم CTRL+F
للبحث عن data-toggle
.