Popovers

Dukumeenti iyo tusaaleyaal lagu daro Bootstrap popovers, sida kuwa laga helo iOS, shay kasta oo ku yaal boggaaga.

Dulmar

Waxyaabaha ay tahay in la ogaado marka la isticmaalayo popover plugin:

• Popovers waxay ku tiirsan yihiin maktabadda xisbiga 3aad ee Popper meelaynta. Waa inaad ku dartaa popper.min.js ka hor bootstrap.js ama isticmaal bootstrap.bundle.min.js/ bootstrap.bundle.jska kooban Popper si ay popovers u shaqeeyaan!
• Popovers waxay u baahan yihiin plugin tip -ku-tiirsanaan ahaan.
• Haddii aad JavaScript-kayaga ka dhisayso isha, waxay u baahan tahayutil.js .
• Popovers waxay u soo galeen sababo waxqabad dartood, marka waa inaad adigu bilawdaa .
• Dhererka eber titleiyo contentqiyamku weligood ma muujin doonaan popover.
• Qeex container: 'body'si aad uga fogaato soo jeedinta dhibaatooyinka qaybo badan oo kakan (sida kooxahayada wax gelinta, kooxaha badhanka, iwm).
• Kicinta popovers ee walxaha qarsoon ma shaqayn doono.
• Popovers .disabledama disabledcuriyayaasha waa in lagu kiciyo curiyaha duubka ah.
• Marka uu ka kiciyo barroosinno isku duuban dhowr xariiq, popovers waxay dhexda u ahaan doonaan ballaca guud ee barroosinnada. Isticmaal s si .text-nowrapaad <a>uga fogaato dhaqankan.
• Rabshadaha waa in la qariyaa ka hor inta aan laga saarin walxaha u dhigma ee DOM.
• Popovers waa la kicin karaa iyada oo ay ugu wacan tahay shay ku jira hadhka DOM.

Sii wad akhri si aad u aragto sida popovers ula shaqeeyaan tusaalooyinka qaarkood.

Tusaale: Dari popovers meel kasta

Hal dariiqo oo lagu bilaabi karo dhammaan popovers bogga waxay noqon kartaa in lagu xusho data-togglesifadooda:

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

Tusaale: Isticmaalka containerikhtiyaarka

Markaad haysatid qaabab qaar oo ah walxaha waalidka ee farageliya popover, waxaad u baahan doontaa inaad qeexdo caado containersi HTML popover's uu uga dhex muuqdo qaybtaas.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Tusaale

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Afar jiho

Afar doorasho ayaa diyaar ah: sare, midig, hoose, iyo bidix oo toosan.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  Popover on left
</button>

Ka saar marka xigta guji

Isticmaal focuskiciyeyaasha si aad u tirtirto popovers ee isticmaalaha gujinta xigta ee shay ka duwan curiyaha beddelka.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

$('.popover-dismiss').popover({
  trigger: 'focus'
})

Curiyayaasha naafada

Qaybaha sifada leh disabledma aha kuwo is dhexgal ah, taasoo la micno ah in isticmaalayaashu aanay kor u qaadi karin ama aanay gujin karin si ay u kiciyaan popover (ama qalab). Xakameyn ahaan, waxaad u baahan doontaa inaad ka kiciso popover ka duubka <div>ama <span>oo aad ka gudubto pointer-eventsqaybta naafada ah.

Kiciyeyaasha popover naafada, waxa kale oo aad doorbidi kartaa data-trigger="hover"si popover-ku ugu muuqdo jawaab celin muuqaal degdeg ah isticmaalayaashaada maadaama laga yaabo in aanay filanayn inay gujiyaan shay naafada ah.

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Isticmaalka

U oggolow popovers iyada oo loo marayo JavaScript:

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

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-animation="".

Hababka

$().popover(options)

Wuxuu u bilaabaa popovers ururinta curiyaha.

.popover('show')

Waxay daaha ka qaadaysaa soo boodada curiyaha Ku soo noqoshada soo wacaha ka hor inta aan si dhab ah loo muujin popover (tusaale ka hor intaanay shown.bs.popoverdhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta popover. Popovers oo cinwaankoodu iyo nuxurkooduba yahay eber-dheer weligood lama soo bandhigin.

$('#element').popover('show')

.popover('hide')

Wuxuu qariyaa boodboodka curiyaha. Ku soo noqoshada soo wacaha ka hor inta aan bood-boodka dhab ahaantii la qarin (ie ka hor intaanay hidden.bs.popoverdhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta popover.

$('#element').popover('hide')

.popover('toggle')

Beddelaa soo boodada curiyaha Ku soo noqda qofka soo wacaya ka hor inta aan bood-boodka dhab ahaantii la muujin ama la qarin (tusaale ka hor inta aanay dhacdada shown.bs.popoverama hidden.bs.popoverdhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta popover.

$('#element').popover('toggle')

.popover('dispose')

Qariyaa oo baabi'iyaa popover element. Popovers isticmaala ergada (kuwaas oo la abuuray iyadoo la isticmaalayo ikhtiyaarka selector) si gaar ah looma baabi'in karo walxaha kiciya faraca.

$('#element').popover('dispose')

.popover('enable')

Siinaya popover element awood lagu muujiyo. Popovers waa la dajiyay si toos ah.

$('#element').popover('enable')

.popover('disable')

Waxay meesha ka saartaa awoodda soo-bandhigidda curiyaha si loo muujiyo. Booqashada ayaa la tusi karaa oo keliya haddii dib loo hawlgeliyo.

$('#element').popover('disable')

.popover('toggleEnabled')

Waxay beddeshaa awoodda boodboodka curiyaha si loo muujiyo ama loo qariyo.

$('#element').popover('toggleEnabled')

.popover('update')

Waxay cusboonaysiisaa booska boodboodka curiyaha.

$('#element').popover('update')

Dhacdooyinka

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})