ପପୋଭର୍ସ |
ଆପଣଙ୍କ ସାଇଟରେ ଥିବା ଯେକ element ଣସି ଉପାଦାନରେ ଆଇଓଏସରେ ମିଳୁଥିବା ପରି ବୁଟଷ୍ଟ୍ରାପ୍ ପପୋଭର ଯୋଡିବା ପାଇଁ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଉଦାହରଣ |
ସମୀକ୍ଷା
ପପଓଭର ପ୍ଲଗଇନ ବ୍ୟବହାର କରିବା ସମୟରେ ଜାଣିବା ଜିନିଷ:
- ପୋଜିଭର୍ସ ପୋଜିସନ୍ ପାଇଁ ତୃତୀୟ ପକ୍ଷ ଲାଇବ୍ରେରୀ ପପର୍ ଉପରେ ନିର୍ଭର କରନ୍ତି | Bootstrap.js ପୂର୍ବରୁ ଆପଣ popper.min.js ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଉଚିତ କିମ୍ବା ପପୋଭର କାମ କରିବା ପାଇଁ ପପର୍ ଧାରଣ କରିଥିବା ବ୍ୟବହାର
bootstrap.bundle.min.js
/ ବ୍ୟବହାର କରିବା ଜରୁରୀ!bootstrap.bundle.js
- ପପୋଭର୍ସ ଏକ ନିର୍ଭରଶୀଳତା ଭାବରେ ଟୁଲ୍ ଟିପ୍ ପ୍ଲଗଇନ୍ ଆବଶ୍ୟକ କରେ |
- କାର୍ଯ୍ୟଦକ୍ଷତା କାରଣରୁ ପପୋଭର୍ସ ଅପ୍ଟ-ଇନ୍ ଅଟେ, ତେଣୁ ଆପଣ ସେମାନଙ୍କୁ ନିଜେ ଆରମ୍ଭ କରିବା ଜରୁରୀ |
- ଶୂନ-ଦ length ର୍ଘ୍ୟ
title
ଏବଂcontent
ମୂଲ୍ୟ କଦାପି ପପଓଭର ଦେଖାଇବ ନାହିଁ | container: 'body'
ଅଧିକ ଜଟିଳ ଉପାଦାନଗୁଡ଼ିକରେ ସମସ୍ୟା ସୃଷ୍ଟି ନକରିବାକୁ ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ (ଯେପରିକି ଆମର ଇନପୁଟ୍ ଗୋଷ୍ଠୀ, ବଟନ୍ ଗୋଷ୍ଠୀ, ଇତ୍ୟାଦି) |- ଲୁକ୍କାୟିତ ଉପାଦାନଗୁଡିକ ଉପରେ ପପଓଭରଗୁଡିକ ଟ୍ରିଗ୍ କରିବା କାମ କରିବ ନାହିଁ |
- ଏକ ରାପର୍ ଉପାଦାନ ଉପରେ ପପୋଭର୍ସ
.disabled
କିମ୍ବାdisabled
ଉପାଦାନଗୁଡ଼ିକ ଟ୍ରିଗର ହେବା ଜରୁରୀ | - ଯେତେବେଳେ ଆଙ୍କର୍ଗୁଡ଼ିକରୁ ଟ୍ରିଗର ହୁଏ ଯାହା ଏକାଧିକ ଧାଡିରେ ଗୁଡ଼ାଏ, ପପୋଭରଗୁଡ଼ିକ ଆଙ୍କର୍ଗୁଡ଼ିକର ସାମଗ୍ରିକ ମୋଟେଇ ମଧ୍ୟରେ କେନ୍ଦ୍ରୀଭୂତ ହେବ | ଏହି ଆଚରଣକୁ ଏଡାଇବା ପାଇଁ
.text-nowrap
ଆପଣଙ୍କ ଉପରେ ବ୍ୟବହାର କରନ୍ତୁ |<a>
- ସେମାନଙ୍କର ଅନୁରୂପ ଉପାଦାନଗୁଡିକ DOM ରୁ ଅପସାରଣ ହେବା ପୂର୍ବରୁ ପପୋଭରଗୁଡିକ ଲୁକ୍କାୟିତ ହେବା ଜରୁରୀ |
- ଏକ ଛାୟା DOM ଭିତରେ ଥିବା ଏକ ଉପାଦାନ ଯୋଗୁଁ ପପୋଭରଗୁଡିକ ଟ୍ରିଗର ହୋଇପାରେ |
prefers-reduced-motion
ମିଡିଆ ଜିଜ୍ଞାସା ଉପରେ ନିର୍ଭରଶୀଳ | ଆମର ଆକ୍ସେସିବିଲିଟି ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ର ହ୍ରାସ ହୋଇଥିବା ଗତି ବିଭାଗ ଦେଖନ୍ତୁ
|
କିଛି ଉଦାହରଣ ସହିତ ପପୋଭରଗୁଡିକ କିପରି କାମ କରେ ଦେଖିବା ପାଇଁ ପ reading ଼ନ୍ତୁ |
ଉଦାହରଣ: ସବୁ ସ୍ଥାନରେ ପପୋଭର ସକ୍ଷମ କରନ୍ତୁ |
ଏକ ପୃଷ୍ଠାରେ ସମସ୍ତ ପପୋଭର୍ ଆରମ୍ଭ କରିବାର ଗୋଟିଏ ଉପାୟ ହେଉଛି ସେଗୁଡିକୁ ସେମାନଙ୍କ data-bs-toggle
ଗୁଣ ଅନୁଯାୟୀ ଚୟନ କରିବା:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
ଉଦାହରଣ: container
ବିକଳ୍ପ ବ୍ୟବହାର କରି |
ଯେତେବେଳେ ଆପଣଙ୍କର ଏକ ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନରେ କିଛି ଶ yles ଳୀ ଅଛି ଯାହା ଏକ ପପ୍ ଓଭରରେ ବାଧା ସୃଷ୍ଟି କରେ, ଆପଣ ଏକ କଷ୍ଟମ୍ ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ଚାହାଁନ୍ତି container
ଯାହା ଦ୍ pop ାରା ପପୋଭରର HTML ସେହି ଉପାଦାନ ମଧ୍ୟରେ ଦେଖାଯାଏ |
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
ଉଦାହରଣ |
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
ଚାରୋଟି ଦିଗ |
ଚାରୋଟି ବିକଳ୍ପ ଉପଲବ୍ଧ: ଉପର, ଡାହାଣ, ତଳ, ଏବଂ ବାମ ଆଲାଇନ୍ | RTL ରେ ବୁଟଷ୍ଟ୍ରାପ୍ ବ୍ୟବହାର କରିବା ସମୟରେ ନିର୍ଦ୍ଦେଶଗୁଡ଼ିକ ପ୍ରତିବିମ୍ବିତ |
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</button>
ପରବର୍ତ୍ତୀ କ୍ଲିକ୍ ରେ ବରଖାସ୍ତ କରନ୍ତୁ |
focus
ଟୋଗଲ୍ ଉପାଦାନ ଅପେକ୍ଷା ଏକ ଭିନ୍ନ ଉପାଦାନର ଉପଭୋକ୍ତାଙ୍କର ପରବର୍ତ୍ତୀ କ୍ଲିକ୍ ଉପରେ ପପୋଭରଗୁଡ଼ିକୁ ବରଖାସ୍ତ କରିବାକୁ ଟ୍ରିଗର ବ୍ୟବହାର କରନ୍ତୁ |
ବହିଷ୍କାର-ପରବର୍ତ୍ତୀ-କ୍ଲିକ୍ ପାଇଁ ନିର୍ଦ୍ଦିଷ୍ଟ ମାର୍କଅପ୍ ଆବଶ୍ୟକ |
ସଠିକ୍ କ୍ରସ୍ ବ୍ରାଉଜର୍ ଏବଂ କ୍ରସ୍ ପ୍ଲାଟଫର୍ମ ଆଚରଣ ପାଇଁ, ଆପଣଙ୍କୁ ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରିବାକୁ ହେବ, <a>
ଟ୍ୟାଗ୍ ନୁହେଁ ,<button>
ଏବଂ ଆପଣ ମଧ୍ୟ ଏକ tabindex
ଗୁଣ ଅନ୍ତର୍ଭୂକ୍ତ କରିବେ |
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
trigger: 'focus'
})
ଅକ୍ଷମ ଉପାଦାନଗୁଡିକ |
ଆଟ୍ରିବ୍ୟୁଟ୍ ସହିତ ଉପାଦାନଗୁଡିକ disabled
ଇଣ୍ଟରାକ୍ଟିଭ୍ ନୁହେଁ, ଅର୍ଥାତ୍ ଉପଭୋକ୍ତାମାନେ ଏକ ପପ୍ ଓଭର (କିମ୍ବା ଟୁଲ୍ ଟିପ୍) ଟ୍ରିଗର୍ କରିବାକୁ ସେଗୁଡିକୁ କ୍ଲିକ୍ କରିପାରିବେ ନାହିଁ | ଏକ ୱାର୍କଆଉଟ୍ ଭାବରେ, ଆପଣ ଏକ ରାପରରୁ ପପ୍ ଓଭରକୁ ଟ୍ରିଗର କରିବାକୁ ଚାହାଁନ୍ତି, <div>
କିମ୍ବା <span>
ବ୍ୟବହାର କରି କୀବୋର୍ଡ୍-ଫୋକସେବଲ୍ ବ୍ୟବହାର କରି tabindex="0"
|
ଅକ୍ଷମ ପପଓଭର ଟ୍ରିଗରଗୁଡିକ ପାଇଁ, ଆପଣ ମଧ୍ୟ ପସନ୍ଦ କରିପାରନ୍ତି data-bs-trigger="hover focus"
ଯାହା ଦ୍ pop ାରା ପପୋଭର ଆପଣଙ୍କ ଉପଭୋକ୍ତାମାନଙ୍କୁ ତୁରନ୍ତ ଭିଜୁଆଲ୍ ଫିଡବ୍ୟାକ୍ ଭାବରେ ଦେଖାଯାଏ କାରଣ ସେମାନେ ଏକ ଅକ୍ଷମ ଉପାଦାନ ଉପରେ କ୍ଲିକ୍ କରିବାକୁ ଆଶା କରିପାରନ୍ତି ନାହିଁ |
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
ସାସ୍ |
ଭେରିଏବଲ୍ |
$popover-font-size: $font-size-sm;
$popover-bg: $white;
$popover-max-width: 276px;
$popover-border-width: $border-width;
$popover-border-color: rgba($black, .2);
$popover-border-radius: $border-radius-lg;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow: $box-shadow;
$popover-header-bg: shade-color($popover-bg, 6%);
$popover-header-color: $headings-color;
$popover-header-padding-y: .5rem;
$popover-header-padding-x: $spacer;
$popover-body-color: $body-color;
$popover-body-padding-y: $spacer;
$popover-body-padding-x: $spacer;
$popover-arrow-width: 1rem;
$popover-arrow-height: .5rem;
$popover-arrow-color: $popover-bg;
$popover-arrow-outer-color: fade-in($popover-border-color, .05);
ବ୍ୟବହାର
ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ପପୋଭର୍ ସକ୍ଷମ କରନ୍ତୁ:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
କୀବୋର୍ଡ୍ ଏବଂ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ପପୋଭର ତିଆରି କରିବା |
କୀବୋର୍ଡ୍ ଉପଭୋକ୍ତାମାନଙ୍କୁ ଆପଣଙ୍କର ପପୋଭର୍ ସକ୍ରିୟ କରିବାକୁ ଅନୁମତି ଦେବାକୁ, ଆପଣ ସେମାନଙ୍କୁ କେବଳ HTML ଉପାଦାନଗୁଡ଼ିକରେ ଯୋଡିବା ଉଚିତ ଯାହା ପାରମ୍ପାରିକ ଭାବରେ କୀବୋର୍ଡ୍-ଫୋକସେବଲ୍ ଏବଂ ଇଣ୍ଟରାକ୍ଟିଭ୍ (ଯେପରିକି ଲିଙ୍କ୍ କିମ୍ବା ଫର୍ମ କଣ୍ଟ୍ରୋଲ୍) | ଯଦିଓ ଇଚ୍ଛାଧୀନ HTML ଉପାଦାନଗୁଡିକ (ଯେପରିକି <span>
s) ଗୁଣବତ୍ତା ଯୋଗକରି ଫୋକସେବଲ୍ ହୋଇପାରିବ tabindex="0"
, ଏହା କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ଅଣ-ଇଣ୍ଟରାକ୍ଟିଭ୍ ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ସମ୍ଭାବ୍ୟ ବିରକ୍ତିକର ଏବଂ ଦ୍ୱନ୍ଦ୍ୱପୂର୍ଣ୍ଣ ଟ୍ୟାବ୍ ଷ୍ଟପ୍ ଯୋଗ କରିବ ଏବଂ ଅଧିକାଂଶ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ବର୍ତ୍ତମାନ ଏହି ପରିସ୍ଥିତିରେ ପପୋଭରର ବିଷୟବସ୍ତୁ ଘୋଷଣା କରେ ନାହିଁ | । ଅତିରିକ୍ତ ଭାବରେ, କେବଳ ଆପଣଙ୍କର ପପୋଭର୍ ପାଇଁ ଟ୍ରିଗର ଭାବରେ ନିର୍ଭର କରନ୍ତୁ ନାହିଁ hover
, କାରଣ ଏହା ସେମାନଙ୍କୁ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ଟ୍ରିଗର କରିବା ଅସମ୍ଭବ କରିବ |
ଯେତେବେଳେ ଆପଣ ବିକଳ୍ପ ସହିତ ପପୋଭରରେ ସମୃଦ୍ଧ, ସଂରଚନା HTML ସନ୍ନିବେଶ କରିପାରିବେ html
, ଆମେ ଦୃ strongly ଭାବରେ ପରାମର୍ଶ ଦେଉଛୁ ଯେ ଆପଣ ଅତ୍ୟଧିକ ପରିମାଣର ବିଷୟବସ୍ତୁ ଯୋଡିବା ଠାରୁ ଦୂରେଇ ରୁହନ୍ତୁ | ପପୋଭରଗୁଡିକ ବର୍ତ୍ତମାନ କାର୍ଯ୍ୟ କରିବାର ପଦ୍ଧତି ହେଉଛି, ଥରେ ପ୍ରଦର୍ଶିତ ହେଲେ, ସେମାନଙ୍କର ବିଷୟବସ୍ତୁ aria-describedby
ଗୁଣ ସହିତ ଟ୍ରିଗର ଉପାଦାନ ସହିତ ବନ୍ଧା | ଫଳସ୍ୱରୂପ, ପପୋଭରର ବିଷୟବସ୍ତୁର ସମ୍ପୁର୍ଣ୍ଣତା ଟେକ୍ନୋଲୋଜି ବ୍ୟବହାରକାରୀଙ୍କୁ ଏକ ଲମ୍ବା, ନିରବଚ୍ଛିନ୍ନ ଷ୍ଟ୍ରିମ୍ ଭାବରେ ସହାୟତା କରିବାକୁ ଘୋଷଣା କରାଯିବ |
ଅତିରିକ୍ତ ଭାବରେ, ଯେତେବେଳେ ଆପଣଙ୍କର ପପଓଭରରେ ଇଣ୍ଟରାକ୍ଟିଭ୍ କଣ୍ଟ୍ରୋଲ୍ (ଯେପରିକି ଫର୍ମ ଉପାଦାନ କିମ୍ବା ଲିଙ୍କ୍) ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ସମ୍ଭବ ଅଟେ ( allowList
ଅନୁମତିପ୍ରାପ୍ତ ଗୁଣ ଏବଂ ଟ୍ୟାଗଗୁଡ଼ିକରେ ଏହି ଉପାଦାନଗୁଡିକ ଯୋଗ କରି), ସାବଧାନ ରୁହନ୍ତୁ ଯେ ସମ୍ପ୍ରତି ପପଓଭର କୀବୋର୍ଡ୍ ଫୋକସ୍ କ୍ରମ ପରିଚାଳନା କରେ ନାହିଁ | ଯେତେବେଳେ ଏକ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀ ଏକ ପପ୍ ଓଭର ଖୋଲନ୍ତି, ଧ୍ୟାନ ଟ୍ରାଇଜିଂ ଉପାଦାନ ଉପରେ ରହିଥାଏ, ଏବଂ ଯେହେତୁ ପପଓଭର ସାଧାରଣତ document ଡକ୍ୟୁମେଣ୍ଟର ସଂରଚନାରେ ଟ୍ରିଗରକୁ ଅନୁସରଣ କରେ ନାହିଁ, ଆଗକୁ ବ press ିବା / ଦବାଇବାର କ guarantee ଣସି ଗ୍ୟାରେଣ୍ଟି ନାହିଁ |TABଏକ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କୁ ନିଜେ ପପ୍ ଓଭରରେ ସ୍ଥାନାନ୍ତର କରିବ | ସଂକ୍ଷେପରେ, ଏକ ପପଅଭରରେ କେବଳ ଇଣ୍ଟରାକ୍ଟିଭ୍ କଣ୍ଟ୍ରୋଲ୍ ଯୋଡିବା, ଏହି ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକୁ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀ ଏବଂ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ଅପହଞ୍ଚ / ବ୍ୟବହାରଯୋଗ୍ୟ କରିପାରେ, କିମ୍ବା ଅତି କମରେ ଏକ ଅଯ og କ୍ତିକ ସାମଗ୍ରିକ ଫୋକସ୍ ଅର୍ଡର ପାଇଁ | ଏହି କ୍ଷେତ୍ରରେ, ଏହା ପରିବର୍ତ୍ତେ ଏକ ମୋଡାଲ୍ ସଂଳାପ ବ୍ୟବହାର କରିବାକୁ ବିଚାର କରନ୍ତୁ |
ବିକଳ୍ପଗୁଡ଼ିକ
ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-bs-
ଯେପରି ଯୋଡନ୍ତୁ data-bs-animation=""
| ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ ଅପ୍ସନ୍ ପାସ୍ କରିବା ସମୟରେ ଓଟ କେସ୍ ରୁ କେବାବ-କେସରେ ବିକଳ୍ପ ନାମର କେସ୍ ପ୍ରକାର ପରିବର୍ତ୍ତନ କରିବାକୁ ନିଶ୍ଚିତ କରନ୍ତୁ | ଉଦାହରଣ ସ୍ୱରୂପ, ବ୍ୟବହାର କରିବା ପରିବର୍ତ୍ତେ, data-bs-customClass="beautifier"
ବ୍ୟବହାର କରନ୍ତୁ data-bs-custom-class="beautifier"
|
sanitize
,
sanitizeFn
ଏବଂ
allowList
ବିକଳ୍ପଗୁଡ଼ିକ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରି ଯୋଗାଇ ଦିଆଯାଇପାରିବ ନାହିଁ |
ନାମ | ଟାଇପ୍ କରନ୍ତୁ | | ଡିଫଲ୍ଟ | | ବର୍ଣ୍ଣନା |
---|---|---|---|
animation |
ବୁଲିଅନ୍ | true |
ପପଓଭରକୁ ଏକ CSS ଦୁର୍ବଳ ପରିବର୍ତ୍ତନ ପ୍ରୟୋଗ କରନ୍ତୁ | |
container |
string | ଉପାଦାନ | ମିଥ୍ୟା | false |
ପପଓଭରକୁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଉପାଦାନରେ ଯୋଡେ | ଉଦାହରଣ : |
content |
string | ଉପାଦାନ | କାର୍ଯ୍ୟ | '' |
ଯଦି ଏକ ଫଙ୍କସନ୍ ଦିଆଯାଏ, ତେବେ ଏହାର ଉପାଦାନ ସହିତ ଏହାର ରେଫରେନ୍ସ ସେଟ୍ ସହିତ ଡକାଯିବ |
delay |
ସଂଖ୍ୟା | ବସ୍ତୁ | 0 |
ପପଓଭର (ms) ଦେଖାଇବା ଏବଂ ଲୁଚାଇବାରେ ବିଳମ୍ବ - ମାନୁଆଲ ଟ୍ରିଗର ପ୍ରକାର ପାଇଁ ପ୍ରଯୁଜ୍ୟ ନୁହେଁ | ଯଦି ଏକ ସଂଖ୍ୟା ଯୋଗାଇ ଦିଆଯାଏ, ଉଭୟ ଲୁଚାଇବା / ଶୋ ପାଇଁ ବିଳମ୍ବ ପ୍ରୟୋଗ କରାଯାଏ | ବସ୍ତୁ ଗଠନ ହେଉଛି: |
html |
ବୁଲିଅନ୍ | false |
ପପଓଭରରେ HTML ସନ୍ନିବେଶ କରନ୍ତୁ | ଯଦି ମିଥ୍ୟା, innerText DOM ରେ ବିଷୟବସ୍ତୁ ସନ୍ନିବେଶ କରିବାକୁ ସମ୍ପତ୍ତି ବ୍ୟବହୃତ ହେବ | ଯଦି ଆପଣ XSS ଆକ୍ରମଣ ବିଷୟରେ ଚିନ୍ତିତ ତେବେ ପାଠ ବ୍ୟବହାର କରନ୍ତୁ | |
placement |
string | କାର୍ଯ୍ୟ | 'right' |
ପପୋଭରକୁ କିପରି ସ୍ଥାନିତ କରିବେ - ଅଟୋ | ଶୀର୍ଷ | ତଳ | ବାମ | ଠିକ୍ ଯେତେବେଳେ ପ୍ଲେସମେଣ୍ଟ ନିର୍ଣ୍ଣୟ କରିବା ପାଇଁ ଏକ ଫଙ୍କସନ୍ ବ୍ୟବହୃତ ହୁଏ, ଏହାକୁ ପପଓଭର DOM ନୋଡ ସହିତ ଏହାର ପ୍ରଥମ ଆର୍ଗୁମେଣ୍ଟ ଏବଂ ଟ୍ରାଇଜିଂ ଉପାଦାନ DOM ନୋଡକୁ ଦ୍ୱିତୀୟ ଭାବରେ କୁହାଯାଏ | |
selector |
string | ମିଥ୍ୟା | false |
ଯଦି ଏକ ଚୟନକର୍ତ୍ତା ପ୍ରଦାନ କରାଯାଏ, ପପଓଭର ବସ୍ତୁଗୁଡିକ ନିର୍ଦ୍ଦିଷ୍ଟ ଲକ୍ଷ୍ୟସ୍ଥଳରେ ନ୍ୟସ୍ତ ହେବ | ଅଭ୍ୟାସରେ, ପପୋଭର୍ସ ଯୋଡିବାକୁ ଗତିଶୀଳ HTML ବିଷୟବସ୍ତୁକୁ ସକ୍ଷମ କରିବାକୁ ଏହା ବ୍ୟବହୃତ ହୁଏ | ଏହାକୁ ଏବଂ ଏକ ସୂଚନାପୂର୍ଣ୍ଣ ଉଦାହରଣ ଦେଖନ୍ତୁ | |
template |
ଷ୍ଟ୍ରିଙ୍ଗ୍ | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
ପପଓଭର ସୃଷ୍ଟି କରିବା ସମୟରେ ବ୍ୟବହାର କରିବାକୁ HTML କୁ ଆଧାର କରନ୍ତୁ | ପପୋଭରର ପପୋଭରର
ବାହ୍ୟ ରାପର୍ ଉପାଦାନର |
title |
string | ଉପାଦାନ | କାର୍ଯ୍ୟ | '' |
ଯଦି ଏକ ଫଙ୍କସନ୍ ଦିଆଯାଏ, ତେବେ ଏହାର ଉପାଦାନ ସହିତ ଏହାର ରେଫରେନ୍ସ ସେଟ୍ ସହିତ ଡକାଯିବ |
trigger |
ଷ୍ଟ୍ରିଙ୍ଗ୍ | 'click' |
ପପଓଭର କିପରି ଟ୍ରିଗର ହୁଏ - କ୍ଲିକ୍ କରନ୍ତୁ | ହୋଭର | ଧ୍ୟାନ | ମାନୁଆଲ୍ | ଆପଣ ଏକାଧିକ ଟ୍ରିଗର ପାସ୍ କରିପାରନ୍ତି; ସେମାନଙ୍କୁ ଏକ ସ୍ପେସ୍ ସହିତ ଅଲଗା କର | manual ଅନ୍ୟ କ trig ଣସି ଟ୍ରିଗର ସହିତ ମିଳିତ ହୋଇପାରିବ ନାହିଁ | |
fallbackPlacements |
ଆରେ | ['top', 'right', 'bottom', 'left'] |
ଆରେ (ପସନ୍ଦ କ୍ରମରେ) ପ୍ଲେସମେଣ୍ଟଗୁଡିକର ଏକ ତାଲିକା ପ୍ରଦାନ କରି ଫଲବ୍ୟାକ୍ ପ୍ଲେସମେଣ୍ଟଗୁଡ଼ିକୁ ବ୍ୟାଖ୍ୟା କରନ୍ତୁ | ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ଙ୍କ ଆଚରଣ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ | |
boundary |
string | ଉପାଦାନ | 'clippingParents' |
ପପୋଭରର ଓଭରଫ୍ଲୋ ସୀମାବଦ୍ଧ ସୀମା (କେବଳ ପପର୍ ର ପ୍ରତିରୋଧ ଓଭରଫ୍ଲୋ ମୋଡିଫାୟର୍ ପାଇଁ ପ୍ରଯୁଜ୍ୟ) | ଡିଫଲ୍ଟ ଭାବରେ ଏହା 'clippingParents' ଏବଂ ଏକ HTMLElement ରେଫରେନ୍ସ ଗ୍ରହଣ କରିପାରିବ (କେବଳ ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ) | ଅଧିକ ସୂଚନା ପାଇଁ ପପରର ଡିଟେକ୍ଟ ଓଭରଫ୍ଲୋ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ | |
customClass |
string | କାର୍ଯ୍ୟ | '' |
ଯେତେବେଳେ ଏହା ଦେଖାଯାଏ ପପ୍ ଓଭରରେ କ୍ଲାସ୍ ଯୋଡନ୍ତୁ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଟେମ୍ପଲେଟରେ ନିର୍ଦ୍ଦିଷ୍ଟ ଯେକ classes ଣସି ଶ୍ରେଣୀ ସହିତ ଏହି ଶ୍ରେଣୀଗୁଡ଼ିକ ଯୋଗ କରାଯିବ | ଏକାଧିକ ଶ୍ରେଣୀ ଯୋଡିବାକୁ, ସେମାନଙ୍କୁ ସ୍ପେସ୍ ସହିତ ଅଲଗା କରନ୍ତୁ : ଆପଣ ଏକ ଫଙ୍କସନ୍ ମଧ୍ୟ ପାସ୍ କରିପାରିବେ ଯାହା ଅତିରିକ୍ତ ଶ୍ରେଣୀ ନାମ ଧାରଣ କରିଥିବା ଗୋଟିଏ ଷ୍ଟ୍ରିଙ୍ଗକୁ ଫେରାଇବା ଉଚିତ | |
sanitize |
ବୁଲିଅନ୍ | true |
ପରିମଳକରଣକୁ ସକ୍ଷମ କିମ୍ବା ଅକ୍ଷମ କରନ୍ତୁ | ଯଦି ସକ୍ରିୟ ହୁଏ 'template' , 'content' ଏବଂ 'title' ବିକଳ୍ପଗୁଡିକ ସାନିଟାଇ��୍ ହେବ | ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ରେ ସାନିଟାଇଜର୍ ବିଭାଗ ଦେଖନ୍ତୁ | |
allowList |
ବସ୍ତୁ | ଡିଫଲ୍ଟ ମୂଲ୍ୟ | ଅବଜେକ୍ଟ ଯାହା ଅନୁମତିପ୍ରାପ୍ତ ଗୁଣ ଏବଂ ଟ୍ୟାଗ୍ ଧାରଣ କରେ | |
sanitizeFn |
null | କାର୍ଯ୍ୟ | null |
ଏଠାରେ ଆପଣ ନିଜର ସାନିଟାଇଜ୍ ଫଙ୍କସନ୍ ଯୋଗାଇ ପାରିବେ | ସାନିଟାଇଜେସନ୍ କରିବା ପାଇଁ ଯଦି ଆପଣ ଏକ ଉତ୍ସର୍ଗୀକୃତ ଲାଇବ୍ରେରୀ ବ୍ୟବହାର କରିବାକୁ ପସନ୍ଦ କରନ୍ତି ତେବେ ଏହା ଉପଯୋଗୀ ହୋଇପାରେ | |
offset |
ଆରେ | string | କାର୍ଯ୍ୟ | [0, 8] |
ଏହାର ଟାର୍ଗେଟ୍ ସହିତ ପପଓଭରର ଅଫସେଟ୍ | ଆପଣ କମା ଦ୍ୱାରା ପୃଥକ ମୂଲ୍ୟ ସହିତ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ରେ ଏକ ଷ୍ଟ୍ରିଙ୍ଗ୍ ପାସ୍ କରିପାରିବେ: ଯେତେବେଳେ ଅଫସେଟ୍ ନିର୍ଣ୍ଣୟ କରିବା ପାଇଁ ଏକ ଫଙ୍କସନ୍ ବ୍ୟବହୃତ ହୁଏ, ଏହାକୁ ପ୍ରଥମ ଯୁକ୍ତି ଭାବରେ ପପର୍ ପ୍ଲେସମେଣ୍ଟ୍, ରେଫରେନ୍ସ ଏବଂ ପପର୍ ରେକ୍ଟସ୍ ଧାରଣ କରିଥିବା ଏକ ବସ୍ତୁ ସହିତ କୁହାଯାଏ | ଟ୍ରାଇଜିଂ ଉପାଦାନ DOM ନୋଡ୍ ଦ୍ୱିତୀୟ ଆର୍ଗୁମେଣ୍ଟ୍ ଭାବରେ ପାସ୍ ହୋଇଛି | ଫଙ୍କସନ୍ ନିଶ୍ଚିତ ଭାବରେ ଦୁଇଟି ସଂଖ୍ୟା ସହିତ ଏକ ଆରେ ଫେରସ୍ତ କରିବ : ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ ର ଅଫସେଟ୍ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ | |
popperConfig |
null | ବସ୍ତୁ | କାର୍ଯ୍ୟ | null |
ବୁଟଷ୍ଟ୍ରାପ୍ ର ଡିଫଲ୍ଟ ପପର୍ କନଫିଗ୍ ପରିବର୍ତ୍ତନ କରିବାକୁ, ପପର୍ ର ବିନ୍ୟାସ ଦେଖନ୍ତୁ | ଯେତେବେଳେ ପପର୍ ବିନ୍ୟାସକରଣ ସୃଷ୍ଟି କରିବାକୁ ଏକ ଫଙ୍କସନ୍ ବ୍ୟବହୃତ ହୁଏ, ଏହାକୁ ଏକ ଅବଜେକ୍ଟ ସହିତ କୁହାଯାଏ ଯାହା ବୁଟଷ୍ଟ୍ରାପ୍ ର ଡିଫଲ୍ଟ ପପର୍ ବିନ୍ୟାସକରଣ ଧାରଣ କରିଥାଏ | ଏହା ଆପଣଙ୍କୁ ନିଜ ବିନ୍ୟାସ ସହିତ ଡିଫଲ୍ଟ ବ୍ୟବହାର ଏବଂ ମିଶ୍ରଣ କରିବାରେ ସାହାଯ୍ୟ କରେ | ଫଙ୍କସନ୍ ନିଶ୍ଚିତ ଭାବରେ ପପର୍ ପାଇଁ ଏକ ବିନ୍ୟାସ ବସ୍ତୁ ଫେରସ୍ତ କରିବ | |
ବ୍ୟକ୍ତିଗତ ପପୋଭର ପାଇଁ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ |
ବ୍ୟକ୍ତିଗତ ପପୋଭରଗୁଡ଼ିକ ପାଇଁ ବିକଳ୍ପଗୁଡ଼ିକ ବିକଳ୍ପ ଭାବରେ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର ଦ୍ୱାରା ନିର୍ଦ୍ଦିଷ୍ଟ କରାଯାଇପାରିବ, ଯେପରି ଉପରେ ବର୍ଣ୍ଣନା କରାଯାଇଛି |
ସହିତ ଫଙ୍କସନ୍ ବ୍ୟବହାର କରିବା |popperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
ପ୍ରଣାଳୀ
ଅସନ୍ତୁଳିତ ପଦ୍ଧତି ଏବଂ ସ୍ଥାନାନ୍ତରଣ |
ସମସ୍ତ API ପଦ୍ଧତିଗୁଡିକ ଅସନ୍ତୁଳିତ ଏବଂ ଏକ ପରିବର୍ତ୍ତନ ଆରମ୍ଭ କରନ୍ତି | ସଂକ୍ରମଣ ଆରମ୍ଭ ହେବା ମାତ୍ରେ ସେମାନେ କଲର୍ ନିକଟକୁ ଫେରିଯାଆନ୍ତି କିନ୍ତୁ ଏହା ଶେଷ ହେବା ପୂର୍ବରୁ | ଏହା ସହିତ, ଏକ ପରିବର୍ତ୍ତନକାରୀ ଉପାଦାନ ଉପରେ ଏକ ପଦ୍ଧତି କଲ୍ କୁ ଅଣଦେଖା କରାଯିବ |
ଦେଖାନ୍ତୁ |
ଏକ ଉପାଦାନର ପପ୍ ଓଭର ପ୍ରକାଶ କରେ | ପପଓଭର ପ୍ରକୃତରେ ଦେଖାଯିବା ପୂର୍ବରୁ କଲର୍ କୁ ଫେରିଥାଏ (ଅର୍ଥାତ୍ shown.bs.popover
ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) | ଏହା ପପଓଭରର ଏକ “ମାନୁଆଲ୍” ଟ୍ରିଗର୍ ଭାବରେ ବିବେଚନା କରାଯାଏ | ପପୋଭର ଯାହାର ଟାଇଟଲ୍ ଏବଂ ବିଷୟବସ୍ତୁ ଉଭୟ ଶୂନ-ଲମ୍ବ କେବେବି ପ୍ରଦର୍ଶିତ ହୁଏ ନାହିଁ |
myPopover.show()
ଲୁଚାନ୍ତୁ |
ଏକ ଉପାଦାନର ପପ୍ ଓଭର ଲୁଚାଏ | ପପଓଭର ପ୍ରକୃତରେ ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ hidden.bs.popover
ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ | ଏହା ପପଓଭରର ଏକ “ମାନୁଆଲ୍” ଟ୍ରିଗର୍ ଭାବରେ ବିବେଚନା କରାଯାଏ |
myPopover.hide()
ଟୋଗଲ୍ କରନ୍ତୁ |
ଏକ ଉପାଦାନର ପପ୍ ଓଭର ଟୋଗଲ୍ କରେ | ପପଓଭର ପ୍ରକୃତରେ ଦେଖାଯିବା କିମ୍ବା ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ shown.bs.popover
କିମ୍ବା hidden.bs.popover
ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ | ଏହା ପପଓଭରର ଏକ “ମାନୁଆଲ୍” ଟ୍ରିଗର୍ ଭାବରେ ବିବେଚନା କରାଯାଏ |
myPopover.toggle()
ନିଷ୍କାସନ କରନ୍ତୁ |
ଏକ ଉପାଦାନର ପପୋଭରକୁ ଲୁଚାଇଥାଏ ଏବଂ ନଷ୍ଟ କରିଥାଏ (DOM ଉପାଦାନରେ ସଂରକ୍ଷିତ ତଥ୍ୟ ଅପସାରଣ କରେ) | ପ୍ରତିନିଧୀ ବ୍ୟବହାର କରୁଥିବା ପପୋଭରଗୁଡିକ (ଯାହା ବିକଳ୍ପ ବ୍ୟବହାର କରିselector
ସୃଷ୍ଟି ହୋଇଥାଏ ) ବଂଶଧର ଟ୍ରିଗର ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ପୃଥକ ଭାବରେ ନଷ୍ଟ ହୋଇପାରିବ ନାହିଁ |
myPopover.dispose()
ସକ୍ଷମ କରନ୍ତୁ |
ଏକ ଉପାଦାନର ପପଓଭର ଦେଖାଇବାକୁ କ୍ଷମତା ଦେଇଥାଏ | ଡିଫଲ୍ଟ ଭାବରେ ପପୋଭର୍ସ ସକ୍ଷମ ହୋଇଛି |
myPopover.enable()
ଅକ୍ଷମ କରନ୍ତୁ |
ଏକ ଉପାଦାନର ପପଓଭର ଦେଖାଯିବାର କ୍ଷମତା ଅପସାରଣ କରେ | ପୁନ re- ସକ୍ଷମ ହେଲେ ପପ୍ ଓଭର କେବଳ ଦେଖାଯିବାକୁ ସମର୍ଥ ହେବ |
myPopover.disable()
ଟୋଗଲ୍ ସକ୍ଷମ |
ଏକ ଉପାଦାନର ପପଓଭର ଦେଖାଯିବା କିମ୍ବା ଲୁଚାଇବା ପାଇଁ କ୍ଷମତାକୁ ଟୋଗଲ୍ କରେ |
myPopover.toggleEnabled()
ଅଦ୍ୟତନ କରନ୍ତୁ |
ଏକ ଉପାଦାନର ପପଓଭରର ସ୍ଥିତିକୁ ଅଦ୍ୟତନ କରେ |
myPopover.update()
getInstance
ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ପପ୍ ଓଭର ଇନଷ୍ଟାଣ୍ଟ ପାଇବାକୁ ଅନୁମତି ଦିଏ |
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ପପ୍-ଓଭର ଇନଷ୍ଟାଣ୍ଟ ପାଇବାକୁ ଅନୁମତି ଦିଏ, କିମ୍ବା ଏହା ପ୍ରାରମ୍ଭ ହୋଇନଥିଲେ ଏକ ନୂତନ ସୃଷ୍ଟି କରିବାକୁ ଅନୁମତି ଦିଏ |
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
ଘଟଣା
ଇଭେଣ୍ଟ ପ୍ରକାର | | ବର୍ଣ୍ଣନା |
---|---|
show.bs.popover | show ଉଦାହରଣ ପଦ୍ଧତି ଡାକିବା ପରେ ଏହି ଘଟଣା ତୁରନ୍ତ ନିଆଁ ଲାଗେ | |
show.bs.popover | ଯେତେବେଳେ ଉପଭୋକ୍ତାଙ୍କୁ ପପଓଭର ଦୃଶ୍ୟମାନ ହେଲା ସେତେବେଳେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) | |
hide.bs.popover | hide ଉଦାହରଣ ପଦ୍ଧତି ଡକାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟ ତୁରନ୍ତ ବରଖାସ୍ତ ହୁଏ | |
hidden.bs.popover | ଯେତେବେଳେ ପପଓଭର ବ୍ୟବହାରକାରୀଙ୍କଠାରୁ ଲୁକ୍କାୟିତ ହୋଇସାରିଛି (CSS ସ୍ଥାନାନ୍ତରଣକୁ ଅପେକ୍ଷା କରିବ) |
inserted.bs.popover | show.bs.popover ଯେତେବେଳେ ପପ୍ ଓଭର ଟେମ୍ପଲେଟ୍ DOM ରେ ଯୋଡା ଯାଇଛି , ଇଭେଣ୍ଟ ପରେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ | |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})