tutorial pengembangan web terbaru
 

Bootstrap JS Popover

❮ Sebelumnya Berikutnya Referensi ❯

JS Popover (popover.js)

The Popover Plugin ini mirip dengan tooltips; itu adalah kotak pop-up yang muncul saat pengguna mengklik pada sebuah elemen. Perbedaannya adalah bahwa popover dapat berisi konten lebih.

Ketergantungan Plugin: Popovers membutuhkan tooltip Plugin (tooltip.js) untuk dimasukkan dalam versi Bootstrap .

Untuk tutorial tentang Popovers , baca Bootstrap Popover Tutorial .

Via data-* Atribut

The data-toggle="popover" mengaktifkan popover .

The title atribut menentukan judul teks dari popover .

The data-content atribut menentukan teks yang harus ditampilkan dalam popover's tubuh.

Contoh

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

via JavaScript

Popovers tidak CSS-satunya plugin, dan karena itu harus diawali dengan jQuery: pilih elemen tertentu dan memanggil popover() metode.

Contoh

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

// Select a specified element
$('#myPopover').popover();
Cobalah sendiri "

Popover Pilihan

Pilihan bisa dilalui melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan untuk data- , seperti dalam data-placement="" .

Nama Mengetik kegagalan Deskripsi Cobalah
animationbooleantrue

Menentukan apakah untuk menambahkan efek transisi CSS memudar saat membuka dan menutup popover

  • benar - Tambahkan efek memudar
  • palsu - Jangan menambahkan efek memudar
Cobalah
containerstring, or the boolean falsefalse Membubuhkan popover untuk elemen tertentu.
Contoh: kontainer: 'body' 		Cobalah
contentstring"" Menentukan teks di dalam popover's body Cobalah
delaynumber, or object0 Menentukan jumlah milidetik yang diperlukan untuk membuka dan menutup popover .

Untuk menentukan penundaan untuk membuka dan satu lagi untuk penutupan, menggunakan struktur objek:

delay: {show: 500, hide: 100} - yang akan membawa 500 ms untuk membuka popover , tetapi hanya 100 ms untuk menutupnya 		Cobalah
htmlbooleanfalse Menentukan apakah menerima tag HTML di popover :
  • true - Terima tag HTML
  • false - Jangan menerima tag HTML
Catatan: HTML harus dimasukkan dalam atribut judul (atau menggunakan pilihan judul).

Bila diatur ke false (default), jQuery text() metode yang akan digunakan. Gunakan ini jika Anda khawatir tentang serangan XSS 		Cobalah
placementstring"right" Menentukan popover posisi. Kemungkinan nilai:

  • "top" - Popover di atas
  • "bottom" - Popover di bagian bawah
  • "left" - Popover di sebelah kiri
  • "right" - Popover di sebelah kanan
  • "auto" - Mari browser menentukan posisi popover . Misalnya, jika nilai "auto left" , yang popover akan ditampilkan pada sisi kiri bila mungkin, jika di sebelah kanan. Jika nilai "auto bottom" , yang popover akan ditampilkan di bagian bawah bila memungkinkan, jika tidak di atas
Cobalah
selectorstring, or the boolean falsefalse Menambahkan popover untuk pemilih yang ditentukan Cobalah
templatestring  HTML dasar untuk digunakan saat membuat popover.

The popover's judul akan disuntikkan ke dalam .popover-judul.

The popover's konten akan disuntikkan ke dalam .popover-konten.

.arrow akan menjadi popover's panah.

Unsur wrapper terluar harus memiliki .popover kelas.
titlestring"" Menentukan judul teks dari popover Cobalah
triggerstring"click" Menentukan bagaimana popover dipicu. Kemungkinan nilai:

  • "click" - Memicu popover dengan klik
  • "hover" - Memicu popover di hover
  • "focus" - Memicu popover ketika mendapat fokus (dengan memfokuskan atau mengklik .eg)
  • "manual" - Memicu popover manual
Tip: Untuk lulus beberapa nilai, pisahkan dengan spasi 		Cobalah
viewportstring, or object{selector: "body", padding: 0} Membuat popover dalam batas-batas elemen ini.

Contoh: viewport: '#viewport' atau {selector: '#viewport', padding: 0}

Popover Metode

Tabel berikut berisi semua tersedia popover metode.

metode Deskripsi Cobalah
.popover( options ) Mengaktifkan popover dengan opsi. Lihat pilihan di atas nilai-nilai yang valid Cobalah
.popover("show") Menunjukkan popover Cobalah
.popover("hide") Menyembunyikan popover Cobalah
.popover("toggle") Matikan popover Cobalah
.popover("destroy") Menyembunyikan dan menghancurkan popover Cobalah

Popover Acara

Tabel berikut berisi semua tersedia popover acara.

Peristiwa Deskripsi Cobalah
show.bs.popover Terjadi ketika popover akan segera ditampilkan Cobalah
shown.bs.popover Terjadi ketika popover sepenuhnya ditampilkan (setelah transisi CSS telah selesai) Cobalah
hide.bs.popover Terjadi ketika popover hendak disembunyikan Cobalah
hidden.bs.popover Terjadi ketika popover sepenuhnya tersembunyi (setelah transisi CSS telah selesai) Cobalah
contoh

contoh

Kustom Popover Desain

Gunakan CSS untuk menyesuaikan tampilan popover :

Contoh

 /* 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;
}
Cobalah sendiri "

❮ Sebelumnya Berikutnya Referensi ❯