Source

Popovers

உங்கள் தளத்தில் உள்ள எந்த உறுப்புக்கும் iOS இல் உள்ளதைப் போன்ற பூட்ஸ்டார்ப் பாப்ஓவர்களைச் சேர்ப்பதற்கான ஆவணங்கள் மற்றும் எடுத்துக்காட்டுகள்.

கண்ணோட்டம்

பாப்ஓவர் செருகுநிரலைப் பயன்படுத்தும் போது தெரிந்து கொள்ள வேண்டியவை:

  • Popovers 3வது தரப்பு லைப்ரரியான Popper.js ஐ பொசிஷனிங் செய்ய நம்பியுள்ளது. நீங்கள் bootstrap.js க்கு முன் popper.min.js ஐ சேர்க்க வேண்டும் அல்லது popovers வேலை செய்ய Popper.js ஐ கொண்டிருக்கும் bootstrap.bundle.min.js/ பயன்படுத்தவும்!bootstrap.bundle.js
  • Popovers டூல்டிப் சொருகி ஒரு சார்புநிலையாக தேவைப்படுகிறது.
  • நீங்கள் எங்கள் ஜாவாஸ்கிரிப்டை மூலத்திலிருந்து உருவாக்கினால், அதற்குutil.js .
  • செயல்திறன் காரணங்களுக்காக Popovers தேர்வு செய்யப்படுகின்றன, எனவே அவற்றை நீங்களே துவக்க வேண்டும் .
  • பூஜ்ஜிய நீளம் titleமற்றும் contentமதிப்புகள் ஒருபோதும் பாப்ஓவரைக் காட்டாது.
  • மிகவும் சிக்கலான கூறுகளில் (எங்கள் உள்ளீட்டு குழுக்கள், பொத்தான் குழுக்கள் போன்றவை) ரெண்டரிங் container: 'body'சிக்கல்களைத் தவிர்க்க குறிப்பிடவும்.
  • மறைக்கப்பட்ட கூறுகளில் பாப்ஓவர்களைத் தூண்டுவது வேலை செய்யாது.
  • ஒரு ரேப்பர் உறுப்பில் பாபோவர்ஸ் .disabledஅல்லது disabledஉறுப்புகள் தூண்டப்பட வேண்டும்.
  • பல கோடுகளில் மூடப்பட்டிருக்கும் ஆங்கர்களில் இருந்து தூண்டப்படும் போது, ​​பாப்ஓவர்கள் ஆங்கர்களின் ஒட்டுமொத்த அகலத்திற்கு இடையே மையப்படுத்தப்படும். இந்த நடத்தையைத் தவிர்க்க .text-nowrapஉங்கள் களில் பயன்படுத்தவும் .<a>
  • DOM இலிருந்து தொடர்புடைய உறுப்புகள் அகற்றப்படுவதற்கு முன், Popovers மறைக்கப்பட வேண்டும்.
  • நிழல் DOM இல் உள்ள ஒரு உறுப்புக்கு நன்றி செலுத்துவதன் மூலம் Popovers தூண்டப்படலாம்.

இந்தக் கூறுகளின் அனிமேஷன் விளைவு prefers-reduced-motionமீடியா வினவலைச் சார்ந்தது. எங்கள் அணுகல்தன்மை ஆவணத்தின் குறைக்கப்பட்ட இயக்கம் பகுதியைப் பார்க்கவும் .

சில எடுத்துக்காட்டுகளுடன் popovers எவ்வாறு செயல்படுகிறது என்பதைப் பார்க்க தொடர்ந்து படியுங்கள்.

எடுத்துக்காட்டு: எல்லா இடங்களிலும் பாப்ஓவர்களை இயக்கவும்

data-toggleஒரு பக்கத்தில் அனைத்து பாபோவர்களையும் துவக்குவதற்கான ஒரு வழி, அவற்றின் பண்புக்கூறு மூலம் அவற்றைத் தேர்ந்தெடுப்பதாகும் :

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

எடுத்துக்காட்டு: containerவிருப்பத்தைப் பயன்படுத்துதல்

பாப்ஓவரில் குறுக்கிடும் ஒரு பெற்றோர் உறுப்பில் சில ஸ்டைல்கள் இருந்தால், containerஅதற்குப் பதிலாக அந்த உறுப்பில் பாப்ஓவரின் HTML தோன்றும் வகையில் தனிப்பயன் ஒன்றைக் குறிப்பிட வேண்டும்.

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

உதாரணமாக

<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>

நான்கு திசைகள்

நான்கு விருப்பங்கள் உள்ளன: மேல், வலது, கீழ் மற்றும் இடது சீரமைக்கப்பட்டது.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

அடுத்த கிளிக்கில் நிராகரிக்கவும்

focusமாற்று உறுப்பைக் காட்டிலும் வேறொரு உறுப்பின் பயனரின் அடுத்த கிளிக்கில் பாப்ஓவர்களை நிராகரிக்க தூண்டுதலைப் பயன்படுத்தவும் .

அடுத்த கிளிக்கில் நிராகரிக்க குறிப்பிட்ட மார்க்அப் தேவை

சரியான குறுக்கு-உலாவி மற்றும் குறுக்கு-தளம் நடத்தைக்கு, நீங்கள் குறிச்சொல்லைப் பயன்படுத்த வேண்டும், <a>குறிச்சொல்லை அல்ல , <button>மேலும் நீங்கள் ஒரு tabindexபண்புக்கூறையும் சேர்க்க வேண்டும்.

நிராகரிக்கக்கூடிய பாப்ஓவர் 
<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'
})

முடக்கப்பட்ட கூறுகள்

பண்புக்கூறுடன் கூடிய கூறுகள் disabledஊடாடக்கூடியவை அல்ல, அதாவது பாப்ஓவரை (அல்லது டூல்டிப்) தூண்டுவதற்கு பயனர்கள் அவற்றை நகர்த்தவோ அல்லது கிளிக் செய்யவோ முடியாது. ஒரு தீர்வாக, நீங்கள் ஒரு ரேப்பரிலிருந்து பாப்ஓவரைத் தூண்ட வேண்டும் <div>அல்லது முடக்கப்பட்ட உறுப்பை <span>மேலெழுத வேண்டும் pointer-events.

முடக்கப்பட்ட பாப்ஓவர் தூண்டுதல்களுக்கு, data-trigger="hover"உங்கள் பயனர்கள் முடக்கப்பட்ட உறுப்பைக் கிளிக் செய்ய எதிர்பார்க்காததால், பாப்ஓவர் உடனடி காட்சிப் பின்னூட்டமாகத் தோன்றும்.

<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>

பயன்பாடு

ஜாவாஸ்கிரிப்ட் வழியாக பாப்ஓவர்களை இயக்கவும்:

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

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். data-தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-animation="".

பெயர் வகை இயல்புநிலை விளக்கம்
இயங்குபடம் பூலியன் உண்மை பாப்ஓவருக்கு CSS ஃபேட் மாற்றத்தைப் பயன்படுத்தவும்
கொள்கலன் சரம் | உறுப்பு | பொய் பொய்

ஒரு குறிப்பிட்ட உறுப்புடன் பாப்ஓவரைச் சேர்க்கிறது. உதாரணம்: container: 'body'. இந்த விருப்பம் குறிப்பாக பயனுள்ளதாக இருக்கும், இது ஆவணத்தின் ஓட்டத்தில் தூண்டுதல் உறுப்புக்கு அருகில் பாப்ஓவரை நிலைநிறுத்த உங்களை அனுமதிக்கிறது - இது சாளரத்தின் அளவை மாற்றும் போது தூண்டும் உறுப்பிலிருந்து பாப்ஓவர் மிதப்பதைத் தடுக்கும்.
உள்ளடக்கம் சரம் | உறுப்பு | செயல்பாடு ''

data-contentபண்புக்கூறு இல்லை என்றால் இயல்புநிலை உள்ளடக்க மதிப்பு .

ஒரு செயல்பாடு கொடுக்கப்பட்டால், அது thisபாப்ஓவர் இணைக்கப்பட்டுள்ள உறுப்புடன் அதன் குறிப்புடன் அழைக்கப்படும்.
தாமதம் எண் | பொருள் 0

பாப்ஓவரை (எம்எஸ்) காட்டுவது மற்றும் மறைப்பது தாமதம் - கைமுறை தூண்டுதல் வகைக்கு பொருந்தாது

ஒரு எண் வழங்கப்பட்டால், மறை/காட்சி இரண்டிற்கும் தாமதம் பயன்படுத்தப்படும்

பொருளின் அமைப்பு:delay: { "show": 500, "hide": 100 }
html பூலியன் பொய் பாப்ஓவரில் HTML ஐச் செருகவும். textதவறு எனில் , DOM இல் உள்ளடக்கத்தைச் செருக jQuery இன் முறை பயன்படுத்தப்படும். XSS தாக்குதல்களைப் பற்றி நீங்கள் கவலைப்பட்டால், உரையைப் பயன்படுத்தவும்.
வேலை வாய்ப்பு சரம் | செயல்பாடு 'சரி'

பாப்ஓவரை நிலைநிறுத்துவது எப்படி - ஆட்டோ | மேல் | கீழே | விட்டு | சரி.
குறிப்பிடப்பட்டால், அது பாப்ஓவரை autoமாறும் வகையில் மாற்றியமைக்கும்.

இடத்தைத் தீர்மானிக்க ஒரு செயல்பாடு பயன்படுத்தப்படும்போது, ​​அது பாப்ஓவர் DOM முனை அதன் முதல் வாதமாகவும், தூண்டுதல் உறுப்பு DOM முனை அதன் இரண்டாவது எனவும் அழைக்கப்படுகிறது. சூழல் பாப்ஓவர் நிகழ்வாக thisஅமைக்கப்பட்டுள்ளது.
தேர்வாளர் சரம் | பொய் பொய் தேர்வாளர் வழங்கப்பட்டால், குறிப்பிட்ட இலக்குகளுக்கு பாப்ஓவர் பொருள்கள் ஒப்படைக்கப்படும். நடைமுறையில், டைனமிக் HTML உள்ளடக்கத்தை பாப்ஓவர் சேர்க்க இது பயன்படுத்தப்படுகிறது. இதையும் ஒரு தகவல் உதாரணத்தையும் பார்க்கவும் .
டெம்ப்ளேட் லேசான கயிறு '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

பாப்ஓவரை உருவாக்கும் போது பயன்படுத்த அடிப்படை HTML.

பாப்ஓவரில் titleஊசி செலுத்தப்படும் .popover-header.

பாப்ஓவரில் contentஊசி செலுத்தப்படும் .popover-body.

.arrowபாபோவரின் அம்பாக மாறும்.

வெளிப்புற ரேப்பர் உறுப்பு வகுப்பைக் கொண்டிருக்க வேண்டும் .popover.
தலைப்பு சரம் | உறுப்பு | செயல்பாடு ''

titleபண்புக்கூறு இல்லாவிட்டால் இயல்புநிலை தலைப்பு மதிப்பு .

ஒரு செயல்பாடு கொடுக்கப்பட்டால், அது thisபாப்ஓவர் இணைக்கப்பட்டுள்ள உறுப்புடன் அதன் குறிப்புடன் அழைக்கப்படும்.
தூண்டுதல் லேசான கயிறு 'கிளிக்' பாப்ஓவர் எவ்வாறு தூண்டப்படுகிறது - கிளிக் | மிதவை | கவனம் | கையேடு. நீங்கள் பல தூண்டுதல்களை அனுப்பலாம்; அவற்றை ஒரு இடைவெளியுடன் பிரிக்கவும். manualவேறு எந்த தூண்டுதலுடனும் இணைக்க முடியாது.
ஆஃப்செட் எண் | லேசான கயிறு 0 அதன் இலக்குடன் தொடர்புடைய பாப்ஓவரின் ஈடுசெய்யப்பட்டது. மேலும் தகவலுக்கு, Popper.js இன் ஆஃப்செட் டாக்ஸைப் பார்க்கவும் .
வீழ்ச்சியடைதல் சரம் | வரிசை 'புரட்டு' ஃபால்பேக்கில் பாப்பர் எந்த நிலையைப் பயன்படுத்துவார் என்பதைக் குறிப்பிட அனுமதிக்கவும். மேலும் தகவலுக்கு, Popper.js இன் நடத்தை ஆவணத்தைப் பார்க்கவும்
எல்லை சரம் | உறுப்பு 'சுருள் பெற்றோர்' பாப்ஓவரின் ஓவர்ஃப்ளோ கட்டுப்பாடு எல்லை. 'viewport', 'window', 'scrollParent', அல்லது HTMLElement குறிப்பு (JavaScript மட்டும்) இன் மதிப்புகளை ஏற்கிறது . மேலும் தகவலுக்கு, Popper.js-ன் தடுத்தல் ஆவணத்தைப் பார்க்கவும் .

தனிப்பட்ட பாபோவர்களுக்கான தரவு பண்புக்கூறுகள்

மேலே விவரிக்கப்பட்டுள்ளபடி, தனிப்பட்ட பாப்ஓவர்களுக்கான விருப்பங்களை தரவு பண்புக்கூறுகளின் மூலம் மாற்றாகக் குறிப்பிடலாம்.

முறைகள்

ஒத்திசைவற்ற முறைகள் மற்றும் மாற்றங்கள்

அனைத்து API முறைகளும் ஒத்திசைவற்றவை மற்றும் மாற்றத்தைத் தொடங்குகின்றன . மாற்றம் தொடங்கப்பட்டவுடன், ஆனால் அது முடிவதற்குள் அவர்கள் அழைப்பாளரிடம் திரும்புகிறார்கள் . கூடுதலாக, மாற்றும் கூறுகளின் முறை அழைப்பு புறக்கணிக்கப்படும் .

மேலும் தகவலுக்கு எங்கள் ஜாவாஸ்கிரிப்ட் ஆவணங்களைப் பார்க்கவும் .

$().popover(options)

உறுப்பு சேகரிப்புக்கான பாப்ஓவர்களைத் துவக்குகிறது.

.popover('show')

ஒரு தனிமத்தின் பாப்ஓவரை வெளிப்படுத்துகிறது. பாப்ஓவர் உண்மையில் காட்டப்படுவதற்கு முன்பு (அதாவது shown.bs.popoverநிகழ்வு நிகழும் முன்) அழைப்பாளருக்குத் திரும்புகிறது. இது பாப்ஓவரின் "கையேடு" தூண்டுதலாகக் கருதப்படுகிறது. தலைப்பு மற்றும் உள்ளடக்கம் பூஜ்ஜிய நீளம் கொண்ட Popovers ஒருபோதும் காட்டப்படாது.

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

.popover('hide')

ஒரு தனிமத்தின் பாப்ஓவரை மறைக்கிறது. பாப்ஓவர் உண்மையில் மறைக்கப்படுவதற்கு முன்பு (அதாவது hidden.bs.popoverநிகழ்வு நிகழும் முன்) அழைப்பாளரிடம் திரும்பும். இது பாப்ஓவரின் "கையேடு" தூண்டுதலாகக் கருதப்படுகிறது.

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

.popover('toggle')

ஒரு உறுப்பின் பாப்ஓவரை மாற்றுகிறது. பாப்ஓவர் உண்மையில் காட்டப்படுவதற்கு அல்லது மறைக்கப்படுவதற்கு முன்பு (அதாவது நிகழ்வு shown.bs.popoverஅல்லது hidden.bs.popoverநிகழ்வு நிகழும் முன்) அழைப்பாளருக்குத் திரும்புகிறது. இது பாப்ஓவரின் "கையேடு" தூண்டுதலாகக் கருதப்படுகிறது.

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

.popover('dispose')

ஒரு தனிமத்தின் பாப்ஓவரை மறைத்து அழிக்கிறது. பிரதிநிதித்துவத்தைப் பயன்படுத்தும் Popovers ( selectorவிருப்பத்தைப் பயன்படுத்தி உருவாக்கப்பட்டவை ) சந்ததி தூண்டுதல் கூறுகளில் தனித்தனியாக அழிக்கப்பட முடியாது.

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

.popover('enable')

ஒரு தனிமத்தின் பாப்ஓவர் காட்டப்படும் திறனை வழங்குகிறது. Popovers இயல்பாகவே இயக்கப்படும்.

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

.popover('disable')

ஒரு உறுப்பின் பாப்ஓவர் காட்டப்படுவதற்கான திறனை நீக்குகிறது. பாப்ஓவர் மீண்டும் இயக்கப்பட்டால் மட்டுமே அதைக் காட்ட முடியும்.

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

.popover('toggleEnabled')

ஒரு உறுப்பின் பாப்ஓவர் காட்டப்படும் அல்லது மறைக்கப்படுவதற்கான திறனை மாற்றுகிறது.

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

.popover('update')

உறுப்பின் பாப்ஓவரின் நிலையைப் புதுப்பிக்கிறது.

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

நிகழ்வுகள்

நிகழ்வு வகை விளக்கம்
show.bs.popover showநிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது .
காட்டப்பட்டுள்ளது.bs.popover பாப்ஓவர் பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
hide.bs.popover hideநிகழ்வு முறை அழைக்கப்பட்டவுடன் இந்த நிகழ்வு உடனடியாக நீக்கப்படும் .
மறைக்கப்பட்ட.bs.popover பாப்ஓவர் பயனரிடமிருந்து மறைக்கப்பட்டதும் (CSS மாற்றங்கள் முடியும் வரை காத்திருக்கும்) இந்த நிகழ்வு நீக்கப்படும்.
செருகப்பட்டது.bs.popover show.bs.popoverDOM இல் பாப்ஓவர் டெம்ப்ளேட் சேர்க்கப்படும் போது, ​​நிகழ்வுக்குப் பிறகு இந்த நிகழ்வு நீக்கப்படும் . 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})