ଅଫକାନଭାସ୍ |
ନାଭିଗେସନ୍, ସପିଂ କାର୍ଟ, ଏବଂ କିଛି କ୍ଲାସ୍ ଏବଂ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ସହିତ ଆପଣଙ୍କ ପ୍ରୋଜେକ୍ଟରେ ଲୁକ୍କାୟିତ ପାର୍ଶ୍ୱ ଦଣ୍ଡିକା ନିର୍ମାଣ କରନ୍ତୁ |
ଏହା କିପରି କାମ କରେ |
ଅଫକାନଭାସ୍ ହେଉଛି ଏକ ପାର୍ଶ୍ୱ ଦଣ୍ଡିକା ଉପାଦାନ ଯାହା ଭ୍ୟୁପୋର୍ଟର ବାମ, ଡାହାଣ କିମ୍ବା ତଳ ଧାରରୁ ଦେଖାଯିବା ପାଇଁ ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଟୋଗଲ୍ ହୋଇପାରିବ | ବଟନ୍ କିମ୍ବା ଆଙ୍କର୍ ଟ୍ରିଗର ଭାବରେ ବ୍ୟବହୃତ ହୁଏ ଯାହାକି ତୁମେ ଟୋଗଲ୍ କରୁଥିବା ନିର୍ଦ୍ଦିଷ୍ଟ ଉପାଦାନ ସହିତ ସଂଯୁକ୍ତ, ଏବଂ data
ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟକୁ ଡାକିବା ପାଇଁ ଗୁଣଗୁଡ଼ିକ ବ୍ୟବହୃତ ହୁଏ |
- ଅଫକାନଭାସ୍ ମୋଡାଲ୍ ପରି ସମାନ ଜାଭାସ୍କ୍ରିପ୍ଟ କୋଡ୍ ଅଂଶୀଦାର କରେ | ଧାରଣା ଅନୁଯାୟୀ, ସେଗୁଡ଼ିକ ସମ୍ପୂର୍ଣ୍ଣ ସମାନ, କିନ୍ତୁ ସେଗୁଡ଼ିକ ଅଲଗା ପ୍ଲଗଇନ୍ |
- ସେହିଭଳି, ଅଫକାନଭାସ୍ ର ଶ yles ଳୀ ଏବଂ ପରିମାପ ପାଇଁ କିଛି ଉତ୍ସ ସାସ୍ ଭେରିଏବଲ୍ ମୋଡାଲ୍ ଭେରିଏବଲ୍ ରୁ ଉତ୍ତରାଧିକାରୀ |
- ଯେତେବେଳେ ଦେଖାଯାଏ, ଅଫକାନଭାସ୍ ଏକ ଡିଫଲ୍ଟ ବ୍ୟାକଡ୍ରପ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରେ ଯାହା ଅଫକାନଭାସ୍ ଲୁଚାଇବା ପାଇଁ କ୍ଲିକ୍ କରାଯାଇପାରିବ |
- ମୋଡାଲ ପରି, ଗୋଟିଏ ଥରରେ କେବଳ ଗୋଟିଏ ଅଫକାନଭା ଦେଖାଯାଇପାରିବ |
ମୁଣ୍ଡ ଉପରକୁ! CSS କିପରି ଆନିମେସନ୍ ନିୟନ୍ତ୍ରଣ କରେ, ଆପଣ ବ୍ୟବହାର କରିପାରିବେ ନାହିଁ margin
କିମ୍ବା translate
ଏକ .offcanvas
ଉପାଦାନରେ | ଏହା ପରିବର୍ତ୍ତେ, ଶ୍ରେଣୀକୁ ଏକ ସ୍ independent ାଧୀନ ରାପିଙ୍ଗ୍ ଉପାଦାନ ଭାବରେ ବ୍ୟବହାର କରନ୍ତୁ |
prefers-reduced-motion
ମିଡିଆ ଜିଜ୍ଞାସା ଉପରେ ନିର୍ଭରଶୀଳ | ଆମର ଆକ୍ସେସିବିଲିଟି ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ର ହ୍ରାସ ହୋଇଥିବା ଗତି ବିଭାଗ ଦେଖନ୍ତୁ
|
ଉଦାହରଣଗୁଡିକ
ଅଫକାନଭାସ୍ ଉପାଦାନଗୁଡ଼ିକ |
ନିମ୍ନରେ ଏକ ଅଫକାନଭାସ୍ ଉଦାହରଣ ଅଛି ଯାହା ଡିଫଲ୍ଟ ଭାବରେ ଦେଖାଯାଏ ( .show
ଅନ ମାଧ୍ୟମରେ .offcanvas
) | ଅଫକାନଭାସ୍ ଏକ କ୍ଲୋଜ୍ ବଟନ୍ ସହିତ ଏକ ହେଡର୍ ପାଇଁ ସମର୍ଥନ ଏବଂ କିଛି ପ୍ରାରମ୍ଭିକ ପାଇଁ ଏକ ବ body କଳ୍ପିକ ଶରୀର ଶ୍ରେଣୀ ଅନ୍ତର୍ଭୁକ୍ତ କରେ padding
| ଆମେ ପରାମର୍ଶ ଦେଉଛୁ ଯେ ଆପଣ ଯେତେବେଳେ ବି ସମ୍ଭବ ବହିଷ୍କାର କାର୍ଯ୍ୟ ସହିତ ଅଫକାନଭାସ୍ ହେଡର୍ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ, କିମ୍ବା ଏକ ସ୍ପଷ୍ଟ ବହିଷ୍କାର କାର୍ଯ୍ୟ ପ୍ରଦାନ କରନ୍ତୁ |
ଅଫକାନଭାସ୍ |
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
</div>
</div>
ଲାଇଭ୍ ଡେମୋ |
ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଏକ ଅଫକାନଭାସ୍ ଉପାଦାନ ଦେଖାଇବା ଏବଂ ଲୁଚାଇବା ପାଇଁ ନିମ୍ନରେ ଥିବା ବଟନ୍ଗୁଡ଼ିକୁ ବ୍ୟବହାର କରନ୍ତୁ ଯାହା .show
ଶ୍ରେଣୀ ସହିତ ଏକ ଉପାଦାନରେ ଶ୍ରେଣୀକୁ ଟୋଗଲ୍ କରେ .offcanvas
|
.offcanvas
ବିଷୟବସ୍ତୁ ଲୁଚାଇଥାଏ (ଡିଫଲ୍ଟ).offcanvas.show
ବିଷୟବସ୍ତୁ ଦେଖାଏ |
ଆପଣ ଆଟ୍ରିବ୍ୟୁଟ୍ ସହିତ ଏକ ଲିଙ୍କ୍ href
, କିମ୍ବା ଆଟ୍ରିବ୍ୟୁଟ୍ ସହିତ ଏକ ବଟନ୍ ବ୍ୟବହାର କରିପାରିବେ data-bs-target
| ଉଭୟ କ୍ଷେତ୍ରରେ, data-bs-toggle="offcanvas"
ଆବଶ୍ୟକ |
ଅଫକାନଭାସ୍ |
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Button with data-bs-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
ସ୍ଥାନ
ଅଫକାନଭାସ୍ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ କ default ଣସି ଡିଫଲ୍ଟ ପ୍ଲେସମେଣ୍ଟ୍ ନାହିଁ, ତେଣୁ ଆପଣଙ୍କୁ ନିମ୍ନରେ ଏକ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ମଧ୍ୟରୁ ଗୋଟିଏ ଯୋଡିବାକୁ ପଡିବ |
.offcanvas-start
ଭ୍ୟୁପୋର୍ଟର ବାମ ପାର୍ଶ୍ୱରେ ଅଫକାନଭାସ୍ ରଖେ (ଉପରେ ଦେଖାଯାଇଛି).offcanvas-end
ଭ୍ୟୁପୋର୍ଟର ଡାହାଣ ପାର୍ଶ୍ୱରେ ଅଫକାନଭାସ୍ ରଖେ |.offcanvas-top
ଭ୍ୟୁପୋର୍ଟର ଉପରେ ଅଫକାନଭାସ୍ ରଖେ |.offcanvas-bottom
ଭ୍ୟୁପୋର୍ଟର ତଳେ ଅଫକାନଭାସ୍ ରଖେ |
ନିମ୍ନରେ ଉପର, ଡାହାଣ ଏବଂ ନିମ୍ନ ଉଦାହରଣଗୁଡିକ ଚେଷ୍ଟା କରନ୍ତୁ |
ଅଫକାନଭାସ୍ ଟପ୍ |
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Offcanvas top</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
ଅଫକାନଭାସ୍ ଠିକ୍ |
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
ଅଫକାନଭାସ୍ ତଳ |
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
...
</div>
</div>
ପୃଷ୍ଠଭୂମି
<body>
ଏକ ଅଫକାନଭାସ୍ ଏବଂ ଏହାର ପୃଷ୍ଠଭୂମି ଦୃଶ୍ୟମାନ ହେଲେ ଉପାଦାନ ସ୍କ୍ରୋଲ୍ ଅକ୍ଷମ ହୋଇଥାଏ | ସ୍କ୍ରୋଲିଂ ଟୋଗଲ୍ ଏବଂ ବ୍ୟାକଡ୍ରପ୍ ଟୋଗଲ୍ କରିବାକୁ data-bs-scroll
ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରନ୍ତୁ |<body>
data-bs-backdrop
ସ୍କ୍ରୋଲିଂ ସହିତ ରଙ୍ଗିତ |
ଏହି ବିକଳ୍ପକୁ କାର୍ଯ୍ୟରେ ଦେଖିବା ପାଇଁ ବାକି ପୃଷ୍ଠାକୁ ସ୍କ୍ରୋଲ୍ କରିବାକୁ ଚେଷ୍ଟା କରନ୍ତୁ |
ପୃଷ୍ଠଭୂମି ସହିତ ଅଫକାନଭାସ୍ |
.....
ସ୍କ୍ରୋଲିଂ ସହିତ ପୃଷ୍ଠଭୂମି |
ଏହି ବିକଳ୍ପକୁ କାର୍ଯ୍ୟରେ ଦେଖିବା ପାଇଁ ବାକି ପୃଷ୍ଠାକୁ ସ୍କ୍ରୋଲ୍ କରିବାକୁ ଚେଷ୍ଟା କରନ୍ତୁ |
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>.....</p>
</div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>
ଅଭିଗମ୍ୟତା
aria-labelledby="..."
ଯେହେତୁ ଅଫକାନଭାସ୍ ପ୍ୟାନେଲ୍ ଧାରଣାଗତ ଭାବରେ ଏକ ମୋଡାଲ୍ ସଂଳାପ, ତେଣୁ ଅଫକାନଭାସ୍ ଆଖ୍ୟାକୁ ଯୋଡିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ .offcanvas
| ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଆପଣ ଯୋଡିବା ଆବଶ୍ୟକ କରନ୍ତି ନାହିଁ role="dialog"
ଯେହେତୁ ଆମେ ଏହାକୁ ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଯୋଡିଥାଉ |
ସାସ୍ |
ଭେରିଏବଲ୍ |
$offcanvas-padding-y: $modal-inner-padding;
$offcanvas-padding-x: $modal-inner-padding;
$offcanvas-horizontal-width: 400px;
$offcanvas-vertical-height: 30vh;
$offcanvas-transition-duration: .3s;
$offcanvas-border-color: $modal-content-border-color;
$offcanvas-border-width: $modal-content-border-width;
$offcanvas-title-line-height: $modal-title-line-height;
$offcanvas-bg-color: $modal-content-bg;
$offcanvas-color: $modal-content-color;
$offcanvas-box-shadow: $modal-content-box-shadow-xs;
ବ୍ୟବହାର
ଅଫକାନଭାସ୍ ପ୍ଲଗଇନ୍ ଭାରୀ ଉଠାଇବା ପାଇଁ କିଛି ଶ୍ରେଣୀ ଏବଂ ଗୁଣ ବ୍ୟବହାର କରେ:
.offcanvas
ବିଷୟବସ୍ତୁ ଲୁଚାଏ |.offcanvas.show
ବିଷୟବସ୍ତୁ ଦେଖାଏ |.offcanvas-start
ବାମ ପାର୍ଶ୍ୱରେ ଅଫକାନଭାସ୍ ଲୁଚାଏ |.offcanvas-end
ଡାହାଣ ପାର୍ଶ୍ୱରେ ଅଫକାନଭାସ୍ ଲୁଚାଏ |.offcanvas-bottom
ତଳେ ଥିବା ଅଫକାନଭାସ୍ ଲୁଚାଇଥାଏ |
ଗୁଣବତ୍ତା ସହିତ ଏକ ଖାରଜ ବଟନ୍ ଯୋଡନ୍ତୁ data-bs-dismiss="offcanvas"
, ଯାହା ଜାଭାସ୍କ୍ରିପ୍ଟ କାର୍ଯ୍ୟକାରିତାକୁ ଟ୍ରିଗର କରିଥାଏ | <button>
ସମସ୍ତ ଡିଭାଇସରେ ସଠିକ୍ ଆଚରଣ ପାଇଁ ଏହା ସହିତ ଉପାଦାନ ବ୍ୟବହାର କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |
ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ |
ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଗୋଟିଏ ଅଫକାନଭାସ୍ ଉପାଦାନର ନିୟନ୍ତ୍ରଣ ନ୍ୟସ୍ତ କରିବାକୁ data-bs-toggle="offcanvas"
ଏକ data-bs-target
କିମ୍ବା ଏକ ଉପାଦାନକୁ ଯୋଡନ୍ତୁ | href
ଅଫକାନଭାସ୍ data-bs-target
ପ୍ରୟୋଗ କରିବାକୁ ଆଟ୍ରିବ୍ୟୁଟ୍ ଏକ CSS ଚୟନକର୍ତ୍ତା ଗ୍ରହଣ କରେ | offcanvas
ଅଫକାନଭାସ୍ ଉପାଦାନରେ କ୍ଲାସ୍ ଯୋଡିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ | ଯଦି ଆପଣ ଏହାକୁ ଡିଫଲ୍ଟ ଖୋଲିବାକୁ ଚାହାଁନ୍ତି, ଅତିରିକ୍ତ ଶ୍ରେଣୀ ଯୋଡନ୍ତୁ show
|
ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |
ସହିତ ମାନୁଆଲ୍ ସକ୍ଷମ କରନ୍ତୁ:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
ବିକଳ୍ପଗୁଡ଼ିକ
ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-bs-
ଯେପରି ଯୋଡନ୍ତୁ data-bs-backdrop=""
|
ନାମ | ଟାଇପ୍ କରନ୍ତୁ | | ଡିଫଲ୍ଟ | | ବର୍ଣ୍ଣନା |
---|---|---|---|
backdrop |
ବୁଲିଅନ୍ | true |
ଅଫକାନଭାସ୍ ଖୋଲା ଥିବାବେଳେ ଶରୀର ଉପରେ ଏକ ପୃଷ୍ଠଭୂମି ଲଗାନ୍ତୁ | |
keyboard |
ବୁଲିଅନ୍ | true |
ଏସ୍କେପ୍ ଚାବି ଦବାଇଲେ ଅଫକାନଭାସ୍ ବନ୍ଦ ହୋଇଯାଏ | |
scroll |
ବୁଲିଅନ୍ | false |
ଅଫକାନଭାସ୍ ଖୋଲା ଥିବାବେଳେ ଶରୀର ସ୍କ୍ରୋଲ୍ କରିବାକୁ ଅନୁମତି ଦିଅନ୍ତୁ | |
ପ୍ରଣାଳୀ
ଅସନ୍ତୁଳିତ ପଦ୍ଧତି ଏବଂ ସ୍ଥାନାନ୍ତରଣ |
ସମସ୍ତ API ପଦ୍ଧତିଗୁଡିକ ଅସନ୍ତୁଳିତ ଏବଂ ଏକ ପରିବର୍ତ୍ତନ ଆରମ୍ଭ କରନ୍ତି | ସଂକ୍ରମଣ ଆରମ୍ଭ ହେବା ମାତ୍ରେ ସେମାନେ କଲର୍ ନିକଟକୁ ଫେରିଯାଆନ୍ତି କିନ୍ତୁ ଏହା ଶେଷ ହେବା ପୂର୍ବରୁ | ଏହା ସହିତ, ଏକ ପରିବର୍ତ୍ତନକାରୀ ଉପାଦାନ ଉପରେ ଏକ ପଦ୍ଧତି କଲ୍ କୁ ଅଣଦେଖା କରାଯିବ |
ଏକ ଅଫକାନଭାସ୍ ଉପାଦାନ ଭାବରେ ଆପଣଙ୍କର ବିଷୟବସ୍ତୁକୁ ସକ୍ରିୟ କରିଥାଏ | ଏକ ଇଚ୍ଛାଧୀନ ବିକଳ୍ପ ଗ୍ରହଣ କରେ object
|
କନଷ୍ଟ୍ରକ୍ଟର ସହିତ ଆପଣ ଏକ ଅଫକାନଭାସ୍ ଉଦାହରଣ ସୃଷ୍ଟି କରିପାରିବେ, ଉଦାହରଣ ସ୍ୱରୂପ:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
ପଦ୍ଧତି | ବର୍ଣ୍ଣନା |
---|---|
toggle |
ଦେଖାଯାଇଥିବା କିମ୍ବା ଲୁକ୍କାୟିତ ହେବା ପାଇଁ ଏକ ଅଫକାନଭାସ୍ ଉପାଦାନକୁ ଟୋଗଲ୍ କରେ | ଅଫକାନଭାସ୍ ଉପାଦାନ ପ୍ରକୃତରେ ଦେଖାଯିବା କିମ୍ବା ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲ୍ କରୁଥିବା ବ୍ୟକ୍ତିଙ୍କshown.bs.offcanvas ନିକଟକୁ ଫେରିଥାଏ hidden.bs.offcanvas | |
show |
ଏକ ଅଫକାନଭାସ୍ ଉପାଦାନ ଦେଖାଏ | ଅଫକାନଭାସ୍ ଉପାଦାନ ପ୍ରକୃତରେ ଦେଖାଯିବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ shown.bs.offcanvas ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ | |
hide |
ଏକ ଅଫକାନଭାସ୍ ଉପାଦାନ ଲୁଚାଏ | ଅଫକାନଭାସ୍ ଉପାଦାନ ପ୍ରକୃତରେ ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ hidden.bs.offcanvas ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ | |
getInstance |
ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ଅଫକାନଭାସ୍ ଉଦାହରଣ ପାଇବାକୁ ଅନୁମତି ଦିଏ | |
getOrCreateInstance |
ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ଅଫକାନଭାସ୍ ଇନଷ୍ଟାଣ୍ଟ ପାଇବାକୁ ଅନୁମତି ଦିଏ, କିମ୍ବା ଏହା ଆରମ୍ଭ ହୋଇନଥିଲେ ଏକ ନୂତନ ସୃଷ୍ଟି କରିବାକୁ ଅନୁମତି ଦିଏ | |
ଘଟଣା
ବୁଟଷ୍ଟ୍ରାପର ଅଫକାନଭାସ୍ ଶ୍ରେଣୀ ଅଫକାନଭାସ୍ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ୍ ପାଇଁ କିଛି ଇଭେଣ୍ଟକୁ ପ୍ରକାଶ କରିଥାଏ |
ଇଭେଣ୍ଟ ପ୍ରକାର | | ବର୍ଣ୍ଣନା |
---|---|
show.bs.offcanvas |
show ଉଦାହରଣ ପଦ୍ଧତି ଡାକିବା ପରେ ଏହି ଘଟଣା ତୁରନ୍ତ ନିଆଁ ଲାଗେ | |
shown.bs.offcanvas |
ଉପଭୋକ୍ତାଙ୍କୁ ଏକ ଅଫକାନଭାସ୍ ଉପାଦାନ ଦୃଶ୍ୟମାନ ହେବାପରେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଇଥାଏ (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) | |
hide.bs.offcanvas |
hide ପଦ୍ଧତି ଡାକିବା ପରେ ତୁରନ୍ତ ଏହି ଘଟଣାକୁ ବରଖାସ୍ତ କରାଯାଏ | |
hidden.bs.offcanvas |
ଉପଭୋକ୍ତାଙ୍କଠାରୁ ଏକ ଅଫକାନଭାସ୍ ଉପାଦାନ ଲୁଚି ରହିଥିବାବେଳେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଇଥାଏ (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) | |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})