En son web geliştirme öğreticiler
 

Bootstrap JS Açılır


JS Dropdown (dropdown.js)

Bir açılır menü kullanıcı önceden tanımlanmış listeden bir değer seçmenizi sağlayan bir toggleable menüsüdür.

DROPDOWNS hakkında bir eğitim için bizim okumak Bootstrap DROPDOWNS Eğitimi .


Açılır Eklenti Sınıflar

Sınıf Açıklama Örnek
.dropdown bir açılır menü gösterir Dene
.dropdown-menu Açılır menüyü oluşturur Dene
.dropdown-menu-right bir açılır menü Sağ hizalar Dene
.dropdown-header Açılan menüden içine kafayla ekler Dene
.dropup Bir dropup menüsünü gösterir Dene
.disabled Açılan menüden bir öğeyi devre dışı bırakır Dene
.divider yatay bir çizgi ile açılır menüden içindeki öğeleri ayırır Dene

Via data-* Özellikler

Ekle data-toggle="dropdown" bir bağlantı veya bir açılır menü geçiş yapmak için bir düğmeye.

Örnek

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Example</a>
Kendin dene "

JavaScript aracılığıyla

el ile etkinleştirme:

Örnek

$('.dropdown-toggle').dropdown();
Kendin dene "

Not: data-toggle="dropdown" nitelik bakılmaksızın diyoruz bakılmaksızın gerekli olan dropdown() yöntemi.


Açılır Seçenekler

Yok

Açılır Yöntemler

Aşağıdaki tabloda tüm kullanılabilir açılır yöntemlerini listeler.

Yöntem Açıklama Dene
. dropdown("toggle") açılan açar Dene

Açılır Olaylar

Aşağıdaki tabloda tüm kullanılabilir açılır olaylarını listeler.

Olay Açıklama Dene
show.bs.dropdown açılan gösterildiği üzere olan oluşur. Dene
shown.bs.dropdown Açılan tamamen gösterildiğinde gerçekleşir (after CSS transitions have completed) Dene
hide.bs.dropdown Açılan gizli üzeredir oluşur Dene
hidden.bs.dropdown Açılan tamamen gizlidir oluşur (after CSS transitions have completed) Dene

İpucu: jQuery'nin kullanın event.relatedTarget açılan tetikleyen elemanı almak için:

Örnek

$(".dropdown").on("show.bs.dropdown", function(event){
    var x = $(event.relatedTarget).text(); // Get the text of the element
    alert(x);
});
Kendin dene "

Örnekler

Örnekler

başaşağı için şapka simgesini değiştirme

açılır tıklandığında Aşağıdaki örnek yukarı aşağı doğru işaret dan şapka simgesini değiştirir:

Örnek

/* 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>
Kendin dene "

Navbar'ın ile Açılır

Aşağıdaki örnek gezinme çubuğunda bir düğme için bir açılır menü ekler:

Örnek

<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>
Kendin dene "

Aşağıdaki örnek gezinme çubuğu üzerinde bir giriş formuna içeren bir açılır menü ekler:

Örnek

<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>
Kendin dene "

Multi-Level DROPDOWNS

Bu örnekte, tıklamada çok seviyeli açılır listesini açmak için jQuery kullanın:

Örnek

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>
Kendin dene "

Bu örnekte, özel oluşturduk .dropdown-submenu çok düzeyli açılır menülerini için sınıf:

Örnek

 /* 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>
Kendin dene "