أحدث البرامج التعليمية وتطوير الشبكة
 

Bootstrap شبيبة منسدلة

❮ السابق التالي المرجعي ❯

JS Dropdown (dropdown.js)

هناك قائمة منسدلة هي القائمة و toggleable التي تسمح للمستخدم لاختيار قيمة واحدة من قائمة محددة مسبقا.

لتعليمي حول DROPDOWNS، اقرأ Bootstrap DROPDOWNS التعليمي .

فئات منسدلة المساعد

صف مدرسي وصف مثال
.dropdown يشير إلى القائمة المنسدلة جربها
.dropdown-menu يبني القائمة المنسدلة جربها
.dropdown-menu-right بزر الماوس الأيمن تؤيد القائمة المنسدلة جربها
.dropdown-header ويضيف رأس داخل القائمة المنسدلة جربها
.dropup يشير إلى القائمة dropup جربها
.disabled تعطيل عنصر في القائمة المنسدلة جربها
.divider يفصل العناصر داخل القائمة المنسدلة مع خط أفقي جربها

عبر data-* سمات

إضافة data-toggle="dropdown" إلى ارتباط أو زر للتبديل القائمة المنسدلة.

مثال

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Example</a>
انها محاولة لنفسك »

عن طريق جافا سكريبت

تمكين يدويا مع:

مثال

$('.dropdown-toggle').dropdown();
انها محاولة لنفسك »

ملاحظة: data-toggle="dropdown" مطلوب السمة بغض النظر عن ما إذا كنت استدعاء dropdown() الأسلوب.

خيارات منسدلة

None

طرق المنسدلة

يسرد الجدول التالي أساليب المنسدلة كل ما هو متاح.

طريقة وصف جربها
.dropdown("toggle") تبديل القائمة المنسدلة جربها

أحداث المنسدلة

يسرد الجدول التالي الأحداث المنسدلة كل ما هو متاح.

حدث وصف جربها
show.bs.dropdown يحدث عندما القائمة المنسدلة على وشك أن تظهر. جربها
shown.bs.dropdown يحدث عندما يتم عرض القائمة المنسدلة بالكامل (بعد الانتهاء التحولات CSS) جربها
hide.bs.dropdown يحدث عندما القائمة المنسدلة على وشك أن تكون مخفية جربها
hidden.bs.dropdown يحدث عندما يتم إخفاء القائمة المنسدلة بالكامل (بعد الانتهاء التحولات CSS) جربها

نصيحة: استخدم مسج ل event.relatedTarget للحصول على العنصر الذي تسبب في القائمة المنسدلة:

مثال

$(".dropdown").on("show.bs.dropdown", function(event){
    var x = $(event.relatedTarget).text(); // Get the text of the element
    alert(x);
});
انها محاولة لنفسك »
أمثلة

أمثلة

تغيير رمز الإقحام لرأسا على عقب

يغير المثال التالي رمز الإقحام من لافتا إلى أسفل إلى أعلى عند النقر على القائمة المنسدلة:

مثال

/* CSS: */
<style>
.caret.caret-up {
    border-top-width: 0;
    border-bottom: 4px solid #fff;
}
</style>

/* JS: */
<script>
$(document).ready(function(){
  $(".dropdown").on("hide.bs.dropdown", function(){
    $(".btn").html('Dropdown <span class="caret"></span>');
  });
  $(".dropdown").on("show.bs.dropdown", function(){
    $(".btn").html('Dropdown <span class="caret caret-up"></span>');
  });
});
</script>
انها محاولة لنفسك »

نافبار مع منسدلة

يضيف المثال التالي القائمة المنسدلة لزر في شريط التنقل:

مثال

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>
انها محاولة لنفسك »

يضيف المثال التالي قائمة منسدلة تحتوي على نموذج تسجيل دخول في نافبار:

مثال

<ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span class="glyphicon glyphicon-log-in"></span></a>
    <div class="dropdown-menu">
      <form id="formlogin" class="form container-fluid">
        <div class="form-group">
          <label for="usr">Name:</label>
          <input type="text" class="form-control" id="usr">
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd">
        </div>
          <button type="button" id="btnLogin" class="btn btn-block">Login</button>
      </form>
      <div class="container-fluid">
        <a class="small" href="#">Forgot password?</a>
      </div>
    </div>
  </li>
</ul>
انها محاولة لنفسك »

DROPDOWNS متعدد المستويات

في هذا المثال، ونحن نستخدم مسج لفتح القوائم المنسدلة متعددة المستويات على فوق:

مثال

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>
انها محاولة لنفسك »

في هذا المثال، قمنا بإنشاء مخصصة .dropdown-submenu فئة القوائم المنسدلة متعددة المستويات:

مثال

 /* CSS: */
<style>
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
</style>

/* JS: */
<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>
انها محاولة لنفسك »

❮ السابق التالي المرجعي ❯