دمج Bootstrap مع JavaScript

بواسطة /

الدرس التاسع عشر: دمج Bootstrap مع JavaScript

في هذا الدرس، سنتعلم كيفية دمج Bootstrap مع JavaScript لتحسين التفاعل داخل المواقع والتطبيقات التي نقوم بتطويرها. تعتبر Bootstrap مكتبة قوية توفر لنا العديد من المكونات الجاهزة مثل النماذج المنبثقة (Modals)، التلميحات (Tooltips)، القوائم المنسدلة (Dropdowns)، وغيرها الكثير. ولكن لتفعيل هذه المكونات بشكل ديناميكي، نحتاج إلى استخدام JavaScript أو jQuery لتنفيذ التفاعلات التي تجعل هذه المكونات تعمل بكفاءة.

1. دمج Bootstrap مع JavaScript

Bootstrap يأتي مع مجموعة من المكونات التي تعتمد على JavaScript لتفعيل التفاعلات مثل:

  • الـ Modals (النوافذ المنبثقة).
  • الـ Tooltips (التلميحات).
  • الـ Dropdowns (القوائم المنسدلة).
  • الـ Collapse (الانهيار والتوسيع).
  • الـ Carousels (الشرائح المتنقلة).

لدمج Bootstrap مع JavaScript، يجب أن نتأكد من تحميل ملفات Bootstrap و jQuery (إذا كنت تستخدم نسخة Bootstrap 4 أو أقل، حيث أن النسخ الأحدث من Bootstrap لا تعتمد على jQuery) وملفات Popper.js (التي تُستخدم لبعض المكونات مثل التلميحات والقوائم المنسدلة).

الخطوات:

  1. تحميل ملفات Bootstrap و JavaScript (أو jQuery و Popper.js للنسخ الأقدم).
  2. استخدام JavaScript لتفعيل المكونات.

2. تفعيل النوافذ المنبثقة (Modals) باستخدام JavaScript

النوافذ المنبثقة (Modals) هي واحدة من المكونات الأكثر استخدامًا في Bootstrap، وتتيح للمستخدمين عرض محتوى إضافي في نافذة منبثقة دون مغادرة الصفحة الحالية. يمكن فتح النافذة المنبثقة باستخدام JavaScript من خلال استخدام الـ Modal API.

مثال على نافذة منبثقة باستخدام JavaScript:

<!-- زر لفتح النافذة المنبثقة -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  افتح النافذة المنبثقة
</button>

<!-- النافذة المنبثقة -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">عنوان النافذة المنبثقة</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="إغلاق">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        محتوى النافذة المنبثقة.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
        <button type="button" class="btn btn-primary">حفظ التغييرات</button>
      </div>
    </div>
  </div>
</div>

<!-- إضافة الجافاسكربت لتفعيل النافذة المنبثقة -->
<script>
  $('#myModal').modal('show');  // لفتح النافذة برمجيًا
</script>

شرح الكود:

  • يتم استخدام data-toggle=”modal” و data-target=”#myModal” لفتح النافذة المنبثقة عند الضغط على الزر.
  • يتم تحديد id للنافذة المنبثقة ليكون myModal.
  • باستخدام JavaScript، يمكن فتح النافذة المنبثقة باستخدام الكود $('#myModal').modal('show');.

3. تفعيل التلميحات (Tooltips) باستخدام JavaScript

تعتبر التلميحات (Tooltips) إحدى المكونات التفاعلية في Bootstrap، التي تعرض نصًا إضافيًا عند تمرير الماوس فوق عنصر معين. لتفعيل التلميحات باستخدام JavaScript، نستخدم الـ Tooltip API.

مثال على تفعيل التلميحات باستخدام JavaScript:

<!-- عنصر مع Tooltip -->
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="نص التلميح هنا">
  مرر الماوس هنا
</button>

<!-- إضافة الجافاسكربت لتفعيل التلميح -->
<script>
  // تفعيل التلميح عندما يكون العنصر جاهزًا
  $(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip();  // تفعيل التلميحات لجميع العناصر
  });
</script>

شرح الكود:

  • يتم استخدام data-toggle=”tooltip” لتمكين التلميح عند مرور الماوس.
  • title يحتوي على نص التلميح.
  • باستخدام JavaScript، نقوم بتفعيل التلميح باستخدام $(document).ready(function() { $('[data-toggle="tooltip"]').tooltip(); });.

4. تفعيل القوائم المنسدلة (Dropdowns) باستخدام JavaScript

القوائم المنسدلة (Dropdowns) هي مكونات تتيح للمستخدمين الوصول إلى خيارات متعددة عند الضغط على زر أو عنصر آخر. لتفعيل القائمة المنسدلة باستخدام JavaScript، نستخدم الـ Dropdown API.

مثال على تفعيل القائمة المنسدلة باستخدام JavaScript:

<!-- زر القوائم المنسدلة -->
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  قائمة منسدلة
</button>

<!-- قائمة منسدلة -->
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <a class="dropdown-item" href="#">الخيار الأول</a>
  <a class="dropdown-item" href="#">الخيار الثاني</a>
  <a class="dropdown-item" href="#">الخيار الثالث</a>
</div>

<!-- إضافة الجافاسكربت لتفعيل القائمة المنسدلة -->
<script>
  $('#dropdownMenuButton').dropdown();  // لفتح القائمة برمجيًا
</script>

شرح الكود:

  • يتم استخدام data-toggle=”dropdown” لجعل العنصر يقوم بفتح القائمة المنسدلة.
  • باستخدام JavaScript، يمكن فتح القائمة المنسدلة برمجيًا باستخدام $('#dropdownMenuButton').dropdown();.

5. تفعيل الـ Collapse باستخدام JavaScript

الـ Collapse هي خاصية في Bootstrap تتيح لك إنشاء عناصر قابلة للانهيار والتوسيع، مثل الأزرار أو القوائم القابلة للطي.

مثال على تفعيل Collapse باستخدام JavaScript:

<!-- زر لفتح/إغلاق المحتوى القابل للانهيار -->
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  افتح/أغلق المحتوى
</button>

<!-- المحتوى القابل للانهيار -->
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    هذا هو المحتوى القابل للانهيار.
  </div>
</div>

<!-- إضافة الجافاسكربت لتفعيل Collapse -->
<script>
  $('#collapseExample').collapse('toggle');  // لتبديل حالة الانهيار
</script>

شرح الكود:

  • يتم استخدام data-toggle=”collapse” و data-target=”#collapseExample” لتمكين خاصية الانهيار والتوسيع.
  • باستخدام JavaScript، يمكنك تبديل حالة الانهيار باستخدام $('#collapseExample').collapse('toggle');.

الخاتمة

دمج Bootstrap مع JavaScript يوفر لك إمكانيات واسعة لتحسين التفاعل داخل صفحات الويب. من خلال استخدام مكونات مثل النوافذ المنبثقة (Modals)، التلميحات (Tooltips)، القوائم المنسدلة (Dropdowns)، و Collapse، يمكنك تحسين تجربة المستخدم بشكل كبير. بالإضافة إلى ذلك، باستخدام JavaScript، يمكنك التحكم في هذه المكونات بشكل ديناميكي لتحقيق التفاعلات المطلوبة بشكل سلس.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Scroll to Top
Verified by MonsterInsights