ଜାଭାସ୍କ୍ରିପ୍ଟ |
ଆମର ବ Java କଳ୍ପିକ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ଆଣ | ପ୍ରତ୍ୟେକ ପ୍ଲଗଇନ୍, ଆମର ତଥ୍ୟ ଏବଂ ପ୍ରୋଗ୍ରାମେଟିକ୍ API ବିକଳ୍ପ, ଏବଂ ଅଧିକ ବିଷୟରେ ଶିଖନ୍ତୁ |
ବ୍ୟକ୍ତିଗତ କିମ୍ବା ସଂକଳିତ |
ପ୍ଲଗଇନଗୁଡିକ ପୃଥକ ଭାବରେ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇପାରେ (ବୁଟଷ୍ଟ୍ରାପ୍ ର ବ୍ୟକ୍ତିଗତ ବ୍ୟବହାର କରି js/dist/*.js), କିମ୍ବା ଏକାଥରେ ବ୍ୟବହାର bootstrap.jsକିମ୍ବା ମାଇନିଫାଏଡ୍ bootstrap.min.js(ଉଭୟ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ ନାହିଁ) |
ଯଦି ଆପଣ ଏକ ବଣ୍ଡଲର୍ (ୱେବପ୍ୟାକ୍, ପାର୍ସଲ୍, ଭିଟ୍…) ବ୍ୟବହାର କରନ୍ତି, ତେବେ ଆପଣ /js/dist/*.jsUMD ପ୍ରସ୍ତୁତ ଫାଇଲଗୁଡିକ ବ୍ୟବହାର କରିପାରିବେ |
ଜାଭାସ୍କ୍ରିପ୍ଟ framework ାଞ୍ଚା ସହିତ ବ୍ୟବହାର |
ଯେକ any ଣସି framework ାଞ୍ଚା ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ CSS ବ୍ୟବହାର କରାଯାଇପାରିବ, ବୁଟଷ୍ଟ୍ରାପ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ରିଆକ୍ଟ, ଭ୍ୟୁ, ଏବଂ ଆଙ୍ଗୁଲାର ପରି ଜାଭାସ୍କ୍ରିପ୍ଟ framework ାଞ୍ଚା ସହିତ ସମ୍ପୂର୍ଣ୍ଣ ସୁସଙ୍ଗତ ନୁହେଁ ଯାହା DOM ବିଷୟରେ ସମ୍ପୂର୍ଣ୍ଣ ଜ୍ଞାନ ଧାରଣ କରିଥାଏ | ଉଭୟ ବୁଟଷ୍ଟ୍ରାପ୍ ଏବଂ framework ାଞ୍ଚା ସମାନ DOM ଉପାଦାନକୁ ପରିବର୍ତ୍ତନ କରିବାକୁ ଚେଷ୍ଟା କରିପାରନ୍ତି, ଫଳସ୍ୱରୂପ ଡ୍ରପ୍ ଡାଉନ୍ ପରି ତ୍ରୁଟି ଯାହା “ଖୋଲା” ଅବସ୍ଥାରେ ଅଟକି ରହିଥାଏ |
ଏହି ପ୍ରକାର framework ାଞ୍ଚା ବ୍ୟବହାର କରୁଥିବା ଲୋକଙ୍କ ପାଇଁ ଏକ ଉତ୍ତମ ବିକଳ୍ପ ହେଉଛି ବୁଟଷ୍ଟ୍ରାପ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ପରିବର୍ତ୍ତେ ଏକ framework ାଞ୍ଚା-ନିର୍ଦ୍ଦିଷ୍ଟ ପ୍ୟାକେଜ୍ ବ୍ୟବହାର କରିବା | ଏଠାରେ କେତେକ ଲୋକପ୍ରିୟ ବିକଳ୍ପଗୁଡ଼ିକ ଅଛି:
- ପ୍ରତିକ୍ରିୟା: ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ପ୍ରତିକ୍ରିୟା କରନ୍ତୁ |
- ମୂଲ୍ୟ: ବୁଟଷ୍ଟ୍ରାପ୍ ଭ୍ୟୁ (ବର୍ତ୍ତମାନ କେବଳ Vue 2 ଏବଂ Bootstrap 4 କୁ ସମର୍ଥନ କରେ)
- କୋଣାର୍କ: ng-bootstrap |
ଏକ ମଡ୍ୟୁଲ୍ ଭାବରେ ବୁଟଷ୍ଟ୍ରାପ୍ ବ୍ୟବହାର କରିବା |
ESMଆମେ ( bootstrap.esm.jsଏବଂ ) ଭାବରେ ନିର୍ମିତ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଏକ ସଂସ୍କରଣ ପ୍ରଦାନ କରୁ bootstrap.esm.min.jsଯାହା ଆପଣଙ୍କୁ ବୁଟଷ୍ଟ୍ରାପକୁ ବ୍ରାଉଜରରେ ଏକ ମଡ୍ୟୁଲ୍ ଭାବରେ ବ୍ୟବହାର କରିବାକୁ ଅନୁମତି ଦେଇଥାଏ, ଯଦି ଆପଣଙ୍କର ଟାର୍ଗେଟେଡ୍ ବ୍ରାଉଜର୍ ଏହାକୁ ସମର୍ଥନ କରେ |
<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>
JS ବଣ୍ଡଲର୍ ତୁଳନାରେ, ବ୍ରାଉଜରରେ ESM ବ୍ୟବହାର କରିବା ଦ୍ୱାରା ମଡ୍ୟୁଲ୍ ନାମ ବଦଳରେ ପୂର୍ଣ୍ଣ ପଥ ଏବଂ ଫାଇଲନାମ ବ୍ୟବହାର କରିବା ଆବଶ୍ୟକ | ବ୍ରାଉଜରରେ JS ମଡ୍ୟୁଲ୍ ବିଷୟରେ ଅଧିକ ପ .଼ନ୍ତୁ | ସେଥିପାଇଁ ଆମେ ଉପରୋକ୍ତ 'bootstrap.esm.min.js'ପରିବର୍ତ୍ତେ ବ୍ୟବହାର କରୁ | 'bootstrap'ତଥାପି, ଏହା ଆମର ପପର୍ ନିର୍ଭରଶୀଳତା ଦ୍ୱାରା ଆହୁରି ଜଟିଳ, ଯାହା ପପର୍ କୁ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟରେ ଆମଦାନୀ କରେ:
import * as Popper from "@popperjs/core"
ଯଦି ଆପଣ ଏହାକୁ ଯେପରି ଚେଷ୍ଟା କରନ୍ତି, ଆପଣ ନିମ୍ନଲିଖିତ ପରି କନସୋଲରେ ଏକ ତ୍ରୁଟି ଦେଖିବେ:
Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".
ଏହାକୁ ସମାଧାନ କରିବା ପାଇଁ, ଆପଣ importmapପଥଗୁଡିକ ସଂପୂର୍ଣ୍ଣ କରିବାକୁ ଇଚ୍ଛାଧୀନ ମଡ୍ୟୁଲ୍ ନାମଗୁଡିକ ସମାଧାନ କରିବାକୁ ଏକ ବ୍ୟବହାର କରିପାରିବେ | ଯଦି ତୁମର ଟାର୍ଗେଟେଡ୍ ବ୍ରାଉଜର୍ ସମର୍ଥନ କରେ ନାହିଁ importmap, ତୁମକୁ ଏସ୍-ମଡ୍ୟୁଲ୍-ଶିମ୍ ପ୍ରୋଜେକ୍ଟ ବ୍ୟବହାର କରିବାକୁ ପଡିବ | ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଏବଂ ପପର୍ ପାଇଁ ଏହା କିପରି କାମ କରେ ତାହା ଏଠାରେ ଅଛି:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<title>Hello, modularity!</title>
</head>
<body>
<h1>Hello, modularity!</h1>
<button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>
<script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
<script type="importmap">
{
"imports": {
"@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
"bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
}
}
</script>
<script type="module">
import * as bootstrap from 'bootstrap'
new bootstrap.Popover(document.getElementById('popoverButton'))
</script>
</body>
</html>
ନିର୍ଭରଶୀଳତା |
କିଛି ପ୍ଲଗଇନ୍ ଏବଂ CSS ଉପାଦାନ ଅନ୍ୟ ପ୍ଲଗଇନ୍ ଉପରେ ନିର୍ଭର କରେ | ଯଦି ଆପଣ ପୃଥକ ଭାବରେ ପ୍ଲଗଇନ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତି, ଡକସ୍ ରେ ଏହି ନିର୍ଭରଶୀଳତା ଯାଞ୍ଚ କରିବାକୁ ନିଶ୍ଚିତ କରନ୍ତୁ |
ଆମର ଡ୍ରପ୍ ଡାଉନ୍, ପପୋଭର, ଏବଂ ଟୁଲ୍ ଟିପ୍ସ ମଧ୍ୟ ପପର୍ ଉପରେ ନିର୍ଭର କରେ |
ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍
ପ୍ରାୟ ସମସ୍ତ ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ଲଗଇନ୍ ଗୁଡିକ କେବଳ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ସହିତ HTML ମାଧ୍ୟମରେ ସକ୍ଷମ ଏବଂ ବିନ୍ୟାସ କରାଯାଇପାରିବ (ଜାଭାସ୍କ୍ରିପ୍ଟ କାର୍ଯ୍ୟକାରିତା ବ୍ୟବହାର କରିବାର ଆମର ପସନ୍ଦିତ ଉପାୟ) | ଗୋଟିଏ ଉପାଦାନରେ କେବଳ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ର ଏକ ସେଟ୍ ବ୍ୟବହାର କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ (ଉଦାହରଣ ସ୍ୱରୂପ, ଆପଣ ସମାନ ବଟନ୍ ରୁ ଏକ ଟୁଲ୍ ଟିପ୍ ଏବଂ ମୋଡାଲ୍ ଟ୍ରିଗର କରିପାରିବେ ନାହିଁ |)
ଯେହେତୁ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଅପ୍ସନ୍ ପାସ୍ ହୋଇପାରିବ, ତୁମେ ଯେପରି ଏକ ଅପ୍ସନ୍ ନାମ ଯୋଡି data-bs-ପାରିବ data-bs-animation="{value}"| ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ ଅପ୍ସନ୍ ପାସ୍ କରିବାବେଳେ ଅପ୍ସନ୍ ନାମର କେସ୍ ପ୍ରକାରକୁ “ camelCase ” ରୁ “ kebab-case ” କୁ ପରିବର୍ତ୍ତନ କରିବାକୁ ନିଶ୍ଚିତ କରନ୍ତୁ | ଉଦାହରଣ ସ୍ୱରୂପ, ଏହା ପରିବର୍ତ୍ତେ ବ୍ୟବହାର data-bs-custom-class="beautifier"କରନ୍ତୁ data-bs-customClass="beautifier"|
ବୁଟଷ୍ଟ୍ରାପ୍ 5.2.0 ପରି, ସମସ୍ତ ଉପାଦାନଗୁଡିକ ଏକ ପରୀକ୍ଷାମୂଳକ ସଂରକ୍ଷିତ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କୁ ସମର୍ଥନ data-bs-configକରେ ଯାହା JSON ଷ୍ଟ୍ରିଙ୍ଗ ଭାବରେ ସରଳ ଉପାଦାନ ସଂରଚନାକୁ ଧାରଣ କରିପାରିବ | ଯେତେବେଳେ ଏକ ଉପାଦାନର ଗୁଣ data-bs-config='{"delay":0, "title":123}'ଏବଂ data-bs-title="456"ଗୁଣ ଅଛି, ଅନ୍ତିମ titleମୂଲ୍ୟ ହେବ 456ଏବଂ ପୃଥକ ଡାଟା ଗୁଣଗୁଡ଼ିକ ଦିଆଯାଇଥିବା ମୂଲ୍ୟଗୁଡ଼ିକୁ ନବଲିଖନ କରିବ data-bs-config| ଏହା ସହିତ, ବିଦ୍ୟମାନ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ଗୁଡିକ JSON ମୂଲ୍ୟ ପରି ଘର କରିବାକୁ ସକ୍ଷମ data-bs-delay='{"show":0,"hide":150}'|
ଚୟନକର୍ତ୍ତା |
କାର୍ଯ୍ୟଦକ୍ଷତା କାରଣରୁ DOM ଉପାଦାନଗୁଡ଼ିକୁ ପଚରାଯିବା ପାଇଁ ଆମେ ଦେଶୀ querySelectorଏବଂ ପଦ୍ଧତି ବ୍ୟବହାର କରୁ, ତେଣୁ ଆପଣଙ୍କୁ ବ valid ଧ ଚୟନକର୍ତ୍ତା ବ୍ୟବହାର କରିବାକୁ ପଡିବ | ଯଦି ଆପଣ ସ୍ special ତନ୍ତ୍ର ଚୟନକର୍ତ୍ତା ବ୍ୟବହାର କରନ୍ତି , ତେବେ ସେଗୁଡିକରୁ ରକ୍ଷା ପାଇବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |querySelectorAllcollapse:Example
ଘଟଣା
ଅଧିକାଂଶ ପ୍ଲଗଇନ୍ ର ଅନନ୍ୟ କାର୍ଯ୍ୟ ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ କଷ୍ଟମ୍ ଇଭେଣ୍ଟ ପ୍ରଦାନ କରେ | ସାଧାରଣତ ,, ଏଗୁଡିକ ଏକ ଅସୀମ ଏବଂ ଅତୀତର ଅଂଶଗ୍ରହଣ ଫର୍ମରେ ଆସିଥାଏ - ଯେଉଁଠାରେ showଏକ ଇଭେଣ୍ଟ ଆରମ୍ଭରେ ଅସୀମ (ଉଦାହରଣ) ଟ୍ରିଗର ହୋଇଥାଏ, ଏବଂ ଏହାର ଅତୀତ ଅଂଶଗ୍ରହଣ ଫର୍ମ (ଉଦାହରଣ shown) ଏକ କାର୍ଯ୍ୟ ସମାପ୍ତ ହେବା ପରେ ଟ୍ରିଗର ହୋଇଥାଏ |
ସମସ୍ତ ଅସୀମ ଘଟଣାଗୁଡ଼ିକ କାର୍ଯ୍ୟକାରିତା ପ୍ରଦାନ କରେ preventDefault()| ଏହା ଆରମ୍ଭ ହେବା ପୂର୍ବରୁ ଏକ କାର୍ଯ୍ୟର ନିଷ୍ପାଦନକୁ ବନ୍ଦ କରିବାର କ୍ଷମତା ପ୍ରଦାନ କରିଥାଏ | ଏକ ଇଭେଣ୍ଟ ହ୍ୟାଣ୍ଡେଲର୍ ଠାରୁ ମିଥ୍ୟା ଫେରସ୍ତ କରିବା ମଧ୍ୟ ସ୍ୱୟଂଚାଳିତ ଭାବରେ କଲ୍ କରିବ preventDefault()|
const myModal = document.querySelector('#myModal')
myModal.addEventListener('show.bs.modal', event => {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
})
ପ୍ରୋଗ୍ରାମେଟିକ୍ API
ସମସ୍ତ କନଷ୍ଟ୍ରକ୍ଟର୍ସ ଏକ ଇଚ୍ଛାଧୀନ ବିକଳ୍ପ ବସ୍ତୁ କିମ୍ବା କିଛି ଗ୍ରହଣ କରନ୍ତି ନାହିଁ (ଯାହା ଏହାର ଡିଫଲ୍ଟ ଆଚରଣ ସହିତ ଏକ ପ୍ଲଗଇନ୍ ଆରମ୍ଭ କରେ):
const myModalEl = document.querySelector('#myModal')
const modal = new bootstrap.Modal(myModalEl) // initialized with defaults
const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard
ଯଦି ଆପଣ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ପ୍ଲଗଇନ୍ ଉଦାହରଣ ପାଇବାକୁ ଚାହାଁନ୍ତି, ପ୍ରତ୍ୟେକ ପ୍ଲଗଇନ୍ ଏକ getInstanceପଦ୍ଧତିକୁ ପ୍ରକାଶ କରେ | ଉଦାହରଣ ସ୍ୱରୂପ, ଏକ ଉପାଦାନରୁ ସିଧାସଳଖ ଏକ ଉଦାହରଣ ପୁନରୁଦ୍ଧାର କରିବାକୁ:
bootstrap.Popover.getInstance(myPopoverEl)
nullଯଦି ଅନୁରୋଧ କରାଯାଇଥିବା ଉପାଦାନ ଉପରେ ଏକ ଉଦାହରଣ ଆରମ୍ଭ ନହୁଏ ତେବେ ଏହି ପଦ୍ଧତି ଫେରି ଆସିବ |
ବ ly କଳ୍ପିକ ଭାବରେ getOrCreateInstance, ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ଉଦାହରଣ ପାଇବାକୁ ବ୍ୟବହାର କରାଯାଇପାରିବ, କିମ୍ବା ଯଦି ଏହା ପ୍ରାରମ୍ଭ ହୋଇନଥାନ୍ତା ଏକ ନୂତନ ସୃଷ୍ଟି କରିବାକୁ ବ୍ୟବହାର କରାଯାଇପାରିବ |
bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)
ଯଦି ଏକ ଉଦାହରଣ ପ୍ରାରମ୍ଭ ହୋଇନଥାଏ, ଏହା ଦ୍ୱିତୀୟ ଯୁକ୍ତି ଭାବରେ ଏକ ଇଚ୍ଛାଧୀନ ବିନ୍ୟାସ ବସ୍ତୁକୁ ଗ୍ରହଣ ଏବଂ ବ୍ୟବହାର କରିପାରେ |
ନିର୍ମାଣକାରୀମାନଙ୍କରେ CSS ଚୟନକର୍ତ୍ତା |
getInstanceପଦ୍ଧତି ଏବଂ ପଦ୍ଧତି ସହିତ , ସମସ୍ତ ପ୍ଲଗଇନ୍ କନଷ୍ଟ୍ରକ୍ଟର୍ସ ପ୍ରଥମ ଆର୍ଗୁମେଣ୍ଟ ଭାବରେ getOrCreateInstanceଏକ DOM ଉପାଦାନ କିମ୍ବା ଏକ ବ valid ଧ CSS ଚୟନକର୍ତ୍ତା ଗ୍ରହଣ କରିପାରନ୍ତି | ପଦ୍ଧତି ସହିତ ପ୍ଲଗଇନ୍ ଉପାଦାନଗୁଡିକ ମିଳିଥାଏ କାରଣ querySelectorଆମର ପ୍ଲଗଇନ୍ଗୁଡ଼ିକ କେବଳ ଗୋଟିଏ ଉପାଦାନକୁ ସମର୍ଥନ କରନ୍ତି |
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
ଅସନ୍ତୁଳିତ କାର୍ଯ୍ୟ ଏବଂ ସ୍ଥାନାନ୍ତରଣ |
ସମସ୍ତ ପ୍ରୋଗ୍ରାମେଟିକ୍ API ପଦ୍ଧତିଗୁଡ଼ିକ ଅସନ୍ତୁଳିତ ଏବଂ ସଂକ୍ରମଣ ଆରମ୍ଭ ହେବା ପରେ କଲର୍ କୁ ଫେରିଯାଆନ୍ତୁ, କିନ୍ତୁ ଏହା ଶେଷ ହେବା ପୂର୍ବରୁ | ସଂକ୍ରମଣ ସଂପୂର୍ଣ୍ଣ ହେବା ପରେ ଏକ କ୍ରିୟାକୁ ଏକଜେକ୍ୟୁଟ୍ କରିବା ପାଇଁ, ଆପଣ ସଂପୃକ୍ତ ଇଭେଣ୍ଟକୁ ଶୁଣିପାରିବେ |
const myCollapseEl = document.querySelector('#myCollapse')
myCollapseEl.addEventListener('shown.bs.collapse', event => {
// Action to execute once the collapsible area is expanded
})
ଏହା ସହିତ, ଏକ ପରିବର୍ତ୍ତନକାରୀ ଉପାଦାନ ଉପରେ ଏକ ପଦ୍ଧତି କଲ୍ କୁ ଅଣଦେଖା କରାଯିବ |
const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance
myCarouselEl.addEventListener('slid.bs.carousel', event => {
carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})
carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!
disposeପଦ୍ଧତି
disposeପଦ୍ଧତିକୁ ତୁରନ୍ତ ବ୍ୟବହାର କରିବା ସଠିକ୍ ମନେହୁଏ hide(), ଏହା ଭୁଲ୍ ଫଳାଫଳକୁ ନେଇଯିବ | ସମସ୍ୟା ବ୍ୟବହାରର ଏକ ଉଦାହରଣ ଏଠାରେ ଅଛି:
const myModal = document.querySelector('#myModal')
myModal.hide() // it is asynchronous
myModal.addEventListener('shown.bs.hidden', event => {
myModal.dispose()
})
ଡିଫଲ୍ଟ ସେଟିଂସମୂହ |
Constructor.Defaultପ୍ଲଗଇନ୍ ର ବସ୍ତୁକୁ ପରିବର୍ତ୍ତନ କରି ଆପଣ ଏକ ପ୍ଲଗଇନ୍ ପାଇଁ ଡିଫଲ୍ଟ ସେଟିଂସମୂହ ପରିବର୍ତ୍ତନ କରିପାରିବେ :
// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false
ପଦ୍ଧତି ଏବଂ ଗୁଣ |
ପ୍ରତ୍ୟେକ ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ଲଗଇନ୍ ନିମ୍ନଲିଖିତ ପଦ୍ଧତି ଏବଂ ଷ୍ଟାଟିକ୍ ଗୁଣଗୁଡିକ ପ୍ରକାଶ କରେ |
| ପଦ୍ଧତି | ବର୍ଣ୍ଣନା |
|---|---|
dispose |
ଏକ ଉପାଦାନର ମୋଡାଲ୍ ନଷ୍ଟ କରେ | (DOM ଉପାଦାନରେ ଗଚ୍ଛିତ ତଥ୍ୟ ଅପସାରଣ କରେ) |
getInstance |
ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ମୋଡାଲ୍ ଇନଷ୍ଟାଣ୍ଟ ପାଇବାକୁ ଅନୁମତି ଦିଏ | |
getOrCreateInstance |
ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ମୋଡାଲ୍ ଇନଷ୍ଟାଣ୍ଟ ପାଇବାକୁ ଅନୁମତି ଦିଏ, କିମ୍ବା ଏହା ପ୍ରାରମ୍ଭ ହୋଇନଥିଲେ ଏକ ନୂତନ ସୃଷ୍ଟି କରିବାକୁ ଅନୁମତି ଦିଏ | |
| ଷ୍ଟାଟିକ୍ ସମ୍ପତ୍ତି | | ବର୍ଣ୍ଣନା |
|---|---|
NAME |
ପ୍ଲଗଇନ୍ ନାମ ଫେରସ୍ତ କରେ | (ଉଦାହରଣ bootstrap.Tooltip.NAME:) |
VERSION |
ପ୍ରତ୍ୟେକ ବୁଟଷ୍ଟ୍ରାପର ପ୍ଲଗଇନଗୁଡ଼ିକର ସଂସ୍କରଣ ପ୍ଲଗଇନ୍ର କନଷ୍ଟ୍ରକ୍ଟରର ସମ୍ପତ୍ତି ମାଧ୍ୟମରେ ପ୍ରବେଶ କରାଯାଇପାରିବ VERSION(ଉଦାହରଣ bootstrap.Tooltip.VERSION:) |
ସାନିଟାଇଜର
ଟୁଲ୍ ଟିପ୍ସ ଏବଂ ପପୋଭର୍ସ ଆମର ବିଲ୍ଟ-ଇନ୍ ସାନିଟାଇଜର ବ୍ୟବହାର କରେ ଯାହା HTML କୁ ଗ୍ରହଣ କରେ |
ଡିଫଲ୍ଟ allowListମୂଲ୍ୟ ନିମ୍ନଲିଖିତ ଅଟେ:
const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
const DefaultAllowlist = {
// Global attributes allowed on any supplied element below.
'*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
a: ['target', 'href', 'title', 'rel'],
area: [],
b: [],
br: [],
col: [],
code: [],
div: [],
em: [],
hr: [],
h1: [],
h2: [],
h3: [],
h4: [],
h5: [],
h6: [],
i: [],
img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
li: [],
ol: [],
p: [],
pre: [],
s: [],
small: [],
span: [],
sub: [],
sup: [],
strong: [],
u: [],
ul: []
}
ଯଦି ଆପଣ ଏହି ଡିଫଲ୍ଟରେ ନୂତନ ମୂଲ୍ୟ ଯୋଗ କରିବାକୁ ଚାହୁଁଛନ୍ତି ତେବେ ଆପଣ allowListନିମ୍ନଲିଖିତ କାର୍ଯ୍ୟ କରିପାରିବେ:
const myDefaultAllowList = bootstrap.Tooltip.Default.allowList
// To allow table elements
myDefaultAllowList.table = []
// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-option']
// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
const myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)
ଯଦି ଆପଣ ଆମର ସାନିଟାଇଜରକୁ ବାଇପାସ୍ କରିବାକୁ ଚାହାଁନ୍ତି କାରଣ ଆପଣ ଏକ ଉତ୍ସର୍ଗୀକୃତ ଲାଇବ୍ରେରୀ ବ୍ୟବହାର କରିବାକୁ ପସନ୍ଦ କରନ୍ତି, ଉଦାହରଣ ସ୍ୱରୂପ DOMPurify , ଆପଣ ନିମ୍ନଲିଖିତ କାର୍ଯ୍ୟ କରିବା ଉଚିତ୍:
const yourTooltipEl = document.querySelector('#yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn(content) {
return DOMPurify.sanitize(content)
}
})
ବ ally କଳ୍ପିକ ଭାବରେ jQuery ବ୍ୟବହାର କରି |
ବୁଟଷ୍ଟ୍ରାପ୍ 5 ରେ ତୁମର jQuery ଦରକାର ନାହିଁ , କିନ୍ତୁ jQuery ସହିତ ଆମର ଉପାଦାନଗୁଡିକ ବ୍ୟବହାର କରିବା ଏପର୍ଯ୍ୟନ୍ତ ସମ୍ଭବ | ଯଦି ବୁଟଷ୍ଟ୍ରାପ୍ ବସ୍ତୁରେ ଚିହ୍ନଟ jQueryକରେ window, ଏହା jQuery ର ପ୍ଲଗଇନ୍ ସିଷ୍ଟମରେ ଆମର ସମସ୍ତ ଉପାଦାନ ଯୋଗ କରିବ | ଏହା ଆପଣଙ୍କୁ ନିମ୍ନଲିଖିତ କାର୍ଯ୍ୟ କରିବାକୁ ଅନୁମତି ଦିଏ:
$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration
$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration
$('#myTooltip').tooltip('show') // to trigger `show` method
ଆମର ଅନ୍ୟ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ମଧ୍ୟ ସମାନ |
କ conflict ଣସି ବିବାଦ ନାହିଁ |
ବେଳେବେଳେ ଅନ୍ୟ UI framework ାଞ୍ଚା ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିବା ଆବଶ୍ୟକ | ଏହି ପରିସ୍ଥିତିରେ, ନାମପେସ୍ ଧକ୍କା ବେଳେବେଳେ ହୋଇପାରେ | .noConflictଯଦି ଏହା ଘଟେ, ଆପଣ ମୂଲ୍ୟକୁ ଫେରାଇବାକୁ ଚାହୁଁଥିବା ପ୍ଲଗଇନକୁ ଡାକିପାରନ୍ତି |
const bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରୋଟୋଟାଇପ୍ କିମ୍ବା jQuery UI ପରି ତୃତୀୟ-ପକ୍ଷ ଜାଭାସ୍କ୍ରିପ୍ଟ ଲାଇବ୍ରେରୀଗୁଡ଼ିକୁ ଆନୁଷ୍ଠାନିକ ଭାବରେ ସମର୍ଥନ କରେନାହିଁ | ଇଭେଣ୍ଟସମୂହ .noConflictଏବଂ ନାମ ସ୍ଥାନିତ ଇଭେଣ୍ଟଗୁଡିକ ସତ୍ତ୍, େ, ସୁସଙ୍ଗତତା ସମସ୍ୟା ହୋଇପାରେ ଯାହାକୁ ଆପଣ ନିଜେ ଠିକ୍ କରିବାକୁ ଆବଶ୍ୟକ କରନ୍ତି |
jQuery ଘଟଣା |
jQueryଯଦି ବସ୍ତୁରେ ଉପସ୍ଥିତ ଥାଏ windowଏବଂ କ attrib ଣସି data-bs-no-jqueryଆଟ୍ରିବ୍ୟୁଟ୍ ସେଟ୍ ହୋଇନଥାଏ ତେବେ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ jQuery ଚିହ୍ନଟ କରିବ <body>| ଯଦି jQuery ମିଳିବ, ବୁଟଷ୍ଟ୍ରାପ୍ jQuery ର ଇଭେଣ୍ଟ ସିଷ୍ଟମ ଯୋଗୁଁ ଇଭେଣ୍ଟଗୁଡିକ ନିର୍ଗତ କରିବ | ତେଣୁ ଯଦି ଆପଣ ବୁଟଷ୍ଟ୍ରାପର ଇଭେଣ୍ଟଗୁଡିକ ଶୁଣିବାକୁ ଚାହାଁନ୍ତି, ତେବେ ଆପଣଙ୍କୁ ଏହା ବଦଳରେ jQuery ପଦ୍ଧତି ( .on, .one) ବ୍ୟବହାର କରିବାକୁ ପଡିବ addEventListener|
$('#myTab a').on('shown.bs.tab', () => {
// do something...
})
JavaScript ଅକ୍ଷମ ହୋଇଛି |
ଜାଭାସ୍କ୍ରିପ୍ଟ ଅକ୍ଷମ ହେଲେ ବୁଟଷ୍ଟ୍ରାପର ପ୍ଲଗଇନଗୁଡ଼ିକର କ special ଣସି ବିଶେଷ ଫଲବ୍ୟାକ୍ ନାହିଁ | ଯଦି ଆପଣ ଏହି କ୍ଷେତ୍ରରେ ଉପଭୋକ୍ତା ଅଭିଜ୍ଞତା ବିଷୟରେ ଚିନ୍ତା କରନ୍ତି, ତେବେ ଆପଣଙ୍କର ଉପଭୋକ୍ତାମାନଙ୍କୁ <noscript>ପରିସ୍ଥିତି (ଏବଂ କିପରି ଜାଭାସ୍କ୍ରିପ୍ଟକୁ ପୁନ - ସକ୍ଷମ କରିବେ) ବୁ explain ାଇବାକୁ ବ୍ୟବହାର କରନ୍ତୁ, ଏବଂ / କିମ୍ବା ଆପଣଙ୍କର ନିଜସ୍ୱ କଷ୍ଟମ୍ ଫଲବ୍ୟାକ୍ ଯୋଡନ୍ତୁ |