ପପୋଭର୍ସ |
ଆପଣଙ୍କ ସାଇଟରେ ଥିବା ଯେକ element ଣସି ଉପାଦାନରେ ଆଇଓଏସରେ ମିଳୁଥିବା ପରି ବୁଟଷ୍ଟ୍ରାପ୍ ପପୋଭର ଯୋଡିବା ପାଇଁ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଉଦାହରଣ |
ସମୀକ୍ଷା
ପପଓଭର ପ୍ଲଗଇନ ବ୍ୟବହାର କରିବା ସମୟରେ ଜାଣିବା ଜିନିଷ:
- ପୋଜିଭର୍ସ ପୋଜିସନ୍ ପାଇଁ ତୃତୀୟ ପକ୍ଷ ଲାଇବ୍ରେରୀ ପପର୍ ଉପରେ ନିର୍ଭର କରନ୍ତି | Bootstrap.js ପୂର୍ବରୁ ଆପଣ popper.min.js ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଉଚିତ କିମ୍ବା ପପୋଭର କାମ କରିବା ପାଇଁ ପପର୍ ଧାରଣ କରିଥିବା ବ୍ୟବହାର
bootstrap.bundle.min.js
/ ବ୍ୟବହାର କରିବା ଜରୁରୀ!bootstrap.bundle.js
- ପପୋଭର୍ସ ଏକ ନିର୍ଭରଶୀଳତା ଭାବରେ ଟୁଲ୍ ଟିପ୍ ପ୍ଲଗଇନ୍ ଆବଶ୍ୟକ କରେ |
- ଯଦି ଆପଣ ଉତ୍ସରୁ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ନିର୍ମାଣ କରୁଛନ୍ତି, ଏହା ଆବଶ୍ୟକ କରେ
util.js
| - କାର୍ଯ୍ୟଦକ୍ଷତା କାରଣରୁ ପପୋଭର୍ସ ଅପ୍ଟ-ଇନ୍ ଅଟେ, ତେଣୁ ଆପଣ ସେମାନଙ୍କୁ ନିଜେ ଆରମ୍ଭ କରିବା ଜରୁରୀ |
- ଶୂନ-ଦ length ର୍ଘ୍ୟ
title
ଏବଂcontent
ମୂଲ୍ୟ କଦାପି ପପଓଭର ଦେଖାଇବ ନାହିଁ | container: 'body'
ଅଧିକ ଜଟିଳ ଉପାଦାନଗୁଡ଼ିକରେ ସମସ୍ୟା ସୃଷ୍ଟି ନକରିବାକୁ ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ (ଯେପରିକି ଆମର ଇନପୁଟ୍ ଗୋଷ୍ଠୀ, ବଟନ୍ ଗୋଷ୍ଠୀ, ଇତ୍ୟାଦି) |- ଲୁକ୍କାୟିତ ଉପାଦାନଗୁଡିକ ଉପରେ ପପଓଭରଗୁଡିକ ଟ୍ରିଗ୍ କରିବା କାମ କରିବ ନାହିଁ |
- ଏକ ରାପର୍ ଉପାଦାନ ଉପରେ ପପୋଭର୍ସ
.disabled
କିମ୍ବାdisabled
ଉପାଦାନଗୁଡ଼ିକ ଟ୍ରିଗର ହେବା ଜରୁରୀ | - ଯେତେବେଳେ ଆଙ୍କର୍ଗୁଡ଼ିକରୁ ଟ୍ରିଗର ହୁଏ ଯାହା ଏକାଧିକ ଧାଡିରେ ଗୁଡ଼ାଏ, ପପୋଭରଗୁଡ଼ିକ ଆଙ୍କର୍ଗୁଡ଼ିକର ସାମଗ୍ରିକ ମୋଟେଇ ମଧ୍ୟରେ କେନ୍ଦ୍ରୀଭୂତ ହେବ | ଏହି ଆଚରଣକୁ ଏଡାଇବା ପାଇଁ
.text-nowrap
ଆପଣଙ୍କ ଉପରେ ବ୍ୟବହାର କରନ୍ତୁ |<a>
- ସେମାନଙ୍କର ଅନୁରୂପ ଉପାଦାନଗୁଡିକ DOM ରୁ ଅପସାରଣ ହେବା ପୂର୍ବରୁ ପପୋଭରଗୁଡିକ ଲୁକ୍କାୟିତ ହେବା ଜରୁରୀ |
- ଏକ ଛାୟା DOM ଭିତରେ ଥିବା ଏକ ଉପାଦାନ ଯୋଗୁଁ ପପୋଭରଗୁଡିକ ଟ୍ରିଗର ହୋଇପାରେ |
prefers-reduced-motion
ମିଡିଆ ଜିଜ୍ଞାସା ଉପରେ ନିର୍ଭରଶୀଳ | ଆମର ଆକ୍ସେସିବିଲିଟି ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ର ହ୍ରାସ ହୋଇଥିବା ଗତି ବିଭାଗ ଦେଖନ୍ତୁ
|
କିଛି ଉଦାହରଣ ସହିତ ପପୋଭରଗୁଡିକ କିପରି କାମ କରେ ଦେଖିବା ପାଇଁ ପ reading ଼ନ୍ତୁ |
ଉଦାହରଣ: ସବୁ ସ୍ଥାନରେ ପପୋଭର ସକ୍ଷମ କରନ୍ତୁ |
ଏକ ପୃଷ୍ଠାରେ ସମସ୍ତ ପପୋଭର୍ ଆରମ୍ଭ କରିବାର ଗୋଟିଏ ଉପାୟ ହେଉଛି ସେଗୁଡିକୁ ସେମାନଙ୍କ data-toggle
ଗୁଣ ଅନୁଯାୟୀ ଚୟନ କରିବା:
$(function () {
$('[data-toggle="popover"]').popover()
})
ଉଦାହରଣ: container
ବିକଳ୍ପ ବ୍ୟବହାର କରି |
ଯେତେବେଳେ ଆପଣଙ୍କର ଏକ ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନରେ କିଛି ଶ yles ଳୀ ଅଛି ଯାହା ଏକ ପପ୍ ଓଭରରେ ବାଧା ସୃଷ୍ଟି କରେ, ଆପଣ ଏକ କଷ୍ଟମ୍ ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ଚାହାଁନ୍ତି container
ଯାହା ଦ୍ pop ାରା ପପୋଭରର 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="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>
ପରବର୍ତ୍ତୀ କ୍ଲିକ୍ ରେ ବରଖାସ୍ତ କରନ୍ତୁ |
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"
ଯାହା ଦ୍ pop ାରା ପପୋଭର ଆପଣଙ୍କ ଉପଭୋକ୍ତାମାନଙ୍କୁ ତୁରନ୍ତ ଭିଜୁଆଲ୍ ଫିଡବ୍ୟାକ୍ ଭାବରେ ଦେଖାଯାଏ କାରଣ ସେମାନେ ଏକ ଅକ୍ଷମ ଉପାଦାନ ଉପରେ କ୍ଲିକ୍ କରିବାକୁ ଆଶା କରିପାରନ୍ତି ନାହିଁ |
<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)
GPU ତ୍ୱରଣ |
GPU ତ୍ୱରଣ ଏବଂ ଏକ ପରିବର୍ତ୍ତିତ ସିଷ୍ଟମ୍ DPI ହେତୁ ପପଓଭରଗୁଡ଼ିକ ୱିଣ୍ଡୋଜ୍ 10 ଡିଭାଇସରେ ବେଳେବେଳେ ଅସ୍ପଷ୍ଟ ଦେଖାଯାଏ | V4 ରେ ଏହା ପାଇଁ ୱାର୍କଆଉଟ୍ ହେଉଛି ଆପଣଙ୍କର ପପୋଭରରେ ଆବଶ୍ୟକ ଅନୁଯାୟୀ GPU ତ୍ୱରଣକୁ ଅକ୍ଷମ କରିବା |
ପ୍ରସ୍ତାବିତ ସମାଧାନ:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
କୀବୋର୍ଡ୍ ଏବଂ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ପପୋଭର ତିଆରି କରିବା |
କୀବୋର୍ଡ୍ ଉପଭୋକ୍ତାମାନଙ୍କୁ ଆପଣଙ୍କର ପପୋଭର୍ ସକ୍ରିୟ କରିବାକୁ ଅନୁମତି ଦେବାକୁ, ଆପଣ ସେମାନଙ୍କୁ କେବଳ HTML ଉପାଦାନଗୁଡ଼ିକରେ ଯୋଡିବା ଉଚିତ ଯାହା ପାରମ୍ପାରିକ ଭାବରେ କୀବୋର୍ଡ୍-ଫୋକସେବଲ୍ ଏବଂ ଇଣ୍ଟରାକ୍ଟିଭ୍ (ଯେପରିକି ଲିଙ୍କ୍ କିମ୍ବା ଫର୍ମ କଣ୍ଟ୍ରୋଲ୍) | ଯଦିଓ ଇଚ୍ଛାଧୀନ HTML ଉପାଦାନଗୁଡିକ (ଯେପରିକି <span>
s) ଗୁଣବତ୍ତା ଯୋଗକରି ଫୋକସେବଲ୍ ହୋଇପାରିବ tabindex="0"
, ଏହା କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ଅଣ-ଇଣ୍ଟରାକ୍ଟିଭ୍ ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ସମ୍ଭାବ୍ୟ ବିରକ୍ତିକର ଏବଂ ଦ୍ୱନ୍ଦ୍ୱପୂର୍ଣ୍ଣ ଟ୍ୟାବ୍ ଷ୍ଟପ୍ ଯୋଗ କରିବ ଏବଂ ଅଧିକାଂଶ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ବର୍ତ୍ତମାନ ଏହି ପରିସ୍ଥିତିରେ ପପୋଭରର ବିଷୟବସ୍ତୁ ଘୋଷଣା କରେ ନାହିଁ | । ଅତିରିକ୍ତ ଭାବରେ, କେବଳ ଆପଣଙ୍କର ପପୋଭର୍ ପାଇଁ ଟ୍ରିଗର ଭାବରେ ନିର୍ଭର କରନ୍ତୁ ନାହିଁ hover
, କାରଣ ଏହା ସେମାନଙ୍କୁ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ଟ୍ରିଗର କରିବା ଅସମ୍ଭବ କରିବ |
ଯେତେବେଳେ ଆପଣ ବିକଳ୍ପ ସହିତ ପପୋଭରରେ ସମୃଦ୍ଧ, ସଂରଚନା HTML ସନ୍ନିବେଶ କରିପାରିବେ html
, ଆମେ ଦୃ strongly ଭାବରେ ପରାମର୍ଶ ଦେଉଛୁ ଯେ ଆପଣ ଅତ୍ୟଧିକ ପରିମାଣର ବିଷୟବସ୍ତୁ ଯୋଡିବା ଠାରୁ ଦୂରେଇ ରୁହନ୍ତୁ | ପପୋଭରଗୁଡିକ ବର୍ତ୍ତମାନ କାର୍ଯ୍ୟ କରିବାର ପଦ୍ଧତି ହେଉଛି, ଥରେ ପ୍ରଦର୍ଶିତ ହେଲେ, ସେମାନଙ୍କର ବିଷୟବସ୍ତୁ aria-describedby
ଗୁଣ ସହିତ ଟ୍ରିଗର ଉପାଦାନ ସହିତ ବନ୍ଧା | ଫଳସ୍ୱରୂପ, ପପୋଭରର ବିଷୟବସ୍ତୁର ସମ୍ପୁର୍ଣ୍ଣତା ଟେକ୍ନୋଲୋଜି ବ୍ୟବହାରକାରୀଙ୍କୁ ଏକ ଲମ୍ବା, ନିରବଚ୍ଛିନ୍ନ ଷ୍ଟ୍ରିମ୍ ଭାବରେ ସହାୟତା କରିବାକୁ ଘୋଷଣା କରାଯିବ |
ଅତିରିକ୍ତ ଭାବରେ, ଯେତେବେଳେ ଆପଣଙ୍କର ପପଓଭରରେ ଇଣ୍ଟରାକ୍ଟିଭ୍ କଣ୍ଟ୍ରୋଲ୍ (ଯେପରିକି ଫର୍ମ ଉପାଦାନ କିମ୍ବା ଲିଙ୍କ୍) ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ସମ୍ଭବ ଅଟେ (ଏହି ଉପାଦାନଗୁଡ଼ିକୁ whiteList
କିମ୍ବା ଅନୁମତିପ୍ରାପ୍ତ ଗୁଣ ଏବଂ ଟ୍ୟାଗରେ ଯୋଗ କରି), ସାବଧାନ ରୁହନ୍ତୁ ଯେ ସମ୍ପ୍ରତି ପପୋଭର କୀବୋର୍ଡ୍ ଫୋକସ୍ କ୍ରମ ପରିଚାଳନା କରେ ନାହିଁ | ଯେତେବେଳେ ଏକ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀ ଏକ ପପ୍ ଓଭର ଖୋଲନ୍ତି, ଧ୍ୟାନ ଟ୍ରାଇଜିଂ ଉପାଦାନ ଉପରେ ରହିଥାଏ, ଏବଂ ଯେହେତୁ ପପଓଭର ସାଧାରଣତ document ଡକ୍ୟୁମେଣ୍ଟର ସଂରଚନାରେ ଟ୍ରିଗରକୁ ଅନୁସରଣ କରେ ନାହିଁ, ଆଗକୁ ବ press ିବା / ଦବାଇବାର କ guarantee ଣସି ଗ୍ୟାରେଣ୍ଟି ନାହିଁ |TABଏକ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କୁ ନିଜେ ପପ୍ ଓଭରରେ ସ୍ଥାନାନ୍ତର କରିବ | ସଂକ୍ଷେପରେ, ଏକ ପପଅଭରରେ କେବଳ ଇଣ୍ଟରାକ୍ଟିଭ୍ କଣ୍ଟ୍ରୋଲ୍ ଯୋଡିବା, ଏହି ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକୁ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀ ଏବଂ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ଅପହଞ୍ଚ / ବ୍ୟବହାରଯୋଗ୍ୟ କରିପାରେ, କିମ୍ବା ଅତି କମରେ ଏକ ଅଯ og କ୍ତିକ ସାମଗ୍ରିକ ଫୋକସ୍ ଅର୍ଡର ପାଇଁ | ଏହି କ୍ଷେତ୍ରରେ, ଏହା ପରିବର୍ତ୍ତେ ଏକ ମୋଡାଲ୍ ସଂଳାପ ବ୍ୟବହାର କରିବାକୁ ବିଚାର କରନ୍ତୁ |
ବିକଳ୍ପଗୁଡ଼ିକ
ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-
ଯେପରି ଯୋଡନ୍ତୁ data-animation=""
|
sanitize
,
sanitizeFn
ଏବଂ
whiteList
ବିକଳ୍ପଗୁଡ଼ିକ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରି ଯୋଗାଇ ଦିଆଯାଇପାରିବ ନାହିଁ |
ନାମ | ଟାଇପ୍ କରନ୍ତୁ | | ଡିଫଲ୍ଟ | | ବର୍ଣ୍ଣନା |
---|---|---|---|
ଆନିମେସନ୍ | ବୁଲିଅନ୍ | ସତ | ପପଓଭରକୁ ଏକ CSS ଦୁର୍ବଳ ପରିବର୍ତ୍ତନ ପ୍ରୟୋଗ କରନ୍ତୁ | |
ପାତ୍ର | string | ଉପାଦାନ | ମିଥ୍ୟା | ମିଥ୍ୟା | ପପଓଭରକୁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଉପାଦାନରେ ଯୋଡେ | ଉଦାହରଣ : |
ବିଷୟବସ୍ତୁ | string | ଉପାଦାନ | କାର୍ଯ୍ୟ | '' |
ଯଦି ଏକ ଫଙ୍କସନ୍ ଦିଆଯାଏ, ତେବେ ଏହାର ଉପାଦାନ ସହିତ ଏହାର ରେଫରେନ୍ସ ସେଟ୍ ସହିତ ଡକାଯିବ |
ବିଳମ୍ବ | ସଂଖ୍ୟା | ବସ୍ତୁ | 0 | ପପଓଭର (ms) ଦେଖାଇବା ଏବଂ ଲୁଚାଇବାରେ ବିଳମ୍ବ - ମାନୁଆଲ ଟ୍ରିଗର ପ୍ରକାର ପାଇଁ ପ୍ରଯୁଜ୍ୟ ନୁହେଁ | ଯଦି ଏକ ସଂଖ୍ୟା ଯୋଗାଇ ଦିଆଯାଏ, ଉଭୟ ଲୁଚାଇବା / ଶୋ ପାଇଁ ବିଳମ୍ବ ପ୍ରୟୋଗ କରାଯାଏ | ବସ୍ତୁ ଗଠନ ହେଉଛି: |
html | ବୁଲିଅନ୍ | ମିଥ୍ୟା | ପପଓଭରରେ HTML ସନ୍ନିବେଶ କରନ୍ତୁ | text ଯଦି ମିଥ୍ୟା, DQ ରେ ବିଷୟବସ୍ତୁ ସନ୍ନିବେଶ କରିବାକୁ jQuery ର ପଦ୍ଧତି ବ୍ୟବହୃତ ହେବ | ଯଦି ଆପଣ XSS ଆକ୍ରମଣ ବିଷୟରେ ଚିନ୍ତିତ ତେବେ ପାଠ ବ୍ୟବହାର କରନ୍ତୁ | |
ସ୍ଥାନ | string | କାର୍ଯ୍ୟ | 'ଠିକ୍' | ପପୋଭରକୁ କିପରି ସ୍ଥାନିତ କରିବେ - ଅଟୋ | ଶୀର୍ଷ | ତଳ | ବାମ | ଠିକ୍ ଯେତେବେଳେ ପ୍ଲେସମେଣ୍ଟ ନିର୍ଣ୍ଣୟ କରିବା ପାଇଁ ଏକ ଫଙ୍କସନ୍ ବ୍ୟବହୃତ ହୁଏ, ଏହାକୁ ପପଓଭର DOM ନୋଡ ସହିତ ଏହାର ପ୍ରଥମ ଆର୍ଗୁମେଣ୍ଟ ଏବଂ ଟ୍ରାଇଜିଂ ଉପାଦାନ DOM ନୋଡକୁ ଦ୍ୱିତୀୟ ଭାବରେ କୁହାଯାଏ | |
ଚୟନକର୍ତ୍ତା | | string | ମିଥ୍ୟା | ମିଥ୍ୟା | ଯଦି ଏକ ଚୟନକର୍ତ୍ତା ପ୍ରଦାନ କରାଯାଏ, ପପଓଭର ବସ୍ତୁଗୁଡିକ ନିର୍ଦ୍ଦିଷ୍ଟ ଲକ୍ଷ୍ୟସ୍ଥଳରେ ନ୍ୟସ୍ତ ହେବ | ଅଭ୍ୟାସରେ, ପପୋଭର୍ସ ଯୋଡିବାକୁ ଗତିଶୀଳ HTML ବିଷୟବସ୍ତୁକୁ ସକ୍ଷମ କରିବାକୁ ଏହା ବ୍ୟବହୃତ ହୁଏ | ଏହାକୁ ଏବଂ ଏକ ସୂଚନାପୂର୍ଣ୍ଣ ଉଦାହରଣ ଦେଖନ୍ତୁ | |
ଟେମ୍ପଲେଟ୍ | | ଷ୍ଟ୍ରିଙ୍ଗ୍ | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
ପପଓଭର ସୃଷ୍ଟି କରିବା ସମୟରେ ବ୍ୟବହାର କରିବାକୁ HTML କୁ ଆଧାର କରନ୍ତୁ | ପପୋଭରର ପପୋଭରର
ବାହ୍ୟ ରାପର୍ ଉପାଦାନର |
ଆଖ୍ୟା | string | ଉପାଦାନ | କାର୍ଯ୍ୟ | '' |
ଯଦି ଏକ ଫଙ୍କସନ୍ ଦିଆଯାଏ, ତେବେ ଏହାର ଉପାଦାନ ସହିତ ଏହାର ରେଫରେନ୍ସ ସେଟ୍ ସହିତ ଡକାଯିବ |
ଟ୍ରିଗର | ଷ୍ଟ୍ରିଙ୍ଗ୍ | 'କ୍ଲିକ୍' | ପପଓଭର କିପରି ଟ୍ରିଗର ହୁଏ - କ୍ଲିକ୍ କରନ୍ତୁ | ହୋଭର | ଧ୍ୟାନ | ମାନୁଆଲ୍ | ଆପଣ ଏକାଧିକ ଟ୍ରିଗର ପାସ୍ କରିପାରନ୍ତି; ସେମାନଙ୍କୁ ଏକ ସ୍ପେସ୍ ସହିତ ଅଲଗା କର | manual ଅନ୍ୟ କ trig ଣସି ଟ୍ରିଗର ସହିତ ମିଳିତ ହୋଇପାରିବ ନାହିଁ | |
ଅଫସେଟ | ସଂଖ୍ୟା | ଷ୍ଟ୍ରିଙ୍ଗ୍ | 0 | ଏହାର ଟାର୍ଗେଟ୍ ସହିତ ପପଓଭରର ଅଫସେଟ୍ | ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ ର ଅଫସେଟ୍ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ | |
ପତନ | string | ଆରେ | 'ଫ୍ଲିପ୍' | ପପ୍ପର କେଉଁ ଅବସ୍ଥାରେ ଫଲବ୍ୟାକ୍ ବ୍ୟବହାର କରିବ ତାହା ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ଅନୁମତି ଦିଅନ୍ତୁ | ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ଙ୍କ ଆଚରଣ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ | |
କଷ୍ଟମ୍ କ୍ଲାସ୍ | | string | କାର୍ଯ୍ୟ | '' | ଯେତେବେଳେ ଏହା ଦେଖାଯାଏ ପପ୍ ଓଭରରେ କ୍ଲାସ୍ ଯୋଡନ୍ତୁ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଟେମ୍ପଲେଟରେ ନିର୍ଦ୍ଦିଷ୍ଟ ଯେକ classes ଣସି ଶ୍ରେଣୀ ସହିତ ଏହି ଶ୍ରେଣୀଗୁଡ଼ିକ ଯୋଗ କରାଯିବ | ଏକାଧିକ ଶ୍ରେଣୀ ଯୋଡିବାକୁ, ସେମାନଙ୍କୁ ସ୍ପେସ୍ ସହିତ ଅଲଗା କରନ୍ତୁ : ଆପଣ ଏକ ଫଙ୍କସନ୍ ମଧ୍ୟ ପାସ୍ କରିପାରିବେ ଯାହା ଅତିରିକ୍ତ ଶ୍ରେଣୀ ନାମ ଧାରଣ କରିଥିବା ଗୋଟିଏ ଷ୍ଟ୍ରିଙ୍ଗକୁ ଫେରାଇବା ଉଚିତ | |
ସୀମା | string | ଉପାଦାନ | 'ସ୍କ୍ରୋଲ୍ ପ୍ୟାରେଣ୍ଟ୍' | ପପୋଭରର ଓଭରଫ୍ଲୋ ସୀମାବଦ୍ଧ ସୀମା | 'viewport' ,, କିମ୍ବା ଏକ HTMLElement ରେଫରେନ୍ସ (କେବଳ ଜାଭାସ୍କ୍ରିପ୍ଟ) 'window' ର ମୂଲ୍ୟ ଗ୍ରହଣ କରେ | 'scrollParent' ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ ର ପ୍ରତିରୋଧ ଓଭରଫ୍ଲୋ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ | |
ପରିମଳ | ବୁଲିଅନ୍ | ସତ | ପରିମଳକରଣକୁ ସକ୍ଷମ କିମ୍ବା ଅକ୍ଷମ କରନ୍ତୁ | ଯଦି ସକ୍ରିୟ ହୁଏ 'template' , 'content' ଏବଂ 'title' ବିକଳ୍ପଗୁଡିକ ସାନିଟାଇଜ୍ ହେବ | ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ରେ ସାନିଟାଇଜର୍ ବିଭାଗ ଦେଖନ୍ତୁ | |
ଧଳା ତାଲିକା | | ବସ୍ତୁ | ଡିଫଲ୍ଟ ମୂଲ୍ୟ | ଅବଜେକ୍ଟ ଯାହା ଅନୁମତିପ୍ରାପ୍ତ ଗୁଣ ଏବଂ ଟ୍ୟାଗ୍ ଧାରଣ କରେ | |
sanitizeFn | null | କାର୍ଯ୍ୟ | ଶୂନ୍ୟ | ଏଠାରେ ଆପଣ ନିଜର ସାନିଟାଇଜ୍ ଫଙ୍କସନ୍ ଯୋଗାଇ ପାରିବେ | ସାନିଟାଇଜେସନ୍ କରିବା ପାଇଁ ଯଦି ଆପଣ ଏକ ଉତ୍ସର୍ଗୀକୃତ ଲାଇବ୍ରେରୀ ବ୍ୟବହାର କରିବାକୁ ପସନ୍ଦ କରନ୍ତି ତେବେ ଏହା ଉପଯୋଗୀ ହୋଇପାରେ | |
popperConfig | null | ବସ୍ତୁ | ଶୂନ୍ୟ | ବୁଟଷ୍ଟ୍ରାପ୍ ର ଡିଫଲ୍ଟ ପପର୍ କନଫିଗ୍ ପରିବର୍ତ୍ତନ କରିବାକୁ, ପପର୍ ର ବିନ୍ୟାସ ଦେଖନ୍ତୁ | |
ବ୍ୟକ୍ତିଗତ ପପୋଭର ପାଇଁ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ |
ବ୍ୟକ୍ତିଗତ ପପୋଭରଗୁଡ଼ିକ ପାଇଁ ବିକଳ୍ପଗୁଡ଼ିକ ବିକଳ୍ପ ଭାବରେ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର ଦ୍ୱାରା ନିର୍ଦ୍ଦିଷ୍ଟ କରାଯାଇପାରିବ, ଯେପରି ଉପରେ ବର୍ଣ୍ଣନା କରାଯାଇଛି |
ପ୍ରଣାଳୀ
ଅସନ୍ତୁଳିତ ପଦ୍ଧତି ଏବଂ ସ୍ଥାନାନ୍ତରଣ |
ସମସ୍ତ API ପଦ୍ଧତିଗୁଡିକ ଅସନ୍ତୁଳିତ ଏବଂ ଏକ ପରିବର୍ତ୍ତନ ଆରମ୍ଭ କରନ୍ତି | ସଂକ୍ରମଣ ଆରମ୍ଭ ହେବା ମାତ୍ରେ ସେମାନେ କଲର୍ ନିକଟକୁ ଫେରିଯାଆନ୍ତି କିନ୍ତୁ ଏହା ଶେଷ ହେବା ପୂର୍ବରୁ | ଏହା ସହିତ, ଏକ ପରିବର୍ତ୍ତନକାରୀ ଉପାଦାନ ଉପରେ ଏକ ପଦ୍ଧତି କଲ୍ କୁ ଅଣଦେଖା କରାଯିବ |
$().popover(options)
ଏକ ଉପାଦାନ ସଂଗ୍ରହ ପାଇଁ ପପୋଭର ଆରମ୍ଭ କରେ |
.popover('show')
ଏକ ଉପାଦାନର ପପ୍ ଓଭର ପ୍ରକାଶ କରେ | ପପଓଭର ପ୍ରକୃତରେ ଦେଖାଯିବା ପୂର୍ବରୁ କଲର୍ କୁ ଫେରିଥାଏ (ଅର୍ଥାତ୍ shown.bs.popover
ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) | ଏହା ପପଓଭରର ଏକ “ମାନୁଆଲ୍” ଟ୍ରିଗର୍ ଭାବରେ ବିବେଚନା କରାଯାଏ | ପପୋଭର ଯାହାର ଟାଇଟଲ୍ ଏବଂ ବିଷୟବସ୍ତୁ ଉଭୟ ଶୂନ-ଲମ୍ବ କେବେବି ପ୍ରଦର୍ଶିତ ହୁଏ ନାହିଁ |
$('#element').popover('show')
.popover('hide')
ଏକ ଉପାଦାନର ପପ୍ ଓଭର ଲୁଚାଏ | ପପଓଭର ପ୍ରକୃତରେ ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ hidden.bs.popover
ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ | ଏହା ପପଓଭରର ଏକ “ମାନୁଆଲ୍” ଟ୍ରିଗର୍ ଭାବରେ ବିବେଚନା କରାଯାଏ |
$('#element').popover('hide')
.popover('toggle')
ଏକ ଉପାଦାନର ପପ୍ ଓଭର ଟୋଗଲ୍ କରେ | ପପଓଭର ପ୍ରକୃତରେ ଦେଖାଯିବା କିମ୍ବା ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ shown.bs.popover
କିମ୍ବା hidden.bs.popover
ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ | ଏହା ପପଓଭରର ଏକ “ମାନୁଆଲ୍” ଟ୍ରିଗର୍ ଭାବରେ ବିବେଚନା କରାଯାଏ |
$('#element').popover('toggle')
.popover('dispose')
ଏକ ଉପାଦାନର ପପଓଭର ଲୁଚାଇଥାଏ ଏବଂ ନଷ୍ଟ କରେ | ପ୍ରତିନିଧୀ ବ୍ୟବହାର କରୁଥିବା ପପୋଭରଗୁଡିକ (ଯାହା ବିକଳ୍ପ ବ୍ୟବହାର କରିselector
ସୃଷ୍ଟି ହୋଇଥାଏ ) ବଂଶଧର ଟ୍ରିଗର ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ପୃଥକ ଭାବରେ ନଷ୍ଟ ହୋଇପାରିବ ନାହିଁ |
$('#element').popover('dispose')
.popover('enable')
ଏକ ଉପାଦାନର ପପଓଭର ଦେଖାଇବାକୁ କ୍ଷମତା ଦେଇଥାଏ | ଡିଫଲ୍ଟ ଭାବରେ ପପୋଭର୍ସ ସକ୍ଷମ ହୋଇଛି |
$('#element').popover('enable')
.popover('disable')
ଏକ ଉପାଦାନର ପପଓଭର ଦେଖାଯିବାର କ୍ଷମତା ଅପସାରଣ କରେ | ପୁନ re- ସକ୍ଷମ ହେଲେ ପପ୍ ଓଭର କେବଳ ଦେଖାଯିବାକୁ ସମର୍ଥ ହେବ |
$('#element').popover('disable')
.popover('toggleEnabled')
ଏକ ଉପାଦାନର ପପଓଭର ଦେଖାଯିବା କିମ୍ବା ଲୁଚାଇବା ପାଇଁ କ୍ଷମତାକୁ ଟୋଗଲ୍ କରେ |
$('#element').popover('toggleEnabled')
.popover('update')
ଏକ ଉପାଦାନର ପପଓଭରର ସ୍ଥିତିକୁ ଅଦ୍ୟତନ କରେ |
$('#element').popover('update')
ଘଟଣା
ଇଭେଣ୍ଟ ପ୍ରକାର | | ବର୍ଣ୍ଣନା |
---|---|
show.bs.popover | show ଉଦାହରଣ ପଦ୍ଧତି ଡାକିବା ପରେ ଏହି ଘଟଣା ତୁରନ୍ତ ନିଆଁ ଲାଗେ | |
show.bs.popover | ଯେତେବେଳେ ଉପଭୋକ୍ତାଙ୍କୁ ପପଓଭର ଦୃଶ୍ୟମାନ ହେଲା ସେତେବେଳେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) | |
hide.bs.popover | hide ଉଦାହରଣ ପଦ୍ଧତି ଡକାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟ ତୁରନ୍ତ ବରଖାସ୍ତ ହୁଏ | |
hidden.bs.popover | ଯେତେବେଳେ ପପଓଭର ବ୍ୟବହାରକାରୀଙ୍କଠାରୁ ଲୁକ୍କାୟିତ ହୋଇସାରିଛି (CSS ସ୍ଥାନାନ୍ତରଣକୁ ଅପେକ୍ଷା କରିବ) |
inserted.bs.popover | show.bs.popover ଯେତେବେଳେ ପପ୍ ଓଭର ଟେମ୍ପଲେଟ୍ DOM ରେ ଯୋଡା ଯାଇଛି , ଇଭେଣ୍ଟ ପରେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ | |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})