En son web geliştirme öğreticiler
 

Bootstrap JS Popover

❮ Önceki Sonraki Referans ❯

JS Popover (popover.js)

Popover eklenti ipuçları için benzer olduğu; kullanıcının bir eleman tıkladığında görünen bir pop-up kutusu. Fark olmasıdır popover çok fazla içerik içerebilir.

Eklenti bağımlılık: Popovers ipucu eklentisi gerekir (tooltip.js) sürümü dahil edilecek Bootstrap .

Ilişkin bir eğitim için Popovers , bizim okumak Bootstrap Popover Eğitimi .

Via data-* Özellikler

data-toggle="popover" aktive popover .

title niteliği başlık metnini belirtir popover .

data-content nitelik içinde görüntülenecek yazısını belirler popover's vücudunda.

Örnek

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Kendin dene "

JavaScript aracılığıyla

Popovers CSS salt eklentileri değildir ve bu nedenle jQuery ile ilklendirilmelidir: Belirtilen elemanı seçmek ve çağrı popover() yöntemini.

Örnek

// Select all elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();

// Select a specified element
$('#myPopover').popover();
Kendin dene "

Popover Seçenekleri

Seçenekler Veri özellikleri veya JavaScript aracılığıyla geçirilebilir. Veri özelliklerini için seçeneği adını ekler data- olduğu gibi data-placement="" .

isim tip Varsayılan Açıklama Dene
animationbooleantrue

Açılış ve kapanış sırasında CSS solma geçiş efekti ekleme belirtir popover

  • Gerçek - Bir solma efekti ekleyin
  • Yanlış - Bir solma efekti ekleme
Dene
containerstring, or the boolean falsefalse Ekler popover belirli elemana.
Örnek: kap: 'body' 		Dene
contentstring"" Içindeki metni belirtir popover's body Dene
delaynumber, or object0 O açmak ve kapatmak için alacağı milisaniye sayısını belirtir popover .

açılması için bir gecikme ve kapanması için bir tane, belirlemek için nesne yapısını kullanmak:

delay: {show: 500, hide: 100} - açmak için 500 ms sürer popover , fakat sadece 100 ms kapatmak için 		Dene
htmlbooleanfalse HTML etiketlerini kabul edilip edilmeyeceğini belirtir popover :
  • true HTML etiketleri Kabul -
  • false - HTML etiketlerini kabul etmeyin
Not: HTML takılmalıdır title özniteliği (veya başlık seçeneğini kullanarak).

False olarak ayarlandığında (default) , jQuery'nin text() metodu kullanılır. Eğer XSS saldırıları endişe eğer bunu kullanın 		Dene
placementstring"right" Belirtir popover konumunu. Olası değerler:

  • "top" - Popover üstte
  • "bottom" - Popover altta
  • "left" - Popover soldaki
  • "right" - Popover sağda
  • "auto" - Tarayıcı pozisyonunu karar Lets popover . Değeri ise Örneğin, "auto left" , popover aksi sağda, mümkün olduğunda sol tarafta görüntülenir. Değeri ise "auto bottom" , popover üstünde, aksi takdirde mümkün olduğunda altta görüntüler
Dene
selectorstring, or the boolean falsefalse Ekler popover belirtilen bir seçicinin Dene
templatestring  popover oluştururken Taban HTML kullanmak.

popover's başlık .popover-başlığın içine enjekte edilecektir.

popover's içerik .popover-içerik enjekte edilecektir.

.arrow olacak popover's ok.

En dış ambalaj elemanı olmalıdır .popover sınıfı.
titlestring"" Başlık metnini belirtir popover Dene
triggerstring"click" Nasıl belirtir popover tetiklenir. Olası değerler:

  • "click" - Tetik popover bir tıklama ile
  • "hover" - Tetik popover vurgulu üzerinde
  • "focus" - Tetik popover o (sekme veya .eg tıklayarak) odağı aldığında
  • "manual" - Trigger popover elle
İpucu: Birden çok değer geçirmek boşluk ile onları ayırmak için 		Dene
viewportstring, or object{selector: "body" , padding: 0} Tutar popover bu elemanın sınırları içinde.

Örnek: viewport: '#viewport' ya {selector: '#viewport', padding: 0}

Popover Yöntemleri

Aşağıdaki tabloda mevcut tüm listeler popover yöntemleri.

Yöntem Açıklama Dene
. popover( options ) bir seçenek popover etkinleştirir. Geçerli değerler için yukarıdaki seçeneklere bakın Dene
. popover("show") gösterir popover Dene
. popover("hide") gizler popover Dene
. popover("toggle") popover açar Dene
. popover("destroy") Gizler ve popover yok eder Dene

Popover Olaylar

Aşağıdaki tabloda mevcut tüm listeler popover olayları.

Olay Açıklama Dene
show.bs.popover Oluşur popover gösterildiği üzere olan Dene
shown.bs.popover Oluşur popover tamamen gösterilmiştir (CSS geçişleri tamamladıktan sonra) Dene
hide.bs.popover Oluşur popover gizli üzeredir Dene
hidden.bs.popover Oluşur popover tamamen gizlidir (CSS geçişleri tamamladıktan sonra) Dene
Örnekler

Örnekler

Özel Popover Tasarım

Görünümünü özelleştirmek için CSS kullanma popover :

Örnek

 /* Popover */
.popover {
    border: 2px dotted red;
}

/* Popover Header */
.popover-title {
    background-color: #73AD21;
    color: #FFFFFF;
    font-size: 28px;
    text-align:center;
}

/* Popover Body */
.popover-content {
    background-color: coral;
    color: #FFFFFF;
    padding: 25px;
}

/* Popover Arrow */
.arrow {
    border-right-color: red !important;
}
Kendin dene "

❮ Önceki Sonraki Referans ❯