it-swarm.asia

سمات تبديل البيانات في Twitter Bootstrap

ماذا تفعل سمات data-toggle في Twitter Bootstrap؟ لم أجد إجابة في Bootstrap API.

لقد رأيت سؤالًا مشابهًا من قبل أيضًا ، link . لكنها لم تساعدني كثيرا.

javascriptjqueryhtml5twitter-bootstrap
266
user1765876

إنها سمة بيانات 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>
198
epascarello

أي سمة تبدأ بـ data- هي بادئة السمات المخصصة المستخدمة لبعض الأغراض المحددة (يعتمد هذا الغرض على التطبيق). تمت إضافته كعلاج دلالي لاستخدام الناس المكثف لـ rel والسمات الأخرى لأغراض أخرى غير الأغراض الأصلية المقصودة (rel غالبًا ما كانت تستخدم للاحتفاظ ببيانات لأشياء مثل تلميحات الأدوات المتقدمة).

في حالة Bootstrap ، لست على دراية بأعمالها الداخلية ، لكن انطلاقًا من الاسم ، أعتقد أنه من الخطورة السماح بتبديل الرؤية أو ربما وضع العنصر المتصل به (مثل قابل للطي شريط جانبي على Octopress.org ).

يحتوي html5doctor على مقالة جيدة عن سمة البيانات .

تعتبر الدورة 2 مثالًا آخر على الاستخدام المكثف لسمة البيانات .

71
Shauna

على سبيل المثال ، لنفترض أنك تقوم بإنشاء تطبيق ويب لسرد الوصفات وعرضها. قد ترغب في أن يتمكن عملاؤك من فرز القائمة وعرض ميزات الوصفات وما إلى ذلك قبل اختيار الوصفة لفتحها. من أجل القيام بذلك ، تحتاج إلى ربط أشياء مثل وقت الطهي والمكون الأساسي وموقف الوجبة وما إلى ذلك داخل عناصر القائمة للوصفات مباشرةً.

<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 إلى عناصر القائمة ، ويمكنك وضع جميع الوصفات في مجلدات منفصلة بناءً على الوقت والوجبة والمكون (أي). كان الحل الذي اتخذه معظم المطورين هو استخدام سمات الفصل لتخزين معلومات حول العنصر الحالي. هذا له العديد من المزايا:

  • يمكنك تخزين فئات متعددة على عنصر
  • يمكن أن تكون أسماء الفئات قابلة للقراءة البشرية
  • من السهل الوصول إلى الفصول باستخدام JavaScript (className)
  • يرتبط الفصل بالعنصر الذي يعمل عليه

ولكن هناك بعض العيوب الرئيسية لهذا الأسلوب:

  • عليك أن تتذكر ما تفعله الطبقات. إذا نسيت أو قام مطور جديد بتولي المشروع ، فقد تتم إزالة الفئات أو تغييرها دون إدراك أن ذلك يؤثر على كيفية تشغيل التطبيق.
  • يتم استخدام الفصول الدراسية أيضًا للتصميم باستخدام CSS ، ويمكنك تكرار فئات CSS بفئات البيانات عن طريق الخطأ ، وينتهي الأمر بأساليب غريبة على صفحاتك الحية.
  • من الأصعب إضافة عناصر بيانات متعددة. إذا كان لديك عناصر بيانات متعددة ، فستحتاج إلى الوصول إليها بطريقة أو بأخرى باستخدام JavaScript ، إما عن طريق اسم الفئة أو الموضع في قائمة الفئات. لكن من السهل الفوضى.

جميع الطرق الأخرى التي اقترحتها كانت لها هذه المشاكل وكذلك غيرها. ولكن نظرًا لأنها كانت الطريقة الوحيدة لتضمين البيانات بسرعة وسهولة ، فهذا ما فعلناه. سمات بيانات 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 ومعالجة الصفحة بناءً على تلك البيانات.

30
shikarii

من مستندات Bootstrap:

<!--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>
23
Dan

يخبر وجود سمة البيانات هذه Bootstrap بالتبديل بين الحالات المرئية أو المنطقية لعنصر آخر في تفاعل المستخدم.

يتم استخدامه لإظهار الوسائط ، ومحتوى علامة التبويب ، ونصائح الأدوات ، وقوائم المنبثقة ، فضلاً عن ضبط حالة الضغط لزر التبديل. يتم استخدامه بطرق متعددة دون وثائق واضحة.

5
Gregor

إنها سمة بيانات HTML5 المعرفة في Bootstrap. وهو يربط زر لحدث ما.

4
Amrendra

الغرض من تبديل البيانات في 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>

يعمل على ما يرام.

4
shawnlg

تم تقديم الكثير من الإجابات ، لكنها لم تصل إلى هذه النقطة. دعونا إصلاح هذا.

http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

الى النقطة

  1. لا يتم تحليل أي سمة تبدأ بـ data- بواسطة محلل HTML5.
  2. يستخدم Bootstrap سمة data-toggle لإنشاء وظيفة طي.

كيف تستعمل: فقط 2 خطوات

  1. أضف class="collapse" إلى العنصر #A الذي تريد طيه.
  2. أضف data-target="#A" و data-toggle="collapse".

الغرض: تتيح لنا سمة data-toggle إنشاء عنصر تحكم لطي/توسيع div (كتلة) إذا استخدمنا Bootstrap.

3
Akshay Vijay Jain

يقوم Bootstrap برفع معايير HTML5 للوصول إلى سمات عنصر DOM بسهولة داخل جافا سكريبت.

البيانات-*

يشكل فئة من السمات ، تسمى سمات البيانات المخصصة ، والتي تسمح بتبادل معلومات الملكية بين HTML وتمثيل DOM الذي يمكن استخدامه بواسطة البرامج النصية. تتوفر جميع هذه البيانات المخصصة عبر واجهة HTMLElement للعنصر الذي تم تعيين السمة عليه. تتيح الخاصية HTMLElement.dataset الوصول إليها.

مرجع

2
Rel

هنا يمكنك أيضًا العثور على المزيد من الأمثلة للقيم التي يمكن data-toggle تعيينها. فقط قم بزيارة الصفحة ثم CTRL+F للبحث عن data-toggle.

2
pebox11