Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

JS popover

ULASHISH

JS Popover (popover.js)

Popover plagini tooltiplarga o‘xshaydi: bu foydalanuvchi element ustiga bosganda paydo bo‘ladigan qalqib chiquvchi oyna. Farqi shundaki, popover ancha ko‘proq kontentni o‘z ichiga olishi mumkin.

Plagin bog‘liqligi: Popoverlar ishlashi uchun Bootstrap versiyangizga tooltip plagini (tooltip.js) qo‘shilgan bo‘lishi kerak.

Popoverlar bo‘yicha darslik uchun Bootstrap popover darsligimizni o‘qing.

data-* atributlari orqali

data-toggle="popover" popoverni faollashtiradi.

title atributi popover sarlavhasi matnini belgilaydi.

data-content atributi popover tanasi (body) ichida ko‘rsatiladigan matnni belgilaydi.

Misol

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
O‘zingiz sinab ko‘ring »

JavaScript orqali

Popoverlar faqat CSS’dan iborat plaginlar emas, shuning uchun ular jQuery yordamida ishga tushirilishi (initialize) kerak: kerakli elementni tanlang va popover() metodini chaqiring.

Misol

// Select all elements with data-toggle="popover" in the document $('[data-toggle="popover"]').popover(); // Select a specified element $('#myPopover').popover();
O‘zingiz sinab ko‘ring »

Popover parametrlari

Parametrlarni data atributlari yoki JavaScript orqali uzatish mumkin. Data atributlari uchun parametr nomini data- ga qo‘shing, masalan: data-placement="".

Nomi Tipi Default Tavsif Sinab ko‘ring
animation boolean true

Popoverni ochish va yopishda CSS fade o‘tish (transition) effektini qo‘shish kerakligini belgilaydi

  • true - asta-sekin yo‘qolish (fade) effektini qo‘shish
  • false - asta-sekin yo‘qolish (fade) effektini qo‘shmaslik
 Sinab ko‘ring
container string yoki boolean false false Popoverni muayyan elementga qo‘shadi.
Misol: container: 'body'		 Sinab ko‘ring
content string "" Popover tanasi (body) ichidagi matnni belgilaydi Sinab ko‘ring
delay number yoki object 0 Popoverni ochish va yopish uchun necha millisekund ketishini belgilaydi.

Ochish uchun bitta, yopish uchun esa boshqa kechikishni belgilash uchun obyekt tuzilmasidan foydalaning:

delay: {show: 500, hide: 100} - bunda popoverni ochish uchun 500 ms, yopish uchun esa atigi 100 ms ketadi		 Sinab ko‘ring
html boolean  false Popoverda HTML teglarini qabul qilish kerakligini belgilaydi:
 
  • true - HTML teglarini qabul qilish
  • false - HTML teglarini qabul qilmaslik
Eslatma: HTML title atributiga (yoki title parametri orqali) kiritilishi kerak.

Qiymat false (standart) bo‘lganda jQuery’ning text() metodi ishlatiladi. Agar XSS hujumlaridan xavotirda bo‘lsangiz, shu qiymatdan foydalaning		 Sinab ko‘ring
placement string "right" Popover joylashuvini belgilaydi. Mumkin bo‘lgan qiymatlar:

  • "top" - Popover yuqorida
  • "bottom" - Popover pastda
  • "left" - Popover chapda
  • "right" - Popover o‘ngda
  • "auto" - Popover joylashuvini brauzerning o‘zi hal qiladi. Masalan, qiymat "auto left" bo‘lsa, popover imkon qadar chap tomonda, aks holda o‘ng tomonda ko‘rsatiladi. Qiymat "auto bottom" bo‘lsa, popover imkon qadar pastda, aks holda yuqorida ko‘rsatiladi
 Sinab ko‘ring
selector string yoki boolean false false Popoverni belgilangan selektorga qo‘shadi Sinab ko‘ring
template string   Popoverni yaratishda ishlatiladigan asosiy HTML.

Popover sarlavhasi .popover-title ichiga joylanadi.

Popover kontenti .popover-content ichiga joylanadi.

.arrow popover strelkasiga aylanadi.

Eng tashqi o‘rovchi element .popover klassiga ega bo‘lishi kerak.
title string "" Popover sarlavhasi matnini belgilaydi Sinab ko‘ring
trigger string "click" Popover qanday ishga tushirilishini belgilaydi. Mumkin bo‘lgan qiymatlar:

  • "click" - Popoverni bosish orqali ishga tushirish
  • "hover" - Popoverni sichqoncha ustiga olib borilganda ishga tushirish
  • "focus" - Popoverni element fokus olganda ishga tushirish (masalan, Tab tugmasi yoki bosish orqali)
  • "manual" - Popoverni qo‘lda ishga tushirish
Maslahat: Bir nechta qiymat uzatish uchun ularni bo‘sh joy bilan ajrating		 Sinab ko‘ring
viewport string yoki object {selector: "body", padding: 0} Popoverni ushbu element chegaralari ichida saqlaydi.

Misol: viewport: '#viewport' yoki {selector: '#viewport', padding: 0}

Popover metodlari

Quyidagi jadvalda barcha mavjud popover metodlari keltirilgan.

Metod Tavsif Sinab ko‘ring
.popover(options) Popoverni parametr bilan faollashtiradi. Yaroqli qiymatlar uchun yuqoridagi parametrlarga qarang Sinab ko‘ring
.popover("show") Popoverni ko‘rsatadi Sinab ko‘ring
.popover("hide") Popoverni yashiradi Sinab ko‘ring
.popover("toggle") Popoverni ko‘rsatadi yoki yashiradi (toggle) Sinab ko‘ring
.popover("destroy") Popoverni yashiradi va yo‘q qiladi Sinab ko‘ring

Popover hodisalari

Quyidagi jadvalda barcha mavjud popover hodisalari keltirilgan.

Hodisa Tavsif Sinab ko‘ring
show.bs.popover Popover ko‘rsatilish arafasida bo‘lganda sodir bo‘ladi Sinab ko‘ring
shown.bs.popover Popover to‘liq ko‘rsatilganda sodir bo‘ladi (CSS o‘tishlari (transitions) tugagandan keyin) Sinab ko‘ring
hide.bs.popover Popover yashirilish arafasida bo‘lganda sodir bo‘ladi Sinab ko‘ring
hidden.bs.popover Popover to‘liq yashirilganda sodir bo‘ladi (CSS o‘tishlari (transitions) tugagandan keyin) Sinab ko‘ring

Ko‘proq misollar

Popoverning maxsus dizayni

Popover ko‘rinishini moslashtirish uchun CSS’dan foydalaning:

Misol

 /* 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; }
O‘zingiz sinab ko‘ring »

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish