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>