ସମୀକ୍ଷା

ବ୍ୟକ୍ତିଗତ କିମ୍ବା ସଂକଳିତ |

ପ୍ଲଗଇନଗୁଡିକ ପୃଥକ ଭାବରେ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇପାରେ (ବୁଟଷ୍ଟ୍ରାପ୍ ର ବ୍ୟକ୍ତିଗତ *.jsଫାଇଲଗୁଡିକ ବ୍ୟବହାର କରି), କିମ୍ବା ଏକାଥରେ (ବ୍ୟବହାର bootstrap.jsକିମ୍ବା କ୍ଷୁଦ୍ର bootstrap.min.js) |

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍

ଜାଭାସ୍କ୍ରିପ୍ଟର ଗୋଟିଏ ଧାଡି ନ ଲେଖି ଆପଣ ମାର୍କଅପ୍ API ମାଧ୍ୟମରେ ସମସ୍ତ ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିପାରିବେ | ଏହା ହେଉଛି ବୁଟଷ୍ଟ୍ରାପ୍ ର ପ୍ରଥମ ଶ୍ରେଣୀ API ଏବଂ ଏକ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିବାବେଳେ ତୁମର ପ୍ରଥମ ବିଚାର ହେବା ଉଚିତ |

ଏହା କହିଲା, କେତେକ ପରିସ୍ଥିତିରେ ଏହି କାର୍ଯ୍ୟକାରିତାକୁ ବନ୍ଦ କରିବା ବାଞ୍ଛନୀୟ ହୋଇପାରେ | ତେଣୁ, ଆମେ ମଧ୍ୟ ଡକ୍ୟୁମେଣ୍ଟ୍ ନାମପେସ୍ ସହିତ ଥିବା ସମସ୍ତ ଇଭେଣ୍ଟକୁ ବାନ୍ଧ କରି ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ API କୁ ଅକ୍ଷମ କରିବାର କ୍ଷମତା ପ୍ରଦାନ କରୁ data-api| ଏହା ଏହିପରି ଦେଖାଯାଉଛି:

$(document).off('.data-api')

ବ ly କଳ୍ପିକ ଭାବରେ, ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ପ୍ଲଗଇନ୍ କୁ ଟାର୍ଗେଟ୍ କରିବାକୁ, ପ୍ଲଗଇନ୍ ର ନାମକୁ ଏକ ନାମ ସ୍ପେସ୍ ଭାବରେ ଡାଟା-ଆପି ନାମସ୍ପେସ୍ ସହିତ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ:

$(document).off('.alert.data-api')

ପ୍ରୋଗ୍ରାମେଟିକ୍ API

ଆମେ ମଧ୍ୟ ବିଶ୍ believe ାସ କରୁ ଯେ ଆପଣ ଜାଭାସ୍କ୍ରିପ୍ଟ API ମାଧ୍ୟମରେ ସମସ୍ତ ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିବାକୁ ସମର୍ଥ ହେବା ଉଚିତ୍ | ସମସ୍ତ ସାର୍ବଜନୀନ API ଗୁଡିକ ଏକକ, ଶୃଙ୍ଖଳିତ ପଦ୍ଧତି, ଏବଂ କାର୍ଯ୍ୟ ଉପରେ ସଂଗ୍ରହକୁ ଫେରସ୍ତ କରନ୍ତୁ |

$('.btn.danger').button('toggle').addClass('fat')

ସମସ୍ତ ପଦ୍ଧତି ଏକ ବ al କଳ୍ପିକ ବିକଳ୍ପ ବସ୍ତୁ ଗ୍ରହଣ କରିବା ଉଚିତ, ଏକ ଷ୍ଟ୍ରିଙ୍ଗ ଯାହା ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ପଦ୍ଧତିକୁ ଟାର୍ଗେଟ କରେ, କିମ୍ବା କିଛି ନୁହେଁ (ଯାହା ଡିଫଲ୍ଟ ଆଚରଣ ସହିତ ଏକ ପ୍ଲଗଇନ୍ ଆରମ୍ଭ କରେ):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

ପ୍ରତ୍ୟେକ ପ୍ଲଗଇନ୍ ମଧ୍ୟ ଏହାର କଞ୍ଚା କନଷ୍ଟ୍ରକ୍ଟରକୁ ଏକ Constructorସମ୍ପତ୍ତି ଉପରେ ପ୍ରକାଶ କରେ : $.fn.popover.Constructor। ଯଦି ଆପଣ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ପ୍ଲଗଇନ୍ ଉଦାହରଣ ପାଇବାକୁ ଚାହାଁନ୍ତି, ଏହାକୁ ଏକ ଉପାଦାନରୁ ସିଧାସଳଖ ପୁନରୁଦ୍ଧାର କରନ୍ତୁ : $('[rel="popover"]').data('popover')।

ଡିଫଲ୍ଟ ସେଟିଂସମୂହ |

Constructor.DEFAULTSପ୍ଲଗଇନ୍ ର ବସ୍ତୁକୁ ପରିବର୍ତ୍ତନ କରି ଆପଣ ଏକ ପ୍ଲଗଇନ୍ ପାଇଁ ଡିଫଲ୍ଟ ସେଟିଂସମୂହ ପରିବର୍ତ୍ତନ କରିପାରିବେ :

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

କ conflict ଣସି ବିବାଦ ନାହିଁ |

ବେଳେବେଳେ ଅନ୍ୟ UI framework ାଞ୍ଚା ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିବା ଆବଶ୍ୟକ | ଏହି ପରିସ୍ଥିତିରେ, ନାମପେସ୍ ଧକ୍କା ବେଳେବେଳେ ହୋଇପାରେ | .noConflictଯଦି ଏହା ଘଟେ, ଆପଣ ମୂଲ୍ୟକୁ ଫେରାଇବାକୁ ଚାହୁଁଥିବା ପ୍ଲଗଇନକୁ ଡାକିପାରନ୍ତି |

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

ଘଟଣା

ଅଧିକାଂଶ ପ୍ଲଗଇନ୍ ର ଅନନ୍ୟ କାର୍ଯ୍ୟ ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ କଷ୍ଟମ୍ ଇଭେଣ୍ଟ ପ୍ରଦାନ କରେ | ସାଧାରଣତ ,, ଏଗୁଡିକ ଏକ ଅସୀମ ଏବଂ ଅତୀତର ଅଂଶଗ୍ରହଣ ଫର୍ମରେ ଆସିଥାଏ - ଯେଉଁଠାରେ showଏକ ଇଭେଣ୍ଟ ଆରମ୍ଭରେ ଅସୀମ (ଉଦାହରଣ) ଟ୍ରିଗର ହୋଇଥାଏ, ଏବଂ ଏହାର ଅତୀତ ଅଂଶଗ୍ରହଣ ଫର୍ମ (ଉଦାହରଣ shown) ଏକ କାର୍ଯ୍ୟ ସମାପ୍ତ ହେବା ପରେ ଟ୍ରିଗର ହୋଇଥାଏ |

3.0.0 ସୁଦ୍ଧା, ସମସ୍ତ ବୁଟଷ୍ଟ୍ରାପ୍ ଇଭେଣ୍ଟଗୁଡିକ ନାମପେସ୍ ହୋଇଛି |

ସମସ୍ତ ଅସୀମ ଘଟଣାଗୁଡ଼ିକ କାର୍ଯ୍ୟକାରିତା ପ୍ରଦାନ କରେ preventDefault| ଏହା ଆରମ୍ଭ ହେବା ପୂର୍ବରୁ ଏକ କାର୍ଯ୍ୟର ନିଷ୍ପାଦନକୁ ବନ୍ଦ କରିବାର କ୍ଷମତା ପ୍ରଦାନ କରିଥାଏ |

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

ସଂସ୍କରଣ ସଂଖ୍ୟା

VERSIONପ୍ରତ୍ୟେକ ବୁଟଷ୍ଟ୍ରାପର jQuery ପ୍ଲଗଇନଗୁଡ଼ିକର ସଂସ୍କରଣ ପ୍ଲଗଇନ୍ର କନଷ୍ଟ୍ରକ୍ଟରର ସମ୍ପତ୍ତି ମାଧ୍ୟମରେ ପ୍ରବେଶ କରାଯାଇପାରିବ | ଉଦାହରଣ ସ୍ୱରୂପ, ଟୁଲ୍ ଟିପ୍ ପ୍ଲଗଇନ୍ ପାଇଁ:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

ଜାଭାସ୍କ୍ରିପ୍ଟ ଅକ୍ଷମ ହେଲେ କ special ଣସି ବିଶେଷ ତ୍ରୁଟି ନାହିଁ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ଅକ୍ଷମ ହେଲେ ବୁଟଷ୍ଟ୍ରାପର ପ୍ଲଗଇନଗୁଡ଼ିକ ବିଶେଷ ଭାବରେ ଅନୁଗ୍ରହରେ ଫେରି ନଥାଏ | ଯଦି ଆପଣ ଏହି କ୍ଷେତ୍ରରେ ଉପଭୋକ୍ତା ଅଭିଜ୍ଞତା ବିଷୟରେ ଚିନ୍ତା କରନ୍ତି, ତେବେ ଆପଣଙ୍କର ଉପଭୋକ୍ତାମାନଙ୍କୁ <noscript>ପରିସ୍ଥିତି (ଏବଂ କିପରି ଜାଭାସ୍କ୍ରିପ୍ଟକୁ ପୁନ - ସକ୍ଷମ କରିବେ) ବୁ explain ାଇବାକୁ ବ୍ୟବହାର କରନ୍ତୁ, ଏବଂ / କିମ୍ବା ଆପଣଙ୍କର ନିଜସ୍ୱ କଷ୍ଟମ୍ ଫଲବ୍ୟାକ୍ ଯୋଡନ୍ତୁ |

ସ୍ଥାନାନ୍ତରଣ ସଂକ୍ରମଣ । Js

ସ୍ଥାନାନ୍ତରଣ ବିଷୟରେ

ସରଳ ସଂକ୍ରମଣ ପ୍ରଭାବ ପାଇଁ, transition.jsଅନ୍ୟ JS ଫାଇଲଗୁଡ଼ିକ ସହିତ ଥରେ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ | ଯଦି ଆପଣ ସଙ୍କଳିତ (କିମ୍ବା କ୍ଷୁଦ୍ର) ବ୍ୟବହାର କରୁଛନ୍ତି bootstrap.js, ଏହାକୁ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାର କ is ଣସି ଆବଶ୍ୟକତା ନାହିଁ - ଏହା ପୂର୍ବରୁ ଅଛି |

ଭିତରେ କଣ ଅଛି |

Transition.js transitionEndଇଭେଣ୍ଟଗୁଡିକ ପାଇଁ ଏକ ମ basic ଳିକ ସହାୟକକାରୀ ଏବଂ ଏକ CSS ଟ୍ରାନ୍ସମିସନ୍ ଏମୁଲେଟର | ଏହା ଅନ୍ୟ ପ୍ଲଗଇନ୍ ଦ୍ୱାରା CSS ସ୍ଥାନାନ୍ତରଣ ସମର୍ଥନ ଯା check ୍ଚ କରିବା ଏବଂ ଫାଶୀ ସ୍ଥାନାନ୍ତରଣକୁ ଧରିବା ପାଇଁ ବ୍ୟବହୃତ ହୁଏ |

ସ୍ଥାନାନ୍ତରଣକୁ ନିଷ୍କ୍ରିୟ କରନ୍ତୁ |

ନିମ୍ନଲିଖିତ ଜାଭାସ୍କ୍ରିପ୍ଟ ସ୍ନିପେଟ୍ ବ୍ୟବହାର କରି ସ୍ଥାନାନ୍ତରଣ ସର୍ବଭାରତୀୟ ସ୍ତରରେ ଅକ୍ଷମ ହୋଇପାରିବ, ଯାହା ଲୋଡ୍ ହେବା ପରେ ଆସିବା ଉଚିତ transition.js(କିମ୍ବା bootstrap.js, bootstrap.min.jsଯେପରି ହୋଇପାରେ):

$.support.transition = false

ମୋଡାଲ୍ modal.js

ମୋଡାଲଗୁଡିକ ଶୃଙ୍ଖଳିତ, କିନ୍ତୁ ନମନୀୟ, ସର୍ବନିମ୍ନ ଆବଶ୍ୟକୀୟ କାର୍ଯ୍ୟକାରିତା ଏବଂ ସ୍ମାର୍ଟ ଡିଫଲ୍ଟ ସହିତ ସଂଳାପ ପ୍ରମ୍ପ୍ଟ କରେ |

HTML5 କିପରି ଏହାର ଅର୍ଥକୁ ବ୍ୟାଖ୍ୟା କରେ, autofocusବୁଟଷ୍ଟ୍ରାପ୍ ମୋଡାଲରେ HTML ଗୁଣର କ effect ଣସି ପ୍ରଭାବ ନାହିଁ | ସମାନ ପ୍ରଭାବ ହାସଲ କରିବାକୁ, କିଛି କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ବ୍ୟବହାର କରନ୍ତୁ:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

ଉଦାହରଣଗୁଡିକ

ସ୍ଥିର ଉଦାହରଣ |

ହେଡର୍, ଶରୀର, ଏବଂ ଫୁଟର୍ ରେ କ୍ରିୟାଗୁଡ଼ିକର ସେଟ୍ ସହିତ ଏକ ରେଣ୍ଡେଡ୍ ମୋଡାଲ୍ |

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

ଲାଇଭ୍ ଡେମୋ |

ନିମ୍ନରେ ଥିବା ବଟନ୍ କ୍ଲିକ୍ କରି ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଏକ ମୋଡାଲ୍ ଟୋଗଲ୍ କରନ୍ତୁ | ଏହା ପୃଷ୍ଠାର ଉପରୁ ତଳକୁ ଖସିଯିବ |

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

ବ tion କଳ୍ପିକ ଆକାର

ମୋଡାଲଗୁଡିକର ଦୁଇଟି ବ al କଳ୍ପିକ ଆକାର ଅଛି, a ଉପର�� ରଖିବାକୁ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ମାଧ୍ୟମରେ ଉପଲବ୍ଧ .modal-dialog|

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

ଆନିମେସନ୍ ଅପସାରଣ କରନ୍ତୁ |

ମୋଡାଲ୍ ପାଇଁ ଯାହା ଦେଖିବା ପାଇଁ ମଳିନ ହେବା ପରିବର୍ତ୍ତେ ଦୃଶ୍ୟମାନ ହୁଏ, .fadeତୁମ ମୋଡାଲ୍ ମାର୍କଅପ୍ ରୁ କ୍ଲାସ୍ ଅପସାରଣ କର |

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ବ୍ୟବହାର କରି |

ଏକ ମୋଡାଲ୍ ମଧ୍ୟରେ ବୁଟଷ୍ଟ୍ରାପ୍ ଗ୍ରୀଡ୍ ସିଷ୍ଟମର ଲାଭ ଉଠାଇବାକୁ, କେବଳ .rowଭିତରେ s ବସା କର .modal-bodyଏବଂ ତା’ପରେ ସାଧାରଣ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ କ୍ଲାସ୍ ବ୍ୟବହାର କର |

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

ଟ୍ରିଗର ବଟନ୍ ଉପରେ ଆଧାର କରି ବିଭିନ୍ନ ମୋଡାଲ୍ ବିଷୟବସ୍ତୁ |

ବଟନ୍ ଗୁଡ଼ିକର ଏକ ଗୁଣ୍ଡ ଅଛି ଯାହା ସମସ୍ତେ ସମାନ ମୋଡାଲ୍ ଟ୍ରିଗର କରନ୍ତି, କେବଳ ସାମାନ୍ୟ ଭିନ୍ନ ବିଷୟବସ୍ତୁ ସହିତ? କେଉଁ ବଟନ୍ କ୍ଲିକ୍ ହୋଇଛି ତାହା ଉପରେ ନିର୍ଭର କରି ମୋଡାଲର ବିଷୟବସ୍ତୁକୁ ଭିନ୍ନ କରିବା ପାଇଁ event.relatedTargetHTML ଗୁଣଗୁଡିକ ( data-*ସମ୍ଭବତ j jQuery ମାଧ୍ୟମରେ ) ବ୍ୟବହାର କରନ୍ତୁ | ସବିଶେଷ ତଥ୍ୟ ପାଇଁ ମୋଡାଲ୍ ଇଭେଣ୍ଟସ୍ ଡକସ୍ ଦେଖନ୍ତୁ relatedTarget,

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

ବ୍ୟବହାର

ମୋଡାଲ୍ ପ୍ଲଗଇନ୍ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଚାହିଦା ଅନୁଯାୟୀ ତୁମର ଲୁକ୍କାୟିତ ବିଷୟବସ୍ତୁକୁ ଟୋଗଲ୍ କରେ | ଡିଫଲ୍ଟ ସ୍କ୍ରୋଲିଂ ଆଚରଣକୁ ନବଲିଖନ .modal-openକରିବା ପାଇଁ ଏହା ମଧ୍ୟ ଯୋଗ କରିଥାଏ ଏବଂ ମୋଡାଲ ବାହାରେ କ୍ଲିକ୍ କରିବା ସମୟରେ ପ୍ରଦର୍ଶିତ ମୋଡାଲଗୁଡ଼ିକୁ ଖାରଜ କରିବା ପାଇଁ ଏକ କ୍ଲିକ୍ କ୍ଷେତ୍ର ପ୍ରଦାନ କରିବାକୁ ଏକ ସୃଷ୍ଟି କରିଥାଏ |<body>.modal-backdrop

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ଲେଖିବା ବିନା ଏକ ମୋଡାଲ୍ ସକ୍ରିୟ କରନ୍ତୁ | ଟୋଗଲ୍ କରିବାକୁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ମୋଡାଲ୍ ସହିତ data-toggle="modal"ଏକ ବଟନ୍ ପରି ଏକ ନିୟନ୍ତ୍ରକ ଉପାଦାନ ଉପରେ ସେଟ୍ କରନ୍ତୁ |data-target="#foo"href="#foo"

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |

myModalଜାଭାସ୍କ୍ରିପ୍ଟର ଗୋଟିଏ ଧାଡି ସହିତ id ସହିତ ଏକ ମୋଡାଲ୍ କଲ୍ କରନ୍ତୁ :

$('#myModal').modal(options)

ବିକଳ୍ପଗୁଡ଼ିକ

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-ଯେପରି ଯୋଡନ୍ତୁ data-backdrop=""|

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

ପ୍ରଣାଳୀ

.modal(options)

ତୁମର ବିଷୟବସ୍ତୁକୁ ଏକ ମୋଡାଲ୍ ଭାବରେ ସକ୍ରିୟ କରେ | ଏକ ଇଚ୍ଛାଧୀନ ବିକଳ୍ପ ଗ୍ରହଣ କରେ object|

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

ମାନୁଆଲ୍ ଏକ ମୋଡାଲ୍ ଟୋଗଲ୍ କରେ | ମୋଡାଲ୍ ପ୍ରକୃତରେ ଦେଖାଯିବା କିମ୍ବା ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ shown.bs.modalକିମ୍ବା hidden.bs.modalଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ |

$('#myModal').modal('toggle')

.modal('show')

ମାନୁଆଲ୍ ଏକ ମୋଡାଲ୍ ଖୋଲିବ | ମୋଡାଲ୍ ପ୍ରକୃତରେ ଦେଖାଯିବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ shown.bs.modalଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ |

$('#myModal').modal('show')

.modal('hide')

ମାନୁଆଲ୍ ଏକ ମୋଡାଲ୍ ଲୁଚାଇଥାଏ | ମୋଡାଲ୍ ପ୍ରକୃତରେ ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ hidden.bs.modalଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ |

$('#myModal').modal('hide')

.modal('handleUpdate')

ଏକ ସ୍କ୍ରୋଲ୍ ବାର୍ କୁ କାଉଣ୍ଟର କରିବା ପାଇଁ ମୋଡାଲର ପୋଜିସନ୍ ରିଜଷ୍ଟ କରେ ଯଦି ଜଣେ ଦେଖାଯାଏ, ଯାହା ମୋଡାଲକୁ ବାମକୁ ଡେଇଁବ |

ଯେତେବେଳେ ଖୋଲା ଅଛି ସେତେବେଳେ ମୋଡାଲର ଉଚ୍ଚତା ପରିବର୍ତ୍ତନ ହେଲେ ହିଁ ଆବଶ୍ୟକ ହୁଏ |

$('#myModal').modal('handleUpdate')

ଘଟଣା

ବୁଟଷ୍ଟ୍ରାପ୍ ର ମୋଡାଲ୍ କ୍ଲାସ୍ ମୋଡାଲ୍ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ୍ ପାଇଁ କିଛି ଘଟଣା ପ୍ରକାଶ କରେ |

ସମସ୍ତ ମୋଡାଲ୍ ଇଭେଣ୍ଟଗୁଡିକ ମୋଡାଲ୍ ନିଜେ (ଅର୍ଥାତ୍) ରେ ଗୁଳି କରାଯାଇଥାଏ <div class="modal">|

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

ଡ୍ରପଡାଉନ୍ ଡ୍ରପ୍ ଡାଉନ୍

ଉଦାହରଣଗୁଡିକ

ଏହି ସରଳ ପ୍ଲଗଇନ୍ ସହିତ ନାଭବାର୍, ଟ୍ୟାବ୍ ଏବଂ ବଟିକା ସହିତ ଡ୍ରପ୍ ଡାଉନ୍ ମେନୁଗୁଡିକ ଯୋଡନ୍ତୁ |

ଏକ ନାଭବାର୍ ଭିତରେ |

ବଟିକା ଭିତରେ |

ବ୍ୟବହାର

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ, ଡ୍ରପଡାଉନ୍ ପ୍ଲଗଇନ୍ .openପ୍ୟାରେଣ୍ଟ୍ ତାଲିକା ଆଇଟମ୍ ଉପରେ ଶ୍ରେଣୀ ଟୋଗଲ୍ କରି ଲୁକ୍କାୟିତ ବିଷୟବସ୍ତୁ (ଡ୍ରପଡାଉନ୍ ମେନୁ) ଟୋଗଲ୍ କରେ |

ମୋବାଇଲ୍ ଡିଭାଇସରେ, ଏକ ଡ୍ରପ୍ ଡାଉନ୍ ଖୋଲିବା .dropdown-backdropମେନୁ ବାହାରେ ଟ୍ୟାପ୍ କରିବା ସମୟରେ ଡ୍ରପ୍ ଡାଉନ୍ ମେନୁ ବନ୍ଦ କରିବା ପାଇଁ ଏକ ଟ୍ୟାପ୍ କ୍ଷେତ୍ର ଭାବରେ ଯୋଗ କରିଥାଏ, ସଠିକ୍ iOS ସମର୍ଥନ ପାଇଁ ଏକ ଆବଶ୍ୟକତା | ଏହାର ଅର୍ଥ ହେଉଛି ଏକ ଖୋଲା ଡ୍ରପଡାଉନ୍ ମେନୁରୁ ଏକ ଭିନ୍ନ ଡ୍ରପଡାଉନ୍ ମେନୁକୁ ପରିବର୍ତ୍ତନ କରିବା ମୋବାଇଲରେ ଏକ ଅତିରିକ୍ତ ଟ୍ୟାପ୍ ଆବଶ୍ୟକ କରେ |

ଟିପନ୍ତୁ: data-toggle="dropdown"ଏକ ପ୍ରୟୋଗ ସ୍ତରରେ ଡ୍ରପଡାଉନ୍ ମେନୁ ବନ୍ଦ କରିବା ପାଇଁ ଗୁଣଟି ନିର୍ଭର କରେ, ତେଣୁ ଏହାକୁ ସର୍ବଦା ବ୍ୟବହାର କରିବା ଏକ ଉତ୍ତମ ବିଚାର |

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ |

data-toggle="dropdown"ଏକ ଡ୍ରପଡାଉନ୍ ଟୋଗଲ୍ କରିବାକୁ ଏକ ଲିଙ୍କ୍ କିମ୍ବା ବଟନ୍ ରେ ଯୋଡନ୍ତୁ |

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

ଲିଙ୍କ୍ ବଟନ୍ ସହିତ URL ଗୁଡିକ ଅକ୍ଷୁର୍ଣ୍ଣ ରଖିବାକୁ, data-targetଏହା ପରିବର୍ତ୍ତେ ଗୁଣ ବ୍ୟବହାର କରନ୍ତୁ href="#"|

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଡ୍ରପଡାଉନ୍ କୁ କଲ୍ କରନ୍ତୁ:

$('.dropdown-toggle').dropdown()

ବିକଳ୍ପଗୁଡ଼ିକ

କିଛି ନୁହେଁ |

ପ୍ରଣାଳୀ

$().dropdown('toggle')

ପ୍ରଦତ୍ତ ନାଭବାର୍ କିମ୍ବା ଟ୍ୟାବଡ୍ ନେଭିଗେସନ୍ ର ଡ୍ରପ୍ ଡାଉନ୍ ମେନୁ ଟୋଗଲ୍ କରେ |

ଘଟଣା

.dropdown-menuସମସ୍ତ ଡ୍ରପଡାଉନ୍ ଇଭେଣ୍ଟଗୁଡିକ ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନରେ ଫାୟାର୍ ହୋଇଛି |

ସମସ୍ତ ଡ୍ରପଡାଉନ୍ ଇଭେଣ୍ଟଗୁଡିକର ଏକ relatedTargetସମ୍ପତ୍ତି ଅଛି, ଯାହାର ମୂଲ୍ୟ ହେଉଛି ଟୋଗଲ୍ ଆଙ୍କର୍ ଉପାଦାନ |

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

ନାଭବାରରେ ଉଦାହରଣ |

ସ୍କ୍ରୋଲ୍ ପୋଜି ପ୍ଲଗଇନ୍ ସ୍କ୍ରୋଲ୍ ପୋଜିସନ୍ ଉପରେ ଆଧାର କରି ନାଭ୍ ଟାର୍ଗେଟ୍ଗୁଡ଼ିକୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଅପଡେଟ୍ କରିବା ପାଇଁ | ନାଭବାର୍ ତଳେ ଥିବା କ୍ଷେତ୍ରକୁ ସ୍କ୍ରୋଲ୍ କରନ୍ତୁ ଏବଂ ସକ୍ରିୟ ଶ୍ରେଣୀ ପରିବର୍ତ୍ତନ ଦେଖନ୍ତୁ | ଡ୍ରପଡାଉନ୍ ସବ୍ ଆଇଟମ୍ ଗୁଡିକ ମଧ୍ୟ ହାଇଲାଇଟ୍ ହେବ |

ବ୍ୟବହାର

ଆପେକ୍ଷିକ ପୋଜିସନ୍ ଆବଶ୍ୟକ କରେ |

କାର୍ଯ୍ୟାନ୍ୱୟନ ପଦ୍ଧତିକୁ ଖାତିର ନକରି, position: relative;ଆପଣ ଗୁପ୍ତଚର କରୁଥିବା ଉପାଦାନ ଉପରେ ସ୍କ୍ରୋଲ୍ସପି ବ୍ୟବହାର ଆବଶ୍ୟକ କରେ | ଅଧିକାଂଶ କ୍ଷେତ୍ରରେ ଏହା ହେଉଛି <body>| ଯେତେବେଳେ ଅନ୍ୟ ବ୍ୟତୀତ ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ସ୍କ୍ରୋଲ୍ପିଙ୍ଗ୍ କରାଯାଏ , ଏକ ସେଟ୍ ଏବଂ ପ୍ରୟୋଗ <body>ହେବା ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |heightoverflow-y: scroll;

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ |

ତୁମର ଟପ୍ ବାର୍ ନେଭିଗେସନ୍ରେ ସ୍କ୍ରୋଲ୍ସି ଆଚରଣକୁ ସହଜରେ ଯୋଡିବାକୁ, data-spy="scroll"ତୁମେ ଗୁପ୍ତଚର କରିବାକୁ ଚାହୁଁଥିବା ଉପାଦାନକୁ ଯୋଗ କର (ସାଧାରଣତ this ଏହା ହେବ <body>) | ତା’ପରେ data-targetଯେକ any ଣସି ବୁଟଷ୍ଟ୍ରାପ୍ ଉପାଦାନର ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନର ID କିମ୍ବା ଶ୍ରେଣୀ ସହିତ ଗୁଣ ଯୋଡନ୍ତୁ .nav|

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |

ଆପଣଙ୍କର CSS ରେ ଯୋଡିବା ପରେ position: relative;, ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ସ୍କ୍ରୋଲସପି କୁ କଲ୍ କରନ୍ତୁ:

$('body').scrollspy({ target: '#navbar-example' })

ପ୍ରଣାଳୀ

.scrollspy('refresh')

DOM ରୁ ଉପାଦାନଗୁଡିକ ଯୋଡିବା କିମ୍ବା ଅପସାରଣ ସହିତ ସ୍କ୍ରୋଲ୍ସପି ବ୍ୟବହାର କରିବାବେଳେ, ଆପଣଙ୍କୁ ଏହିପରି ସତେଜ ପଦ୍ଧତିକୁ ଡାକିବାକୁ ପଡିବ:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

ବିକଳ୍ପଗୁଡ଼ିକ

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-ଯେପରି ଯୋଡନ୍ତୁ data-offset=""|

ଘଟଣା

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

ଟୋଗଲ୍ ଟ୍ୟାବ୍ ଟ୍ୟାବ୍ । Js |

ଉଦାହରଣ ଟ୍ୟାବଗୁଡ଼ିକ |

ଡ୍ରପଡାଉନ୍ ମେନୁ ମାଧ୍ୟମରେ ମଧ୍ୟ ସ୍ଥାନୀୟ ବିଷୟବସ୍ତୁର ପ୍ୟାନ୍ ମାଧ୍ୟମରେ ସ୍ଥାନାନ୍ତର ପାଇଁ ଶୀଘ୍ର, ଗତିଶୀଳ ଟ୍ୟାବ୍ କାର୍ଯ୍ୟକାରିତା ଯୋଡନ୍ତୁ | ନେଷ୍ଟେଡ୍ ଟ୍ୟାବଗୁଡିକ ସମର୍ଥିତ ନୁହେଁ |

ବ୍ୟବହାର

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଟ୍ୟାବ ଟେବୁଲ୍ ଟ୍ୟାବ୍ ସକ୍ଷମ କରନ୍ତୁ (ପ୍ରତ୍ୟେକ ଟ୍ୟାବ୍ ପୃଥକ ଭାବରେ ସକ୍ରିୟ ହେବା ଆବଶ୍ୟକ):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

ଆପଣ ବିଭିନ୍ନ ଉପାୟରେ ବ୍ୟକ୍ତିଗତ ଟ୍ୟାବଗୁଡ଼ିକୁ ସକ୍ରିୟ କରିପାରିବେ:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

ମାର୍କଅପ୍ |

data-toggle="tab"ଆପଣ କେବଳ ନିର୍ଦ୍ଦିଷ୍ଟ କିମ୍ବା data-toggle="pill"ଏକ ଉପାଦାନ ଉପରେ କ Java ଣସି ଜାଭାସ୍କ୍ରିପ୍ଟ ଲେଖି ବିନା ଏକ ଟ୍ୟାବ୍ କିମ୍ବା ବଟ ନାଭିଗେସନ୍ ସକ୍ରିୟ କରିପାରିବେ | navଟ୍ୟାବରେ କ୍ଲାସ୍ ଏବଂ nav-tabsକ୍ଲାସ୍ ଯୋଡିବା ulବୁଟଷ୍ଟ୍ରାପ୍ ଟ୍ୟାବ୍ ଷ୍ଟାଇଲିଂnav ପ୍ରୟୋଗ କରିବ, ଏବଂ କ୍ଲାସ୍ ଯୋଡିବା ଦ୍ୱାରା ପିଲ୍ ଷ୍ଟାଇଲିଂnav-pills ଲାଗୁ ହେବ |

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

ମଳିନ ପ୍ରଭାବ

ଟ୍ୟାବଗୁଡିକ ଦୁର୍ବଳ ହେବାକୁ, .fadeପ୍ରତ୍ୟେକରେ ଯୋଗ କରନ୍ତୁ .tab-pane| ପ୍ରଥମ ଟ୍ୟାବ୍ ପେନ୍ ମଧ୍ୟ .inପ୍ରାରମ୍ଭିକ ବିଷୟବସ୍ତୁକୁ ଦୃଶ୍ୟମାନ କରିବାକୁ ପଡିବ |

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

ପ୍ରଣାଳୀ

$().tab

ଏକ ଟ୍ୟାବ୍ ଉପାଦାନ ଏବଂ ବିଷୟବସ୍ତୁ ପାତ୍ରକୁ ସକ୍ରିୟ କରିଥାଏ | ଟ୍ୟାବରେ DOM ରେ data-targetଏକ hrefକଣ୍ଟେନର ନୋଡକୁ ଟାର୍ଗେଟ କରିବା ଉଚିତ | ଉପରୋକ୍ତ ଉଦାହରଣଗୁଡ଼ିକରେ, ଟ୍ୟାବଗୁଡ଼ିକ ହେଉଛି ଗୁଣଗୁଡ଼ିକ <a>ସହିତ s |data-toggle="tab"

.tab('show')

ପ୍ରଦତ୍ତ ଟ୍ୟାବ୍ ଚୟନ କରେ ଏବଂ ଏହାର ସଂପୃକ୍ତ ବିଷୟବସ୍ତୁ ଦେଖାଏ | ଅନ୍ୟ କ tab ଣସି ଟ୍ୟାବ୍ ଯାହା ପୂର୍ବରୁ ମନୋନୀତ ହୋଇଥିଲା ତାହା ମନୋନୀତ ହୋଇନଥାଏ ଏବଂ ଏହାର ସଂପୃକ୍ତ ବିଷୟବସ୍ତୁ ଲୁକ୍କାୟିତ ହୋଇଥାଏ | ଟ୍ୟାବ୍ ପେନ୍ ପ୍ରକୃତରେ ଦେଖାଯିବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ shown.bs.tabଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ |

$('#someTab').tab('show')

ଘଟଣା

ଏକ ନୂତନ ଟ୍ୟାବ୍ ଦେଖାଇବାବେଳେ, ଘଟଣାଗୁଡ଼ିକ ନିମ୍ନ କ୍ରମରେ ନିଆଁ ଲାଗେ:

1. hide.bs.tab(ସାମ୍ପ୍ରତିକ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଉପରେ)
2. show.bs.tab(ଦେଖାଯିବାକୁ ଥିବା ଟ୍ୟାବ୍ ଉପରେ)
3. hidden.bs.tab(ପୂର୍ବ ସକ୍ରିୟ ଟ୍ୟାବରେ, hide.bs.tabଇଭେଣ୍ଟ ପାଇଁ ସମାନ)
4. shown.bs.tab(ନୂତନ-ସକ୍ରିୟ କେବଳ ପ୍ରଦର୍ଶିତ ଟ୍ୟାବ୍ ଉପରେ, show.bs.tabଇଭେଣ୍ଟ ପାଇଁ ସମାନ)

ଯଦି କ tab ଣସି ଟ୍ୟାବ୍ ପୂର୍ବରୁ ସକ୍ରିୟ ନଥିଲା, ତେବେ hide.bs.tabଇଭେଣ୍ଟଗୁଡିକ hidden.bs.tabଫାୟାର୍ ହେବ ନାହିଁ |

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

ଟୁଲଟିପ୍ ଟୁଲ୍ ଟିପ୍.ଜସ୍ |

ଜାସନ୍ ଫ୍ରେମ୍ ଦ୍ୱାରା ଲିଖିତ ଉତ୍କୃଷ୍ଟ jQuery.tipsy ପ୍ଲଗଇନ୍ ଦ୍ୱାରା ଅନୁପ୍ରାଣିତ; ଟୁଲ୍ ଟିପ୍ସ ହେଉଛି ଏକ ଅପଡେଟ୍ ସଂସ୍କରଣ, ଯାହା ପ୍ରତିଛବି ଉପରେ ନିର୍ଭର କରେ ନାହିଁ, ଆନିମେସନ୍ ପାଇଁ CSS3 ବ୍ୟବହାର କରେ, ଏବଂ ସ୍ଥାନୀୟ ଟାଇଟଲ୍ ଷ୍ଟୋରେଜ୍ ପାଇଁ ଡାଟା-ଆଟ୍ରିବ୍ୟୁଟ୍ |

ଶୂନ-ଲମ୍ବ ଶିରୋନାମା ସହିତ ଟୁଲ୍ ଟିପ୍ସ କଦାପି ପ୍ରଦର୍ଶିତ ହୁଏ ନାହିଁ |

ଉଦାହରଣଗୁଡିକ

ଟୁଲ୍ ଟିପ୍ସ ଦେଖିବାକୁ ନିମ୍ନ ଲିଙ୍କଗୁଡିକ ଉପରେ ଚଲାନ୍ତୁ:

ଷ୍ଟାଟିକ୍ ଟୁଲ୍ ଟିପ୍ |

ଚାରୋଟି ବିକଳ୍ପ ଉପଲବ୍ଧ: ଉପର, ଡାହାଣ, ତଳ, ଏବଂ ବାମ ଆଲାଇନ୍ |

ଚାରୋଟି ଦିଗ |

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

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

ବ୍ୟବହାର

ଟୁଲ୍ ଟିପ୍ ପ୍ଲଗଇନ୍ ଚାହିଦା ଅନୁଯାୟୀ ବିଷୟବସ୍ତୁ ଏବଂ ମାର୍କଅପ୍ ସୃଷ୍ଟି କରେ ଏବଂ ଡିଫଲ୍ଟ ଭାବରେ ସେମାନଙ୍କ ଟ୍ରିଗର ଉପାଦାନ ପରେ ଟୁଲ୍ ଟିପ୍ସ ସ୍ଥାନିତ କରେ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଟୁଲ୍ ଟିପ୍ ଟ୍ରିଗର୍ କରନ୍ତୁ:

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

ମାର୍କଅପ୍ |

ଏକ ଟୁଲ୍ ଟିପ୍ ପାଇଁ ଆବଶ୍ୟକ ମାର୍କଅପ୍ କେବଳ ଏକ dataଗୁଣ ଏବଂ titleHTML ଉପାଦାନରେ ଆପଣ ଏକ ଟୁଲ୍ ଟିପ୍ ପାଇବାକୁ ଚାହୁଁଛନ୍ତି | ଏକ ଟୁଲ୍ ଟିପ୍ ର ଉତ୍ପାଦିତ ମାର୍କଅପ୍ ବହୁତ ସରଳ, ଯଦିଓ ଏହା ଏକ ଅବସ୍ଥାନ ଆବଶ୍ୟକ କରେ (ଡିଫଲ୍ଟ ଭାବରେ, topପ୍ଲଗଇନ୍ ଦ୍ୱାରା ସେଟ୍) |

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

ବିକଳ୍ପଗୁଡ଼ିକ

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-ଯେପରି ଯୋଡନ୍ତୁ data-animation=""|

ପ୍ରଣାଳୀ

$().tooltip(options)

ଏକ ଉପାଦାନ ସଂଗ୍ରହରେ ଏକ ଟୁଲ୍ ଟିପ୍ ହ୍ୟାଣ୍ଡେଲର୍ ସଂଲଗ୍ନ କରେ |

.tooltip('show')

ଏକ ଉପାଦାନର ଟୁଲଟିପ୍ ପ୍ରକାଶ କରେ | ଟୁଲ୍ ଟିପ୍ ପ୍ରକୃତରେ ଦ���ଖାଯିବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ shown.bs.tooltipଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ | ଏହାକୁ ଟୁଲ୍ ଟିପ୍ ର ଏକ “ମାନୁଆଲ୍” ଟ୍ରିଗରିଂ ଭାବରେ ବିବେଚନା କରାଯାଏ | ଶୂନ-ଲମ୍ବ ଶିରୋନାମା ସହିତ ଟୁଲ୍ ଟିପ୍ସ କଦାପି ପ୍ରଦର୍ଶିତ ହୁଏ ନାହିଁ |

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

.tooltip('hide')

ଏକ ଉପାଦାନର ଟୁଲ୍ ଟିପ୍ ଲୁଚାଏ | ଟୁଲ୍ ଟିପ୍ ପ୍ରକୃତରେ ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ hidden.bs.tooltipଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଯାଏ | ଏହାକୁ ଟୁଲ୍ ଟିପ୍ ର ଏକ “ମାନୁଆଲ୍” ଟ୍ରିଗରିଂ ଭାବରେ ବିବେଚନା କରାଯାଏ |

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

.tooltip('toggle')

ଏକ ଉପାଦାନର ଟୁଲ୍ ଟିପ୍ ଟୋଗଲ୍ କରେ | ଟୁଲ୍ ଟିପ୍ ପ୍ରକୃତରେ ଦେଖାଯିବା କିମ୍ବା ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ ଘଟଣା କିମ୍ବା ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ | ଏହାକୁ ଟୁଲ୍ ଟିପ୍ ର ଏକ “ମାନୁଆଲ୍” ଟ୍ରିଗରିଂ ଭାବରେ ବିବେଚନା କରାଯାଏ |shown.bs.tooltiphidden.bs.tooltip

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

.tooltip('destroy')

ଏକ ଉପାଦାନର ଟୁଲ୍ ଟିପ୍ ଲୁଚାଇଥାଏ ଏବଂ ନଷ୍ଟ କରେ | ପ୍ରତିନିଧୀ ବ୍ୟବହାର କରୁଥିବା ସାଧନଗୁଡ଼ିକ (ଯାହା ବିକଳ୍ପ ବ୍ୟବହାର କରିselector ସୃଷ୍ଟି ହୋଇଥାଏ ) ବଂଶଧର ଟ୍ରିଗର ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ପୃଥକ ଭାବରେ ନଷ୍ଟ ହୋଇପାରିବ ନାହିଁ |

$('#element').tooltip('destroy')

ଘଟଣା

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

ଦ୍ secondary ିତୀୟ ସୂଚନା ପାଇଁ ଯେକ element ଣସି ଉପାଦାନରେ, ଆଇପ୍ୟାଡରେ ଥିବା ପରି ବିଷୟବସ୍ତୁର ଛୋଟ ଓଭରଲେଜ୍ ଯୋଡନ୍ତୁ |

ପପୋଭର ଯାହାର ଉଭୟ ଆଖ୍ୟା ଏବଂ ବିଷୟବସ୍ତୁ ଶୂନ୍ୟ-ଲମ୍ବ କେବେବି ପ୍ରଦର୍ଶିତ ହୁଏ ନାହିଁ |

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

ଉଦାହରଣଗୁଡିକ

ଷ୍ଟାଟିକ୍ ପପ୍ ଓଭର |

ଚାରୋଟି ବିକଳ୍ପ ଉପଲବ୍ଧ: ଉପର, ଡାହାଣ, ତଳ, ଏବଂ ବାମ ଆଲାଇନ୍ |

ଲାଇଭ୍ ଡେମୋ |

<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-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

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

ପରବର୍ତ୍ତୀ କ୍ଲିକ୍ ରେ ବରଖାସ୍ତ କରନ୍ତୁ |

focusଉପଭୋକ୍ତା କରୁଥିବା ପରବର୍ତ୍ତୀ କ୍ଲିକରେ ପପୋଭରଗୁଡ଼ିକୁ ବରଖାସ୍ତ କରିବାକୁ ଟ୍ରିଗର ବ୍ୟବହାର କରନ୍ତୁ |

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

ବ୍ୟବହାର

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ପପଓଭର ସକ୍ଷମ କରନ୍ତୁ:

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

ବିକଳ୍ପଗୁଡ଼ିକ

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-ଯେପରି ଯୋଡନ୍ତୁ data-animation=""|

ପ୍ରଣାଳୀ

$().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('destroy')

ଏକ ଉପାଦାନର ପପ୍ ଓଭର ଲୁଚାଇଥାଏ ଏବଂ ନଷ୍ଟ କରେ | ପ୍ରତିନିଧୀ ବ୍ୟବହାର କରୁଥିବା ପପୋଭରଗୁଡିକ (ଯାହା ବିକଳ୍ପ ବ୍ୟବହାର କରିselector ସୃଷ୍ଟି ହୋଇଥାଏ ) ବଂଶଧର ଟ୍ରିଗର ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ପୃଥକ ଭାବରେ ନଷ୍ଟ ହୋଇପାରିବ ନାହିଁ |

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

ଘଟଣା

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

ଆଲର୍ଟ ମେସେଜ୍ alert.js

ଉଦାହରଣ ଆଲର୍ଟ |

ଏହି ପ୍ଲଗଇନ୍ ସହିତ ସମସ୍ତ ସତର୍କ ବାର୍ତ୍ତାଗୁଡ଼ିକରେ ଖାରଜ କାର୍ଯ୍ୟକାରିତା ଯୋଡନ୍ତୁ |

ଏକ ବଟନ୍ ବ୍ୟବହାର କରିବାବେଳେ .close, ଏହା ନିଶ୍ଚିତ ଭାବରେ ପ୍ରଥମ ସନ୍ତାନ ହେବ .alert-dismissibleଏବଂ ମାର୍କଅପ୍ ରେ ଏହା ପୂର୍ବରୁ କ text ଣସି ପାଠ୍ୟ ବିଷୟବସ୍ତୁ ଆସିପାରିବ ନାହିଁ |

ବ୍ୟବହାର

data-dismiss="alert"ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଏକ ଆଲର୍ଟ ବନ୍ଦ କାର୍ଯ୍ୟକାରିତା ଦେବା ପାଇଁ କେବଳ ଆପଣଙ୍କର ବନ୍ଦ ବଟନ୍ ସହିତ ଯୋଡନ୍ତୁ | ଏକ ଆଲର୍ଟ ବନ୍ଦ କରିବା ଏହାକୁ DOM ରୁ ବାହାର କରିଥାଏ |

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

ବନ୍ଦ ହେବାବେଳେ ଆପଣଙ୍କର ଆଲର୍ଟ ଆନିମେସନ୍ ବ୍ୟବହାର କରିବାକୁ, ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ସେମାନଙ୍କ ପାଖରେ .fadeଏବଂ ଅଛି |.in ଶ୍ରେଣୀଗୁଡିକ ପ୍ରୟୋଗ ହୋଇଛି |

ପ୍ରଣାଳୀ

$().alert()

ବଂଶଧର ଉପାଦାନଗୁଡ଼ିକ ଉପରେ କ୍ଲିକ୍ ଇଭେଣ୍ଟଗୁଡିକ ପାଇଁ ଏକ ଆଲର୍ଟ ଶୁଣେ ଯାହାର data-dismiss="alert"ଗୁଣ ଅଛି | (ଡାଟା-ଆପିର ଅଟୋ-ପ୍ରାରମ୍ଭିକରଣ ବ୍ୟବହାର କରିବା ସମୟରେ ଆବଶ୍ୟକ ନୁହେଁ |)

$().alert('close')

ଏହାକୁ DOM ରୁ ହଟାଇ ଏକ ଆଲର୍ଟ ବନ୍ଦ କରେ | ଯଦି ଉପାଦାନରେ .fadeଏବଂ .inଶ୍ରେଣୀଗୁଡିକ ଉପସ୍ଥିତ ଥାଏ, ତେବେ ଏହାକୁ ହଟାଇବା ପୂର୍ବରୁ ସତର୍କତା ଦୂର ହୋଇଯିବ |

ଘଟଣା

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ଆଲର୍ଟ ପ୍ଲଗଇନ୍ ଆଲର୍ଟ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ୍ ପାଇଁ କିଛି ଘଟଣାକୁ ପ୍ରକାଶ କରିଥାଏ |

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

ବଟନ୍ ବଟନ୍

ବଟନ୍ ସହିତ ଅଧିକ କରନ୍ତୁ | ଟୁଲ୍ ବାର୍ ପରି ଅଧିକ ଉପାଦାନ ପାଇଁ କଣ୍ଟ୍ରୋଲ୍ ବଟନ୍ ଷ୍ଟେଟସ୍ କିମ୍ବା ବଟନ୍ ଗୋଷ୍ଠୀ ସୃଷ୍ଟି କରେ |

ରାଜ୍ୟସ୍ତରୀୟ |

data-loading-text="Loading..."ଏକ ବଟନ୍ ଉପରେ ଏକ ଲୋଡିଂ ସ୍ଥିତି ବ୍ୟବହାର କରିବାକୁ ଯୋଡନ୍ତୁ |

ଏହି ବ feature ଶିଷ୍ଟ୍ୟ v3.3.5 ପରଠାରୁ ପୁରୁଣା ହୋଇଛି ଏବଂ v4 ରେ ଅପସାରିତ ହୋଇଛି |

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

ଏକକ ଟୋଗଲ୍ |

data-toggle="button"ଗୋଟିଏ ବଟନ୍ ଉପରେ ଟୋଗଲ୍ ସକ୍ରିୟ କରିବାକୁ ଯୋଡନ୍ତୁ |

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

ଚେକ୍ ବକ୍ସ / ରେଡିଓ |

ନିଜ ନିଜ ଶ yles ଳୀରେ ଟୋଗଲ୍ କରିବାକୁ ସକ୍ଷମ data-toggle="buttons"କରିବାକୁ ଏକ ଧାରଣକାରୀ ଚେକ୍ ବକ୍ସ କିମ୍ବା ରେଡିଓ ଇନପୁଟ୍ ସହିତ ଯୋଡନ୍ତୁ |.btn-group

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

ପ୍ରଣାଳୀ

$().button('toggle')

ଟୋଗଲ୍ସ ସ୍ଥିତିକୁ ଠେଲିଦିଏ | ଏହା ସକ୍ରିୟ ହୋଇଥିବା ବଟନ୍ କୁ ଦିଏ |

$().button('reset')

ବଟନ୍ ସ୍ଥିତିକୁ ପୁନ ets ସେଟ୍ କରେ - ପାଠ୍ୟକୁ ମୂଳ ପାଠ୍ୟକୁ ସ୍ୱାପ୍ କରେ | ଏହି ପଦ୍ଧତି ଅସନ୍ତୁଳିତ ଏବଂ ପୁନ et ସେଟ୍ ପ୍ରକୃତରେ ସମାପ୍ତ ହେବା ପୂର୍ବରୁ ଫେରିଥାଏ |

$().button(string)

ଯେକ any ଣସି ତଥ୍ୟ ପରିଭାଷିତ ପାଠ୍ୟ ସ୍ଥିତିକୁ ପାଠ୍ୟ ଅଦଳବଦଳ କରେ |

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Collapse.js _

ନମନୀୟ ପ୍ଲଗଇନ୍ ଯାହା ସହଜ ଟୋଗଲ୍ ଆଚରଣ ପାଇଁ ହାତଗଣତି କ୍ଲାସ୍ ବ୍ୟବହାର କରେ |

ଉଦାହରଣ |

ଶ୍ରେଣୀ ପରିବର୍ତ୍ତନ ମାଧ୍ୟମରେ ଅନ୍ୟ ଏକ ଉପାଦାନ ଦେଖାଇବା ଏବଂ ଲୁଚାଇବା ପାଇଁ ନିମ୍ନରେ ଥିବା ବଟନ୍ କ୍ଲିକ୍ କରନ୍ତୁ:

• .collapseବିଷୟବସ୍ତୁ ଲୁଚାଏ |
• .collapsingସଂକ୍ରମଣ ସମୟରେ ପ୍ରୟୋଗ କରାଯାଏ |
• .collapse.inବିଷୟବସ୍ତୁ ଦେଖାଏ |

ଆପଣ ଆଟ୍ରିବ୍ୟୁଟ୍ ସହିତ ଏକ ଲିଙ୍କ୍ href, କିମ୍ବା ଆଟ୍ରିବ୍ୟୁଟ୍ ସହିତ ଏକ ବଟନ୍ ବ୍ୟବହାର କରିପାରିବେ data-target| ଉଭୟ କ୍ଷେତ୍ରରେ, data-toggle="collapse"ଆବଶ୍ୟକ |

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Accordion ଉଦାହରଣ |

ପ୍ୟାନେଲ୍ ଉପାଦାନ ସହିତ ଏକ ଆକର୍ଡିଅନ୍ ସୃଷ୍ଟି କରିବାକୁ ଡିଫଲ୍ଟ ପତନ ଆଚରଣକୁ ବିସ୍ତାର କରନ୍ତୁ |

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

.panel-bodyS ସହିତ s କୁ ଅଦଳବଦଳ କରିବା ମଧ୍ୟ ସମ୍ଭବ .list-group|

ବ୍ୟବହାର

କ୍ଲାସ୍ ପ୍ଲଗଇନ୍ ଭାରୀ ଉଠାଇବା ପାଇଁ କିଛି ଶ୍ରେଣୀ ବ୍ୟବହାର କରେ:

• .collapseବିଷୟବସ୍ତୁ ଲୁଚାଏ |
• .collapse.inବିଷୟବସ୍ତୁ ଦେଖାଏ |
• .collapsingଯେତେବେଳେ ପରିବର୍ତ୍ତନ ଆରମ୍ଭ ହୁଏ, ଏବଂ ଏହା ସମାପ୍ତ ହେଲେ ଅପସାରିତ ହୁଏ |

ଏହି ଶ୍ରେଣୀଗୁଡ଼ିକରେ ମିଳିପାରିବ component-animations.less|

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ |

ଏକ ଭୁଶୁଡ଼ୁଥିବା ଉପାଦାନର ନିୟନ୍ତ୍ରଣକୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ନ୍ୟସ୍ତ କରିବାକୁ କେବଳ data-toggle="collapse"ଏକ ଉପାଦାନକୁ ଯୋଡନ୍ତୁ | data-targetସଂପତ୍ତି ପ୍ରୟୋଗ କରିବାକୁ data-targetଆଟ୍ରିବ୍ୟୁଟ୍ ଏକ CSS ଚୟନକର୍ତ୍ତା ଗ୍ରହଣ କରେ | collapseକ୍ଲାସ୍ସିବଲ୍ ଉପାଦାନରେ କ୍ଲାସ୍ ଯୋଡିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ | ଯଦି ଆପଣ ଏହାକୁ ଡିଫଲ୍ଟ ଖୋଲିବାକୁ ଚାହାଁନ୍ତି, ଅତିରିକ୍ତ ଶ୍ରେଣୀ ଯୋଡନ୍ତୁ in|

ଏକ ସଂପନ୍ନ ନିୟନ୍ତ୍ରଣରେ ଆକର୍ଡିଅନ୍ ପରି ଗୋଷ୍ଠୀ ପରିଚାଳନା ଯୋଡିବାକୁ, ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ data-parent="#selector"| ଏହାକୁ କାର୍ଯ୍ୟରେ ଦେଖିବା ପାଇଁ ଡେମୋକୁ ଅନୁସରଣ କରନ୍ତୁ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |

ସହିତ ମାନୁଆଲ୍ ସକ୍ଷମ କରନ୍ତୁ:

$('.collapse').collapse()

ବିକଳ୍ପଗୁଡ଼ିକ

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-ଯେପରି ଯୋଡନ୍ତୁ data-parent=""|

ପ୍ରଣାଳୀ

.collapse(options)

ତୁମର ବିଷୟବସ୍ତୁକୁ ଏକ ସଂପୃକ୍ତ ଉପାଦାନ ଭାବରେ ସକ୍ରିୟ କରିଥାଏ | ଏକ ଇଚ୍ଛାଧୀନ ବିକଳ୍ପ ଗ୍ରହଣ କରେ object|

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

ଦେଖାଯାଇଥିବା କିମ୍ବା ଲୁକ୍କାୟିତ ହେବା ପାଇଁ ଏକ ଭୁଶୁଡ଼ୁଥିବା ଉପାଦାନକୁ ଟୋଗଲ୍ କରେ | ଭୁଶୁଡ଼ି ପଡୁଥିବା ଉପାଦାନ ପ୍ରକୃତରେ ଦେଖାଯିବା କିମ୍ବା ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ shown.bs.collapseକିମ୍ବା hidden.bs.collapseଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲ୍ କରୁଥିବା ବ୍ୟକ୍ତିଙ୍କ ନିକଟକୁ ଫେରିଥାଏ |

.collapse('show')

ଏକ ଭୁଶୁଡ଼ୁଥିବା ଉପାଦାନ ଦେଖାଏ | ଭୁଶୁଡ଼ି ପଡୁଥିବା ଉପାଦାନ ପ୍ରକୃତରେ ଦେଖାଯିବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ shown.bs.collapseଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ |

.collapse('hide')

ଏକ ଭୁଶୁଡ଼ୁଥିବା ଉପାଦାନକୁ ଲୁଚାଇଥାଏ | ଭୁଶୁଡ଼ି ପଡୁଥିବା ଉପାଦାନ ପ୍ରକୃତରେ ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ hidden.bs.collapseଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଯାଏ |

ଘଟଣା

ବୁଟଷ୍ଟ୍ରାପ୍ ର କ୍ଲାସ୍ କ୍ଲାସ୍ କ୍ଲାସ୍ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ୍ ପାଇଁ କିଛି ଘଟଣା ପ୍ରକାଶ କରେ |

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

କାରୋସେଲ carousel.js

କାରୁସେଲ ପରି ଉପାଦାନ ମାଧ୍ୟମରେ ସାଇକେଲ ଚଲାଇବା ପାଇଁ ଏକ ସ୍ଲାଇଡ୍ ଶୋ ଉପାଦାନ | ନେଷ୍ଟେଡ୍ କାରୁସେଲ୍ ସମର୍ଥିତ ନୁହେଁ |

ଉଦାହରଣଗୁଡିକ

ପୂର୍ବ ପରବର୍ତ୍ତୀ

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ବ tion କଳ୍ପିକ ଶିରୋନାମା |

.carousel-captionଯେକ any ଣସି ଭିତରେ ଥିବା ଉପାଦାନ ସହିତ ସହଜରେ ଆପଣଙ୍କର ସ୍ଲାଇଡ୍ ରେ କ୍ୟାପସନ୍ ଯୋଡନ୍ତୁ .item| ସେଠାରେ ଯେକ any ଣସି ଇଚ୍ଛାଧୀନ HTML ରଖନ୍ତୁ ଏବଂ ଏହା ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଆଲାଇନ୍ ହୋଇ ଫର୍ମାଟ୍ ହେବ |

ପ୍ରଥମେ ସ୍ଲାଇଡ୍ ଲେବଲ୍ |

Nulla vitae elit libero, a pharetra augue mollis interdum।

ଦ୍ୱିତୀୟ ସ୍ଲାଇଡ୍ ଲେବଲ୍ |

ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ଆମ୍, କନସେକ୍ଟେଟର୍ ଆଡିପିସିଙ୍ଗ୍ ଏଲିଟ୍ |

ତୃତୀୟ ସ୍ଲାଇଡ୍ ଲେବଲ୍ |

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

ପୂର୍ବ ପରବର୍ତ୍ତୀ

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

ବ୍ୟବହାର

ଏକାଧିକ କାରୁସେଲ୍ |

କାରୁସେଲ ସଠିକ୍ ଭାବରେ କାର୍ଯ୍ୟ କରିବା ପାଇଁ କାରୁସେଲଗୁଡିକ idବାହ୍ୟ ପାତ୍ରରେ (the .carousel) ବ୍ୟବହାର ଆବଶ୍ୟକ କରେ | ଏକାଧିକ କାରୁସେଲ ଯୋଡିବାବେଳେ, କିମ୍ବା କାରୁସେଲର ପରିବର୍ତ୍ତନ କରିବାବେଳେ id, ସମ୍ପୃକ୍ତ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକୁ ଅଦ୍ୟତନ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ |

କାରୁସେଲର ସ୍ଥିତିକୁ ସହଜରେ ନିୟନ୍ତ୍ରଣ କରିବାକୁ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରନ୍ତୁ | data-slideକୀ ଶବ୍ଦଗୁଡ଼ିକୁ ଗ୍ରହଣ କରେ prevକିମ୍ବା next, ଯାହା ବର୍ତ୍ତମାନର ସ୍ଥିତି ସହିତ ସ୍ଲାଇଡ୍ ପୋଜିସନ୍ ବଦଳାଇଥାଏ | data-slide-toବ ly କଳ୍ପିକ ଭାବରେ, କଞ୍ଚା ସ୍ଲାଇଡ୍ ଇଣ୍ଡେକ୍ସକୁ କାରୁସେଲକୁ ପଠାଇବା ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ data-slide-to="2", ଯାହା ସ୍ଲାଇଡ୍ ସ୍ଥିତିକୁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ସୂଚକାଙ୍କକୁ ଆରମ୍ଭ କରିଥାଏ 0|

data-ride="carousel"ପେଜ୍ ଲୋଡ୍ ଠାରୁ ଆରମ୍ଭ କରି ଆନିମେସନ୍ ଭାବରେ ଏକ କାରୁସେଲ୍ ଚିହ୍ନିତ କରିବାକୁ ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହୃତ ହୁଏ | ସମାନ କାରୁସେଲର (ଅନାବଶ୍ୟକ ଏବଂ ଅନାବଶ୍ୟକ) ସ୍ପଷ୍ଟ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ରାରମ୍ଭିକରଣ ସହିତ ଏହାକୁ ବ୍ୟବହାର କରାଯାଇପାରିବ ନାହିଁ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |

ସହିତ କାରୁସେଲକୁ କଲ୍ କରନ୍ତୁ:

$('.carousel').carousel()

ବିକଳ୍ପଗୁଡ଼ିକ

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-ଯେପରି ଯୋଡନ୍ତୁ data-interval=""|

ପ୍ରଣାଳୀ

.carousel(options)

ଏକ ଇଚ୍ଛାଧୀନ ବିକଳ୍ପ ସହିତ କାରୁସେଲକୁ ଆରମ୍ଭ କରେ objectଏବଂ ଆଇଟମ୍ ମାଧ୍ୟମରେ ସାଇକେଲ ଚଲାଇବା ଆରମ୍ଭ କରେ |

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

ବାମରୁ ଡାହାଣକୁ କାରୁସେଲ ଆଇଟମ୍ ମାଧ୍ୟମରେ ଚକ୍ର |

.carousel('pause')

ଆଇଟମ୍ ମାଧ୍ୟମରେ ସାଇକେଲ ଚଲାଇବା ଠାରୁ କାରୁସେଲକୁ ବନ୍ଦ କରିଦିଏ |

.carousel(number)

କାରୁସେଲକୁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଫ୍ରେମ୍ (0 ଆଧାରିତ, ଏକ ଆରେ ପରି) ଚକ୍ର କରେ |

.carousel('prev')

ପୂର୍ବ ଆଇଟମ୍ କୁ ଚକ୍ର |

.carousel('next')

ପରବର୍ତ୍ତୀ ଆଇଟମ୍ ପାଇଁ ଚକ୍ର |

ଘଟଣା

ବୁଟଷ୍ଟ୍ରାପର କାରୁସେଲ ଶ୍ରେଣୀ କାରୁସେଲ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ ପାଇଁ ଦୁଇଟି ଇଭେଣ୍ଟକୁ ପ୍ରକାଶ କରିଥାଏ |

ଉଭୟ ଇଭେଣ୍ଟରେ ନିମ୍ନଲିଖିତ ଅତିରିକ୍ତ ଗୁଣ ଅଛି:

• direction: ଯେଉଁ ଦିଗରେ କାରୁସେଲ୍ ସ୍ଲାଇଡ୍ ହେଉଛି ( "left"କିମ୍ବା "right") |
• relatedTarget: DOM ଉପାଦାନ ଯାହା ସକ୍ରିୟ ଆଇଟମ୍ ଭାବରେ ସ୍ଥାନିତ ହୋଇଛି |

ସମସ୍ତ କାରୁସେଲ ଇଭେଣ୍ଟ ନିଜେ କାରୁସେଲ ଉପରେ (ଅର୍ଥାତ୍ <div class="carousel">) ଉପରେ ଗୁଳି ଚଳାଇଥାଏ |

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

ଆଫିକ୍ସ ଆଫିକ୍ସ। Js

ଉଦାହରଣ |

ଆଫିକ୍ସ ପ୍ଲଗଇନ୍ ଟୋଗଲ୍ position: fixed;ଅନ୍ ଏବଂ ଅଫ୍, ମିଳୁଥିବା ପ୍ରଭାବକୁ ଅନୁକରଣ କରେ position: sticky;| ଡାହାଣ ପାର୍ଶ୍ୱରେ ଥିବା ସବନାଭିଗେସନ୍ ହେଉଛି ଆଫିକ୍ସ ପ୍ଲଗଇନ୍ ର ଏକ ଲାଇଭ୍ ଡେମୋ |

ବ୍ୟବହାର

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ କିମ୍ବା ନିଜ ଜାଭାସ୍କ୍ରିପ୍ଟ ସହିତ ମାନୁଆଲ୍ ଭାବରେ ଆଫିକ୍ସ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରନ୍ତୁ | ଉଭୟ ପରିସ୍ଥିତିରେ, ତୁମର ଆଫିକ୍ସଡ୍ ବିଷୟବସ୍ତୁର ପୋଜିସନ୍ ଏବଂ ମୋଟେଇ ପାଇଁ ତୁମକୁ CSS ପ୍ରଦାନ କରିବାକୁ ପଡିବ |

ଟିପ୍ପଣୀ: ଏକ ସଫାରି ରେଣ୍ଡରିଂ ବଗ୍ କାରଣରୁ ଏକ ଅପେକ୍ଷାକୃତ ସ୍ଥିତ ଉପାଦାନରେ ଥିବା ଏକ ଉପାଦାନରେ ଆଫିକ୍ସ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରନ୍ତୁ ନାହିଁ |

CSS ମାଧ୍ୟମରେ ପୋଜିସନ୍ |

ଆଫିକ୍ସ ପ୍ଲଗଇନ୍ ତିନୋଟି ଶ୍ରେଣୀ ମଧ୍ୟରେ ଟୋଗଲ୍ କରେ, ପ୍ରତ୍ୟେକଟି ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ସ୍ଥିତିକୁ ପ୍ରତିନିଧିତ୍ୱ କରେ : .affix, .affix-topଏବଂ .affix-bottom। ପ୍ରକୃତ ସ୍ଥିତିକୁ ପରିଚାଳନା କରିବା ପାଇଁ ଏହି ଶ୍ରେଣୀଗୁଡିକ ନିଜେ (ଏହି ପ୍ଲଗଇନ୍ ଠାରୁ ସ୍ independent ାଧୀନ) ପାଇଁ , ଆପଣ ନିଶ୍ଚିତ ଭାବରେ ଶ yles ଳୀଗୁଡିକ position: fixed;ପ୍ରଦାନ କରିବେ |.affix

ଆଫିକ୍ସ ପ୍ଲଗଇନ୍ କିପରି କାମ କରେ ତାହା ଏଠାରେ ଅଛି:

1. ଆରମ୍ଭ କରିବାକୁ, ପ୍ଲଗଇନ୍ .affix-topଉପାଦାନ ଏହାର ସର୍ବୋଚ୍ଚ ସ୍ଥିତିରେ ଅଛି ବୋଲି ସୂଚାଇବା ପାଇଁ ଯୋଗ କରେ | ଏହି ସମୟରେ କ CS ଣସି CSS ପୋଜିସନ୍ ଆବଶ୍ୟକ ନାହିଁ |
2. ତୁମେ ସଂଲଗ୍ନ କରିବାକୁ ଚାହୁଁଥିବା ଉପାଦାନକୁ ସ୍କ୍ରୋଲ୍ କରିବା ପ୍ରକୃତ ଆଫିକ୍ସିଂକୁ ଟ୍ରିଗର କରିବା ଉଚିତ | ଏହା ହେଉଛି ଯେଉଁଠାରେ ସ୍ଥାନାନ୍ତର ଏବଂ ସେଟ୍ ( .affixବୁଟଷ୍ଟ୍ରାପ୍ ର CSS ଦ୍ୱାରା ପ୍ରଦତ୍ତ) |.affix-topposition: fixed;
3. .affixଯଦି ଏକ ତଳ ଅଫସେଟ୍ ବ୍ୟାଖ୍ୟା କରାଯାଇଛି, ଅତୀତକୁ ସ୍କ୍ରୋଲ୍ କରିବା ସହିତ ଏହା ବଦଳାଇବା ଉଚିତ .affix-bottom| ଯେହେତୁ ଅଫସେଟ୍ ଇଚ୍ଛାଧୀନ, ଗୋଟିଏ ସେଟିଂ ଆପଣଙ୍କୁ ଉପଯୁକ୍ତ CSS ସେଟ୍ କରିବାକୁ ଆବଶ୍ୟକ କରେ | ଏହି କ୍ଷେତ୍ରରେ, position: absolute;ଆବଶ୍ୟକ ସମୟରେ ଯୋଗ କରନ୍ତୁ | ସେଠାରୁ ଉପାଦାନକୁ କେଉଁଠାରେ ସ୍ଥିର କରାଯିବ ତାହା ସ୍ଥିର କରିବାକୁ ପ୍ଲଗଇନ୍ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ଅପ୍ସନ୍ ବ୍ୟବହାର କରେ |

ନିମ୍ନରେ ବ୍ୟବହାର ବିକଳ୍ପଗୁଡ଼ିକ ପାଇଁ ଆପଣଙ୍କର CSS ସେଟ୍ କରିବାକୁ ଉପରୋକ୍ତ ପଦକ୍ଷେପଗୁଡ଼ିକୁ ଅନୁସରଣ କରନ୍ତୁ |

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ |

ଯେକ any ଣସି ଉପାଦାନରେ ସହଜରେ ଆଫିକ୍ସ ଆଚରଣ ଯୋଡିବାକୁ, data-spy="affix"ଆପଣ ଗୁପ୍ତଚର କରିବାକୁ ଚାହୁଁଥିବା ଉପାଦାନରେ ଯୋଗ କରନ୍ତୁ | କେତେବେଳେ ଏକ ଉପାଦାନର ପିନ୍ ଟୋଗଲ୍ କରିବାକୁ ବ୍ୟାଖ୍ୟା କରିବାକୁ ଅଫସେଟ୍ ବ୍ୟବହାର କରନ୍ତୁ |

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଆଫିକ୍ସ ପ୍ଲଗଇନକୁ କଲ୍ କରନ୍ତୁ:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

ବିକଳ୍ପଗୁଡ଼ିକ

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-ଯେପରି ଯୋଡନ୍ତୁ data-offset-top="200"|

ପ୍ରଣାଳୀ

.affix(options)

ତୁମର ବିଷୟବସ୍ତୁକୁ ଆଫିକ୍ସଡ୍ ବିଷୟବସ୍ତୁ ଭାବରେ ସକ୍ରିୟ କରେ | ଏକ ଇଚ୍ଛାଧୀନ ବିକଳ୍ପ ଗ୍ରହଣ କରେ object|

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

ସଂପୃକ୍ତ ଉପାଦାନଗୁଡ଼ିକର ପରିମାପ, ସ୍ଥିତି, ଏବଂ ସ୍କ୍ରୋଲ୍ ସ୍ଥିତିକୁ ଆଧାର କରି ଆଫିକ୍ସର ସ୍ଥିତିକୁ ପୁନ al ଗଣନା କରେ | .affix, .affix-topଏବଂ, ଶ୍ରେଣୀଗୁଡିକ ନୂତନ ରାଜ୍ୟ .affix-bottomଅନୁଯାୟୀ ଆଫିକ୍ସଡ୍ ବିଷୟବସ୍ତୁରୁ ଯୋଡା ଯାଇଛି କିମ୍ବା ଅପସାରଣ କରାଯାଇଛି | ଆଫିକ୍ସଡ୍ ବିଷୟବସ୍ତୁର ସଠିକ୍ ପୋଜିସନ୍ ସୁନିଶ୍ଚିତ କରିବା ପାଇଁ ଯେତେବେଳେ ଏହି ଆଫିକ୍ସଡ୍ ବିଷୟବସ୍ତୁ କିମ୍ବା ଟାର୍ଗେଟ୍ ଉପାଦାନର ଆକାର ପରିବର୍ତ୍ତନ ହୁଏ, ଏହି ପଦ୍ଧତିକୁ ଡାକିବା ଆବଶ୍ୟକ |

$('#myAffix').affix('checkPosition')

ଘଟଣା

ବୁଟଷ୍ଟ୍ରାପ୍ ର ଆଫିକ୍ସ ପ୍ଲଗଇନ୍ ଆଫିକ୍ସ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ୍ ପାଇଁ କିଛି ଇଭେଣ୍ଟକୁ ପ୍ରକାଶ କରେ |