Bootstrap - Popover Eklentisi

Açılır bilgi penceresi araç ipucuna benzer ve bir başlık ile birlikte genişletilmiş bir görünüm sunar. Açılır bilgi penceresinin etkinleştirilmesi için, kullanıcının imleci öğenin üzerine getirmesi yeterlidir. Açılır bilgi penceresinin içeriği tamamen Bootstrap Data API kullanılarak doldurulabilir. Bu yöntem bir araç ipucu gerektirir.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, popover.jsve araç ipucu eklentisine bağımlıdır . Aksi takdirde, Bootstrap Eklentilerine Genel Bakış bölümünde belirtildiği gibi , bootstrap.js veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

Kullanım

Açılır bilgi eklentisi isteğe bağlı olarak içerik ve biçimlendirme oluşturur ve varsayılan olarak açılır pencereyi tetikleyici öğesinin arkasına yerleştirir. Açılır bilgi penceresini aşağıdaki iki şekilde ekleyebilirsiniz -

  • Via data attributes - Açılır bilgi penceresi eklemek için ekleyin data-toggle = "popover"bir çapa / düğme etiketine. Bağlantının başlığı, açılır pencerenin metni olacaktır. Varsayılan olarak, açılır bilgi eklentisi tarafından en üste ayarlanır.

<a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>
  • Via JavaScript - Aşağıdaki sözdizimini kullanarak JavaScript aracılığıyla popover'ları etkinleştirin -

$('#identifier').popover(options)

Açılır pencere eklentisi, önceki bölümlerde tartışılan açılır menü veya diğer eklentiler gibi yalnızca css eklentileri DEĞİLDİR. Bu eklentiyi kullanmak için onu jquery kullanarak etkinleştirmelisiniz (javascript okuyun). Sayfanızdaki tüm açılır pencereleri etkinleştirmek için sadece bu komut dosyasını kullanın -

$(function () { $("[data-toggle = 'popover']").popover(); });

Misal

Aşağıdaki örnek, veri öznitelikleri aracılığıyla popover eklentisinin kullanımını gösterir.

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover on left">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover on top">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover on bottom">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "right" 
      data-content = "Some content in Popover on right">
      
      Popover on right
   </button>
   
</div>

<script>
   $(function (){
      $("[data-toggle = 'popover']").popover();
   });
</script>

Seçenekler

Bootstrap Data API aracılığıyla eklenebilecek veya JavaScript aracılığıyla çağrılabilecek belirli seçenekler vardır. Aşağıdaki tablo seçenekleri listeler -

Seçenek Adı Tür / Varsayılan Değer Veri özelliği adı Açıklama
animasyon boolean Varsayılanı - doğru veri animasyonu Açılır pencereye bir CSS solma geçişi uygular.
html boolean Varsayılanı - yanlış data-html Açılır bilgi penceresine HTML ekler. Yanlışsa, jQuery'nin metin yöntemi etki alanına içerik eklemek için kullanılacaktır. XSS saldırıları konusunda endişeliyseniz metin kullanın.
yerleştirme string | function Default - üst veri yerleştirme Açılır bilgi penceresinin nasıl konumlandırılacağını belirtir (yani, üst | alt | sol | sağ | otomatik). Ne zaman otomatik belirtilmişse, dinamik popover reorient edecektir. Örneğin, yerleşim "otomatik sol" ise, açılır bilgi penceresi mümkün olduğunda solda görüntülenir, aksi takdirde sağda görüntülenir.
seçici string Default - yanlış veri seçici Bir seçici sağlanırsa, açılır pencere nesneleri belirtilen hedeflere delege edilecektir.
Başlık string | işlev Varsayılanı - " veri başlığı Başlık seçeneği, başlık özelliği yoksa varsayılan başlık değeridir .
tetiklemek string Varsayılan - 'vurgulu odak' veri tetikleyici Açılır bilgi penceresinin nasıl tetiklendiğini tanımlar - click| hover | focus | manual. Birden çok tetikleyici geçebilirsiniz; onları bir boşlukla ayırın.
gecikme numara | nesne Varsayılanı - 0 veri gecikmesi

Açılır bilgi penceresini ms cinsinden gösterme ve gizleme gecikmeleri - manuel tetik türü için geçerli değildir. Bir numara verilirse, hem gizleme hem de gösterme için gecikme uygulanır. Nesne yapısı -

delay: { show: 500, hide: 100 }
konteyner string | false Varsayılan - yanlış veri kabı Açılır bilgi penceresini belirli bir öğeye ekler. Örnek: container: 'body'

Yöntemler

Aşağıdakiler, popover için bazı yararlı yöntemlerdir -

Yöntem Açıklama Misal

Options - .popover (seçenekler)

Bir öğe koleksiyonuna bir açılır bilgi işleyicisi ekler.
$().popover(options)

Toggle - .popover ('geçiş')

Bir öğenin açılır penceresini açar / kapatır.
$('#element').popover('toggle')

Show - .popover ('göster')

Bir öğenin açılır penceresini gösterir.
$('#element').popover('show')

Hide - .popover ('gizle')

Bir öğenin açılır penceresini gizler.
$('#element').popover('hide')

Destroy - .popover ('yok et')

Bir elemanın popover'ını gizler ve yok eder.
$('#element').popover('destroy')

Misal

Aşağıdaki örnek, popover eklenti yöntemlerini göstermektedir -

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default popover-show" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary popover-hide" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-hide method">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success popover-destroy" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover-destroy method">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning popover-toggle" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-toggle method">
      
      Popover on right
   </button>
	
   <br><br><br><br><br><br>
   
   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning" 
         title = "<h2>Title</h2>" data-container = "body" 
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</h4>">
         
         Popover
      </a>
   </p>
   
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
   </script>
	
</div>

Etkinlikler

Aşağıdaki tablo, açılır pencere eklentisiyle çalışacak olayları listeler. Bu olay, işleve bağlanmak için kullanılabilir.

Etkinlik Açıklama Misal
show.bs.popover Bu olay, gösteri örneği yöntemi çağrıldığında hemen tetiklenir.
$('#mypopover').on('show.bs.popover', function () {
   // do something
})
gösterilen.bs.popover Bu olay, açılır pencere kullanıcı tarafından görünür hale getirildiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler).
$('#mypopover').on('shown.bs.popover', function () {
   // do something
})
hide.bs.popover Bu olay, hide örneği yöntemi çağrıldığında hemen tetiklenir.
$('#mypopover').on('hide.bs.popover', function () {
   // do something
})
hidden.bs.popover Bu olay, açılır bilgi penceresinin kullanıcıdan gizlenmesi tamamlandığında tetiklenir (CSS geçişlerinin tamamlanmasını bekler).
$('#mypopover').on('hidden.bs.popover', function () {
   // do something
})

Misal

Aşağıdaki örnek Popover eklenti olaylarını gösterir -

<div clas = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-primary popover-show" 
      title = "Popover title" data-container = "body" data-toggle = "popover" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
</div>

<script>
   $(function () { $('.popover-show').popover('show');});
   
   $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("Alert message on show");
   })});
</script>