ଜାଭାସ୍କ୍ରିପ୍ଟ |

ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉପାଦାନଗୁଡ଼ିକୁ ଜୀବନ୍ତ କର - ବର୍ତ୍ତମାନ 13 କଷ୍ଟମ୍ jQuery ପ୍ଲଗଇନ୍ ସହିତ |

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

ପ୍ଲଗଇନଗୁଡିକ ପୃଥକ ଭାବରେ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇପାରେ (ଯଦିଓ କେତେକଙ୍କର ନିର୍ଭରଶୀଳତା ଆବଶ୍ୟକ), କିମ୍ବା ସମସ୍ତେ ଏକାଥରେ | ଉଭୟ bootstrap.js ଏବଂ bootstrap.min.js ଗୋଟିଏ ଫାଇଲରେ ସମସ୍ତ ପ୍ଲଗଇନ୍ ଧାରଣ କରିଥାଏ |

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

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

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

  1. $ ( 'ଶରୀର' ) | ବନ୍ଦ ( '.data-api' )

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

  1. $ ( 'ଶରୀର' ) | ବନ୍ଦ ( '.alert.data-api' )

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

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

  1. $ ( ".btn.danger" ) ବଟନ୍ ( "ଟୋଗଲ୍" ) | addClass ( "ଚର୍ବି" )

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

  1. $ ( "# ମୋମୋଡାଲ୍" ) | ମୋଡାଲ୍ () // ଡିଫଲ୍ଟ ସହିତ ଆରମ୍ଭ ହୋଇଛି |
  2. $ ( "# ମୋମୋଡାଲ୍" ) | ମୋଡାଲ୍ ({ କୀବୋର୍ଡ୍ : ମିଥ୍ୟା }) // କ keyboard ଣସି କୀବୋର୍ଡ୍ ସହିତ ଆରମ୍ଭ ହୋଇନାହିଁ |
  3. $ ( "# ମୋମୋଡାଲ୍" ) | ମୋଡାଲ୍ ( 'ଶୋ' ) // ତୁରନ୍ତ ଶୋ ଆରମ୍ଭ କରେ ଏବଂ ଆହ୍ .ାନ କରେ |

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

କ No ଣସି ଦ୍ୱନ୍ଦ ନାହିଁ |

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

  1. var bootstrapButton = $ fn ବଟନ୍ _ noConflict () // ପୂର୍ବରୁ ଦିଆଯାଇଥିବା ମୂଲ୍ୟକୁ $ .fn.button ଫେରସ୍ତ କରନ୍ତୁ |
  2. $ fn bootstrapBtn = bootstrapButton // ଦିଅନ୍ତୁ $ ()। bootstrapBtn ବୁଟଷ୍ଟ୍ରାପ କାର୍ଯ୍ୟକାରିତା

ଘଟଣା

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

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

  1. $ ( '# ମୋଡାଲ୍' ) | on ( 'show' , function ( e ) {
  2. ଯଦି (! ଡାଟା ) ରିଟର୍ନ ପ୍ରତିରୋଧ ଡିଫଲ୍ଟ () // ମୋଡାଲ୍ ଦେଖାଯିବା ବନ୍ଦ କରିଦିଏ |
  3. })

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

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

କେସ୍ ବ୍ୟବହାର କରନ୍ତୁ |

ସ୍ଥାନାନ୍ତରଣ ପ୍ଲଗଇନର କିଛି ଉଦାହରଣ:

  • ମୋଡାଲରେ ସ୍ଲାଇଡ୍ କିମ୍ବା ଫିଡିଙ୍ଗ୍ |
  • ଟ୍ୟାବଗୁଡ଼ିକ କ୍ଷୀଣ ହେଉଛି |
  • ଚେତାବନୀ
  • ସ୍ଲାଇଡ୍ କାରୁସେଲ୍ ପ୍ୟାନ୍ |

ଉଦାହରଣଗୁଡିକ

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

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

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

  1. <div class = "ମୋଡାଲ୍ ଲୁକ୍କାୟିତ" > |
  2. <div class = "modal-header" > |
  3. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "ବନ୍ଦ" ଡାଟା-ଖାରଜ = "ମୋଡାଲ୍" aria-hidden = "true" > & times; </button>
  4. <h3> ମୋଡାଲ୍ ହେଡର୍ </ h3> |
  5. </div>
  6. <div class = "modal-body" > |
  7. <p> ଗୋଟିଏ ଭଲ ଶରୀର… </p> |
  8. </div>
  9. <div class = "modal-footer" > |
  10. <a href = "#" class = "btn"> ବନ୍ଦ </a> |
  11. <a href = "#" class = "btn btn-primary"> ପରିବର୍ତ୍ତନଗୁଡିକ ସଂରକ୍ଷଣ କରନ୍ତୁ </a>
  12. </div>
  13. </div>

ଲାଇଭ୍ ଡେମୋ |

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

  1. <! - ମୋଡାଲ୍ ଟ୍ରିଗର କରିବାକୁ ବଟନ୍ -> |
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal"> ଡେମୋ ମୋଡାଲ୍ ଆରମ୍ଭ କରନ୍ତୁ </a>
  3.  
  4. <! - ମୋଡାଲ୍ ->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" > |
  7. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "ବନ୍ଦ" ଡାଟା-ଖାରଜ = "ମୋଡାଲ୍" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > ମୋଡାଲ୍ ହେଡର୍ </ h3> |
  9. </div>
  10. <div class = "modal-body" > |
  11. <p> ଗୋଟିଏ ଭଲ ଶରୀର… </p> |
  12. </div>
  13. <div class = "modal-footer" > |
  14. <ବଟନ୍ ଶ୍ରେଣୀ = "btn" ଡାଟା-ଖାରଜ = "ମୋଡାଲ୍" aria-hidden = "true" > ବନ୍ଦ </button>
  15. <ବଟନ୍ ଶ୍ରେଣୀ = "btn btn-primary" > ପରିବର୍ତ୍ତନଗୁଡିକ ସଂରକ୍ଷଣ କରନ୍ତୁ </button> |
  16. </div>
  17. </div>

ବ୍ୟବହାର

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

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

  1. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଡାଟା-ଟୋଗଲ୍ = "ମୋଡାଲ୍" ଡାଟା-ଟାର୍ଗେଟ୍ = "# ମିମୋଡାଲ୍" > ମୋଡାଲ୍ ଲଞ୍ଚ କରନ୍ତୁ </button>

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

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

  1. $ ( '# ମିମୋଡାଲ୍' ) | ମୋଡାଲ୍ ( ବିକଳ୍ପ )

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

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

ନାମ ଟାଇପ୍ କରନ୍ତୁ | ଡିଫଲ୍ଟ | ବର୍ଣ୍ଣନା
ପୃଷ୍ଠଭୂମି ବୁଲିଅନ୍ ସତ ଏକ ମୋଡାଲ୍-ବ୍ୟାକଡ୍ରପ୍ ଉପାଦାନ ଅନ୍ତର୍ଭୂକ୍ତ କରେ | ବ ly କଳ୍ପିକ ଭାବରେ, ଏକ ପୃଷ୍ଠଭୂମି ପାଇଁ ନିର୍ଦ୍ଦିଷ୍ଟ staticକରନ୍ତୁ ଯାହା କ୍ଲିକ୍ ଉପରେ ମୋଡାଲ୍ ବନ୍ଦ କରେ ନାହିଁ |
କୀବୋର୍ଡ୍ ବୁଲିଅନ୍ ସତ ଏସ୍କେପ୍ କୀ ଦବାଇଲେ ମୋଡାଲ୍ ବନ୍ଦ କରେ |
ଦେଖାନ୍ତୁ | ବୁଲିଅନ୍ ସତ ପ୍ରାରମ୍ଭ ହେବା ସମୟରେ ମୋଡାଲ୍ ଦେଖାଏ |
ସୁଦୂର ପଥ ମିଥ୍ୟା

ଯଦି ଏକ ସୁଦୂର url ପ୍ରଦାନ କରାଯାଏ, ବିଷୟବସ୍ତୁ jQuery ପଦ୍ଧତି ମାଧ୍ୟମରେ ଲୋଡ୍ ହେବ loadଏବଂ ଏଥିରେ ଇଞ୍ଜେକ୍ସନ ଦିଆଯିବ .modal-body| ଯଦି ଆପଣ ଡାଟା api ବ୍ୟବହାର କରୁଛନ୍ତି, ତେବେ ଆପଣ hrefସୁଦୂର ଉତ୍ସ ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରିପାରିବେ | ଏହାର ଏକ ଉଦାହରଣ ନିମ୍ନରେ ଦର୍ଶାଯାଇଛି:

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

ପ୍ରଣାଳୀ

.ମୋଡାଲ୍ (ବିକଳ୍ପ)

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

  1. $ ( '# ମିମୋଡାଲ୍' ) | ମୋଡାଲ୍ ({
  2. କୀବୋର୍ଡ୍ : ମିଥ୍ୟା |
  3. })

.modal ('ଟୋଗଲ୍')

ମାନୁଆଲ୍ ଏକ ମୋଡାଲ୍ ଟୋଗଲ୍ କରେ |

  1. $ ( '# ମିମୋଡାଲ୍' ) | ମୋଡାଲ୍ ( 'ଟୋଗଲ୍' )

.ମୋଡାଲ୍ ('ଶୋ')

ମାନୁଆଲ୍ ଏକ ମୋଡାଲ୍ ଖୋଲିବ |

  1. $ ( '# ମିମୋଡାଲ୍' ) | ମୋଡାଲ୍ ( 'ଶୋ' )

.modal ('ଲୁଚାନ୍ତୁ')

ମାନୁଆଲ୍ ଏକ ମୋଡାଲ୍ ଲୁଚାଇଥାଏ |

  1. $ ( '# ମିମୋଡାଲ୍' ) | ମୋଡାଲ୍ ( 'ଲୁଚାନ୍ତୁ' )

ଘଟଣା

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

ଘଟଣା ବର୍ଣ୍ଣନା
ଦେଖାନ୍ତୁ | showଉଦାହରଣ ପଦ୍ଧତି ଡାକିବା ପରେ ଏହି ଘଟଣା ତୁରନ୍ତ ନିଆଁ ଲାଗେ |
ଦର୍ଶାଯାଇଛି ଯେତେବେଳେ ମୋଡାଲ୍ ଉପଭୋକ୍ତାଙ୍କୁ ଦୃଶ୍ୟମାନ କରାଗଲା ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ (css ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) |
ଲୁଚାନ୍ତୁ | hideଉଦାହରଣ ପଦ୍ଧତି ଡକାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟ ତୁରନ୍ତ ବରଖାସ୍ତ ହୁଏ |
ଲୁକ୍କାୟିତ | ଯେତେବେଳେ ମୋଡାଲ୍ ଉପଭୋକ୍ତା ଠାରୁ ଲୁକ୍କାୟିତ ହୋଇସାରିଛି (css ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ |
  1. $ ( '# ମିମୋଡାଲ୍' ) | ଉପରେ ( 'ଲୁକ୍କାୟିତ' , କାର୍ଯ୍ୟ () {
  2. // କିଛି କର…
  3. })

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

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

@ ଫାଟ

ବିଜ୍ଞାପନ ଲେଗିଙ୍ଗସ୍ କିଟର, ବ୍ରଞ୍ଚ୍ ଆଇଡି ଆର୍ଟ ପାର୍ଟି ଡୋଲୋର ଲେବର | ସେମାନେ କ୍ୱି ବିକ୍ରୟ କରିବା ପୂର୍ବରୁ ପିଚ୍ ଫୋର୍କ୍ yr enim lo-fi | ଟୁମ୍ବଲ୍ ଫାର୍ମ-ଟୁ-ଟେବୁଲ୍ ସାଇକେଲ୍ ଅଧିକାର ଯାହା ବି ହେଉ | ଆନିମ୍ କେଫିୟେ କାର୍ଡିଗାନ୍ | ଭେଲିଟ୍ ସେଟାନ୍ mcsweeney ର ଫଟୋ ବୁଥ୍ 3 ଗଧିଆ ଚନ୍ଦ୍ର ଇର୍ୟୁର୍ | କୋସବି ସ୍ ater େଟର୍ ଲୋମୋ ଜିନ୍ ସର୍ଟସ୍, ୱିଲିୟମ୍ସବର୍ଗ ହୁଡି ମିନି କ୍ୱି ଆପଣ ବୋଧହୁଏ ସେମାନଙ୍କ ବିଷୟରେ ଶୁଣି ନାହାଁନ୍ତି ଏବଂ କାର୍ଡିଗାନ୍ ଟ୍ରଷ୍ଟ ପାଣ୍ଠି କଲ୍ପା ବାୟୋଡିଜେଲ୍ ୱେସ୍ ଆଣ୍ଡର୍ସନ୍ ଆଷ୍ଟେଟିକ୍ | ନିହିଲ୍ ଟାଟୁ ହୋଇଥିବା ଆକସାମସ୍, କ୍ରେଡିଟ୍ ବିଡମ୍ବନା ବାୟୋଡିଜେଲ୍ କେଫିହି କାରିଗର ଉଲାମକୋ ଫଳାଫଳ |

@ ମିଡୋ

ଭେନିଆମ୍ ମାର୍ଫା ମୁଷ୍ଟି ସ୍କେଟ୍ ବୋର୍ଡ, ଫଗୁଏଟ୍ ଭେଲିଟ୍ ପିଚ୍ ଫୋର୍କ୍ ଦା ard ି ଆଡିପିସିଙ୍ଗ୍ | ଫ୍ରିଗାନ୍ ଦା ard ି ଆଲୁକା କପିଡାଟାଟ୍ mcsweeney ର ଭେରୋ | କପିଡାଟଟ୍ ଚାରି ଲୋକୋ ନିସି, ଇ ହେଲଭେଟିକା ନୁଲା କାର୍ଲସ୍ | ଟାଟୁ ହୋଇଥିବା କୋସବି ସ୍ୱିଟର ଫୁଡ୍ ଟ୍ରକ୍, mcsweeney's quis non freegan vinyl | Lo-fi wes anderson +1 sartorial | କାର୍ଲସ୍ ନନ୍ ସ est ନ୍ଦର୍ଯ୍ୟଗତ ବ୍ୟାୟାମ କ୍ୱିସ୍ ଭଦ୍ରକରଣ | ବ୍ରୁକଲିନ୍ ଆଡିପିସିସିଂ କ୍ରାଫ୍ଟ ବିୟର ଭାଇସ୍ କିଟର ଡେସର୍ଣ୍ଟ |

ଗୋଟିଏ |

Occaecat commodo aliqua delectus | ଫ୍ୟାପ୍ କ୍ରାଫ୍ଟ ବିୟର ଡେସର୍ଣ୍ଟ ସ୍କେଟ୍ ବୋର୍ଡ ଇ। ଲୋମୋ ସାଇକେଲ ଅଧିକାର ଆଡିପିସିଙ୍ଗ୍ ବାନ୍ ମି, ଭେଲିଟ୍ ଇ ସୁଣ୍ଟ ପରବର୍ତ୍ତୀ ସ୍ତରର ଲୋକୋଭୋର ଏକକ-ଉତ୍ପନ୍ନ କଫି ମାଗନା ଭେନିଆମ୍ ରେ | ହାଇ ଲାଇଫ୍ ଆଇଡି ଭିନିଲ୍, ଇକୋ ପାର୍କ ଫଳାଫଳ କ୍ୱିକସ୍ ଆଲିକ୍ୟୁପ୍ ବାନ୍ ମି ପିଚ୍ ଫୋର୍କ୍ | Vero VHS est adipisising | କନସେକ୍ଟର ନିସି DIY ସର୍ବନିମ୍ନ ମେସେଞ୍ଜର ବ୍ୟାଗ୍ | କ୍ରେଡିଟ୍ ଏକ୍ସ, ସ୍ଥାୟୀ ଡେଲେକ୍ଟସ୍ କନସେକ୍ଟେଟର୍ ଫ୍ୟାନି ପ୍ୟାକ୍ ଆଇଫୋନ୍ |

ଦୁଇଟି

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

କିଟର ଟ୍ୱି ବ୍ଲଗ୍, କଲ୍ପା ମେସେଞ୍ଜର ବ୍ୟାଗ୍ ମାର୍ଫା ଯାହା ବି ଡିଲେକ୍ଟସ୍ ଖାଦ୍ୟ ଟ୍ରକ୍ | Sapiente synth id ଅନୁମାନ | ଲୋକୋଭୋର ସେଡ୍ ହେଲଭେଟିକା କ୍ଲିଚ୍ ବିଡ଼ମ୍ବନା, ବଜ୍ରକାପ୍ତା ଆପଣ ବୋଧହୁଏ ସେମାନଙ୍କ ବିଷୟରେ ଶୁଣି ନାହାଁନ୍ତି ଫଳାଫଳ ହୁଡି ଗ୍ଲୁଟେନ୍ମୁକ୍ତ ଲୋ-ଫାଇ ଫାପ୍ ଆଲିକାଇପ୍ | ସେମାନେ ବିକ୍ରୟ କରିବା ପୂର୍ବରୁ ଲାବୋର ଏଲିଟ୍ ପ୍ଲେସେଟ୍, ଟେରି ରିଚାର୍ଡସନ୍ ପ୍ରୋଏଡେଣ୍ଟ୍ ବ୍ରଞ୍ଚ୍ ନେସିଅଣ୍ଟ୍ କ୍ୱିସ୍ କୋସବି ସ୍ ater େଟର୍ ପ୍ୟାରିୟର୍ କେଫିହେ ହେଲଭେଟିକା କାରିଗର | କାର୍ଡିଗାନ୍ ଶିଳ୍ପ ବିୟର ସେଟାନ୍ ପ୍ରସ୍ତୁତ ଭେଲିଟ୍ | ଭିଏଚଏସ୍ ଚାମ୍ବ୍ରେ ଲେବରସ୍ ଟେମ୍ପୋର ଭେନିୟମ୍ | ଆନିମ୍ ମଲ୍ଲିଟ୍ ମିନିମ୍ କମୋଡୋ ଉଲାମକୋ ବଜ୍ରକାପ୍ତା |


ବ୍ୟବହାର

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

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

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

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

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

  1. $ ( '# ନାଭବାର୍' ) | scrollspy ()
ମୁଣ୍ଡ ଉପରକୁ! ନାଭବାର୍ ଲିଙ୍କଗୁଡ଼ିକରେ ସମାଧାନଯୋଗ୍ୟ id ଲକ୍ଷ୍ୟ ଥିବା ଆବଶ୍ୟକ | ଉଦାହରଣ <a href="#home">home</a>ସ୍ .ରୁପ, ଡୋମ୍ ପରି କିଛି ସହିତ ଏକ ଅନୁରୂପ ହେବା ଜରୁରୀ <div id="home"></div>|

ପ୍ରଣାଳୀ

.scrollspy ('ସତେଜ')

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

  1. $ ( '[ଡାଟା-ଗୁପ୍ତଚର = "ସ୍କ୍ରୋଲ୍"]' ) | ପ୍ରତ୍ୟେକ ( କାର୍ଯ୍ୟ () {
  2. var $ spy = $ ( ଏହା ) | scrollspy ( 'ସତେଜ' )
  3. });

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

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

ନାମ ଟାଇପ୍ କରନ୍ତୁ | ଡିଫଲ୍ଟ | ବର୍ଣ୍ଣନା
ଅଫସେଟ ସଂଖ୍ୟା ୧୦ ସ୍କ୍ରୋଲର ସ୍ଥିତି ଗଣନା କରିବା ସମୟରେ ଉପରୁ ଅଫସେଟ କରିବାକୁ ପିକ୍ସେଲ |

ଘଟଣା

ଘଟଣା ବର୍ଣ୍ଣନା
ସକ୍ରିୟ କରନ୍ତୁ | ଯେତେବେଳେ ଏକ ନୂତନ ଆଇଟମ୍ ସ୍କ୍ରୋଲ୍ସି ଦ୍ୱାରା ସକ୍ରିୟ ହୋଇଯାଏ ଏହି ଇଭେଣ୍ଟ ଅଗ୍ନି ସଂଯୋଗ କରେ |

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

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

କଞ୍ଚା ଡେନିମ୍ ଆପଣ ବୋଧହୁଏ ସେମାନଙ୍କ ବିଷୟରେ ଜିନ୍ ସର୍ଟସ୍ ଅଷ୍ଟିନ ବିଷୟରେ ଶୁଣି ନାହାଁନ୍ତି | ନେସିଏଣ୍ଟ ଟୋଫୁ ଷ୍ଟମ୍ପଟାଉନ୍ ଆଲିକିଆ, ରେଟ୍ରୋ ସିନ୍ଥ ମାଷ୍ଟର କ୍ଲିନ୍ସ | ମୁସ୍ତା କ୍ଲିଚ୍ ଟେମ୍ପୋର, ୱିଲିୟମ୍ସବର୍ଗ କାର୍ଲେସ୍ ଭେଗାନ୍ ହେଲଭେଟିକା | ପୁନରାବୃତ୍ତି କୋସବି ସ୍ ater େଟର୍ ଇଉ ବାନ୍ ମି, କ୍ୱି ଇରେର୍ ଟେରି ରିଚାର୍ଡସନ ଏକ୍ସ ସ୍କ୍ୱିଡ୍ | ଆଲିକ୍ୟୁପ୍ ପ୍ଲେସେଟ୍ ସାଲଭିଆ ସିଲମ୍ ଆଇଫୋନ୍ | Seitan aliquip quis cardigan ଆମେରିକୀୟ ପୋଷାକ, ବଟର୍ ଭଲ୍ୟୁପେଟ୍ ନିସି କ୍ୱି |

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


ବ୍ୟବହାର

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

  1. $ ( '#myTab a' ) | କ୍ଲିକ୍ କରନ୍ତୁ ( ଫଙ୍କସନ୍ ( ) { |
  2. ପ୍ରତିରୋଧ ଡିଫଲ୍ଟ ();
  3. $ ( ଏହା ) ଟ୍ୟାବ୍ ( 'ଶୋ' );
  4. })

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

  1. $ ( '#myTab a [href = "# ପ୍ରୋଫାଇଲ୍"]' ) | ଟ୍ୟାବ୍ ( 'ଶୋ' ); // ନାମ ଅନୁଯାୟୀ ଟ୍ୟାବ୍ ଚୟନ କରନ୍ତୁ |
  2. $ ( '#myTab a: first' ) | ଟ୍ୟାବ୍ ( 'ଶୋ' ); // ପ୍ରଥମ ଟ୍ୟାବ୍ ଚୟନ କରନ୍ତୁ |
  3. $ ( '#myTab a: ଶେଷ' ) | ଟ୍ୟାବ୍ ( 'ଶୋ' ); // ଶେଷ ଟ୍ୟାବ୍ ଚୟନ କରନ୍ତୁ |
  4. $ ( '#myTab li: eq (2) a' ) | ଟ୍ୟାବ୍ ( 'ଶୋ' ); // ତୃତୀୟ ଟ୍ୟାବ୍ ଚୟନ କରନ୍ତୁ (0-ଇଣ୍ଡେକ୍ସଡ୍)

ମାର୍କଅପ୍ |

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

  1. <ul class = "nav nav-tabs" > |
  2. <li> <a href = "#home" data-toggle = "tab"> ଘର </a> </li> |
  3. <li> <a href = "#profile" data-toggle = "tab"> ପ୍ରୋଫାଇଲ୍ </a> </li> |
  4. <li> <a href = "#messages" data-toggle = "tab"> ବାର୍ତ୍ତା </a> </a> |
  5. <li> <a href = "#settings" data-toggle = "tab"> ସେଟିଂସମୂହ </a> </li >
  6. </ul>

ପ୍ରଣାଳୀ

$ () ଟ୍ୟାବ୍ |

ଏକ ଟ୍ୟାବ୍ ଉପାଦାନ ଏବଂ ବିଷୟବସ୍ତୁ ପାତ୍ରକୁ ସକ୍ରିୟ କରିଥାଏ | ଟ୍ୟାବରେ DOM ରେ data-targetଏକ hrefକଣ୍ଟେନର ନୋଡକୁ ଟାର୍ଗେଟ କରିବା ଉଚିତ |

  1. <ul class = "nav nav-tabs" id = "myTab" > |
  2. <li ଶ୍ରେଣୀ = "ସକ୍ରିୟ" > <a href = "#home"> ଘର </a> </li> |
  3. <li> <a href = "#profile"> ପ୍ରୋଫାଇଲ୍ </a> </li> |
  4. <li> <a href = "#messages"> ବାର୍ତ୍ତାଗୁଡିକ </a> </li> |
  5. <li> <a href = "#settings"> ସେଟିଂସମୂହ </a> </li> |
  6. </ul>
  7.  
  8. <div ଶ୍ରେଣୀ = "ଟ୍ୟାବ୍-ବିଷୟବସ୍ତୁ" > |
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <ସ୍କ୍ରିପ୍ଟ> |
  16. $ ( କାର୍ଯ୍ୟ () {
  17. $ ( '#myTab a: ଶେଷ' ) | ଟ୍ୟାବ୍ ( 'ଶୋ' );
  18. })
  19. </script>

ଘଟଣା

ଘଟଣା ବର୍ଣ୍ଣନା
ଦେଖାନ୍ତୁ | ଏହି ଇଭେଣ୍ଟ ଟ୍ୟାବ୍ ଶୋରେ ନିଆଁ ଲାଗେ, କିନ୍ତୁ ନୂଆ ଟ୍ୟାବ୍ ଦେଖାଯିବା ପୂର୍ବରୁ | ଯଥାକ୍ରମେ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଏବଂ ପୂର୍ବ ସକ୍ରିୟ ଟ୍ୟାବ୍ (ଯଦି ଉପଲବ୍ଧ) ବ୍ୟବହାର କରନ୍ତୁ event.targetଏବଂ ଟାର୍ଗେଟ୍ କରନ୍ତୁ |event.relatedTarget
ଦର୍ଶାଯାଇଛି ଏକ ଟ୍ୟାବ୍ ଦେଖାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟ ଟ୍ୟାବ୍ ସୋରେ ନିଆଁ ଲାଗେ | ଯଥାକ୍ରମେ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଏବଂ ପୂର୍ବ ସକ୍ରିୟ ଟ୍ୟାବ୍ (ଯଦି ଉପଲବ୍ଧ) ବ୍ୟବହାର କରନ୍ତୁ event.targetଏବଂ ଟାର୍ଗେଟ୍ କରନ୍ତୁ |event.relatedTarget
  1. $ ( 'a [ଡାଟା-ଟୋଗଲ୍ = "ଟ୍ୟାବ୍"]' ) | ଉପରେ ( 'ଦେଖାଯାଇଛି' , ଫଙ୍କସନ୍ ( ) {
  2. ଲକ୍ଷ୍ୟ // ସକ୍ରିୟ ଟ୍ୟାବ୍ |
  3. ସମ୍ବନ୍ଧୀୟ ଟାର୍ଗେଟ୍ // ପୂର୍ବ ଟ୍ୟାବ୍ |
  4. })

ଉଦାହରଣଗୁଡିକ

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

କାର୍ଯ୍ୟଦକ୍ଷତା କାରଣରୁ, ଟୁଲ୍ ଟିପ୍ ଏବଂ ପପଓଭର ଡାଟା-ଆପିସ୍ ଅପ୍ଟରେ ଅଛି, ଅର୍ଥାତ୍ ଆପଣ ସେମାନଙ୍କୁ ନିଜେ ଆରମ୍ଭ କରିବା ଜରୁରୀ |

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

ପରବର୍ତ୍ତୀ ସ୍ତରର ଟାଇଟ୍ ପ୍ୟାଣ୍ଟ ଆପଣ ବୋଧହୁଏ ସେଗୁଡ଼ିକ ବିଷୟରେ ଶୁଣି ନାହାଁନ୍ତି | ଫଟୋ ବୁଥ୍ ଦା ard ି କଞ୍ଚା ଡେନିମ୍ ଲେଟରପ୍ରେସ୍ ଭେଗାନ୍ ମେସେଞ୍ଜର ବ୍ୟାଗ୍ ଷ୍ଟମ୍ପଟାଉନ୍ | ଫାର୍ମ-ଟୁ-ଟେବୁଲ୍ ସେଇଟନ୍, mcsweeney ର ଫିକ୍ସି ସ୍ଥାୟୀ କ୍ୱିନୋଆ 8-ବିଟ୍ ଆମେରିକୀୟ ପୋଷାକରେ ଏକ ଟେରି ରିଚାର୍ଡସନ୍ ଭିନିଲ୍ ଚାମ୍ବ୍ରେ ଅଛି | ଦା ard ି ଷ୍ଟମ୍ପଟାଉନ୍, କାର୍ଡିଗାନ୍ସ ବାନ୍ ମି ଲୋମୋ ବଜ୍ରକାପ୍ତା | ଟୋଫୁ ବାୟୋଡିଜେଲ ୱିଲିୟମ୍ସବର୍ଗ ମାର୍ଫା, ଚାରିଟି ଲୋକୋ ମିସିସ୍ୱେନିଙ୍କ କ୍ଲିନ୍ ଭେଗାନ୍ ଚାମ୍ବ୍ରାଇ | ପ୍ରକୃତରେ ବିଡମ୍ବନାର କାରିଗର ଯାହା କି ଚାବି , ଦୃଶ୍ୟ ଫାର୍ମ-ଟେବୁଲ୍ ବ୍ୟାଙ୍କି ଅସ୍ଟିନ୍ ଟ୍ୱିଟର ହ୍ୟାଣ୍ଡେଲ ଫ୍ରିଗାନ୍ କ୍ରେଡିଟ୍ କଞ୍ଚା ଡେନିମ୍ ଏକକ ଉତ୍ପତ୍ତି କଫି ଭାଇରାଲ୍ |

ଚାରୋଟି ଦିଗ |

ଇନପୁଟ୍ ଗୋଷ୍ଠୀରେ ଟୁଲ୍ ଟିପ୍ସ |

ବୁଟଷ୍ଟ୍ରାପ୍ ଇନପୁଟ୍ ଗୋଷ୍ଠୀ ସହିତ ଟୁଲ୍ ଟିପ୍ସ ଏବଂ ପପୋଭର ବ୍ୟବହାର କରିବାବେଳେ, containerଅବାଞ୍ଛିତ ପାର୍ଶ୍ୱ ପ୍ରତିକ୍ରିୟାକୁ ଏଡାଇବା ପାଇଁ ଆପଣଙ୍କୁ (ନିମ୍ନରେ ଡକ୍ୟୁମେଣ୍ଟ୍) ଅପ୍ସନ୍ ସେଟ୍ କରିବାକୁ ପଡିବ |


ବ୍ୟବହାର

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

  1. $ ( '# ଉଦାହରଣ' ) | ଟୁଲ୍ ଟିପ୍ ( ବିକଳ୍ପ )

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

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

ନାମ ଟାଇପ୍ କରନ୍ତୁ | ଡିଫଲ୍ଟ | ବର୍ଣ୍ଣନା
ଆନିମେସନ୍ ବୁଲିଅନ୍ ସତ ଟୁଲ୍ ଟିପ୍ କୁ ଏକ css ଫେଡ୍ ଟ୍ରାନ୍ସଗେସନ୍ ପ୍ରୟୋଗ କରନ୍ତୁ |
html ବୁଲିଅନ୍ ମିଥ୍ୟା ଟୁଲ୍ ଟିପ୍ ରେ html ସନ୍ନିବେଶ କରନ୍ତୁ | ଯଦି ମିଥ୍ୟା, jquery ର textପଦ୍ଧତି ଡୋମରେ ବିଷୟବସ୍ତୁ ସନ୍ନିବେଶ କରିବାକୁ ବ୍ୟବହୃତ ହେବ | ଯଦି ଆପଣ XSS ଆକ୍ରମଣ ବିଷୟରେ ଚିନ୍ତିତ ତେବେ ପାଠ ବ୍ୟବହାର କରନ୍ତୁ |
ସ୍ଥାନ string | କାର୍ଯ୍ୟ 'ଶୀର୍ଷ' ଟୁଲ୍ ଟିପ୍ - କିପରି | ତଳ | ବାମ | ଠିକ୍
ଚୟନକର୍ତ୍ତା | ଷ୍ଟ୍ରିଙ୍ଗ୍ ମିଥ୍ୟା ଯଦି ଏକ ଚୟନକର୍ତ୍ତା ପ୍ରଦାନ କରାଯାଏ, ଟୁଲ୍ ଟିପ୍ ବସ୍ତୁଗୁଡିକ ନିର୍ଦ୍ଦିଷ୍ଟ ଲକ୍ଷ୍ୟସ୍ଥଳରେ ନ୍ୟସ୍ତ ହେବ |
ଆଖ୍ୟା string | କାର୍ଯ୍ୟ '' ଡିଫଲ୍ଟ ଟାଇଟଲ୍ ମୂଲ୍ୟ ଯଦି `ଟାଇଟଲ୍ 'ଟ୍ୟାଗ୍ ଉପସ୍ଥିତ ନାହିଁ |
ଟ୍ରିଗର ଷ୍ଟ୍ରିଙ୍ଗ୍ 'ହୋଭର ଫୋକସ୍' ଟୁଲ୍ ଟିପ୍ କିପରି ଟ୍ରିଗର ହୁଏ - କ୍ଲିକ୍ କରନ୍ତୁ | ହୋଭର | ଧ୍ୟାନ | ମାନୁଆଲ୍ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ତୁମେ ଟ୍ରିଗର ମ୍ୟୁଟଲିପ୍, ସ୍ପେସ୍ ପୃଥକ, ଟ୍ରିଗର ପ୍ରକାରଗୁଡିକ ପାସ୍ କର |
ବିଳମ୍ବ ସଂଖ୍ୟା | ବସ୍ତୁ 0

ଟୁଲ୍ ଟିପ୍ (ms) ଦେଖାଇବା ଏବଂ ଲୁଚାଇବାରେ ବିଳମ୍ବ - ମାନୁଆଲ୍ ଟ୍ରିଗର ପ୍ରକାର ପାଇଁ ପ୍ରଯୁଜ୍ୟ ନୁହେଁ |

ଯଦି ଏକ ସଂଖ୍ୟା ଯୋଗାଇ ଦିଆଯାଏ, ଉଭୟ ଲୁଚାଇବା / ଶୋ ପାଇଁ ବିଳମ୍ବ ପ୍ରୟୋଗ କରାଯାଏ |

ବସ୍ତୁ ଗଠନ ହେଉଛି:delay: { show: 500, hide: 100 }

ପାତ୍ର string | ମିଥ୍ୟା ମିଥ୍ୟା

ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଉପାଦାନରେ ଟୁଲ୍ ଟିପ୍ ଯୋଡେ |container: 'body'

ମୁଣ୍ଡ ଉପରକୁ! ବ୍ୟକ୍ତିଗତ ଟୁଲ୍ ଟିପ୍ସ ପାଇଁ ବିକଳ୍ପଗୁଡ଼ିକ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରି ବିକଳ୍ପ ଭାବରେ ନିର୍ଦ୍ଦିଷ୍ଟ କରାଯାଇପାରିବ |

ମାର୍କଅପ୍ |

  1. <a href = "#" data-toggle = "tooltip" title = "ପ୍ରଥମ ଟୁଲ୍ ଟିପ୍"> ମୋ ଉପରେ ଚଲାନ୍ତୁ </a>

ପ୍ରଣାଳୀ

ଟୁଲ୍ ଟିପ୍ (ବିକଳ୍ପ)

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

.tooltip ('show')

ଏକ ଉପାଦାନର ଟୁଲଟିପ୍ ପ୍ରକାଶ କରେ |

  1. $ ( '# ଉପାଦାନ' ) | ଟୁଲ୍ ଟିପ୍ ( 'ଶୋ' )

.tooltip ('ଲୁଚାନ୍ତୁ')

ଏକ ଉପାଦାନର ଟୁଲ୍ ଟିପ୍ ଲୁଚାଏ |

  1. $ ( '# ଉପାଦାନ' ) | ଟୁଲ୍ ଟିପ୍ ( 'ଲୁଚାନ୍ତୁ' )

.tooltip ('ଟୋଗଲ୍')

ଏକ ଉପାଦାନର ଟୁଲ୍ ଟିପ୍ ଟୋଗଲ୍ କରେ |

  1. $ ( '# ଉପାଦାନ' ) | ଟୁଲ୍ ଟିପ୍ ( 'ଟୋଗଲ୍' )

.tooltip ('ବିନାଶ')

ଏକ ଉପାଦାନର ଟୁଲ୍ ଟିପ୍ ଲୁଚାଇଥାଏ ଏବଂ ନଷ୍ଟ କରେ |

  1. $ ( '# ଉପାଦାନ' ) | ଟୁଲ୍ ଟିପ୍ ( 'ବିନାଶ' )

ଉଦାହରଣଗୁଡିକ

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

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

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

ପପ୍ ଓଭର ଟପ୍ |

ଲୋବୋର୍ଟିସ୍ ରେ ସେଡ୍ ପୋଜୁରେ କନସେକ୍ଟୁର ଇଷ୍ଟ | Aenean eu leo ​​quam। ପେଲେଣ୍ଟେସ୍କ୍ ଅର୍ନେର୍ ସେମ୍ ଲାସିନିଆ କ୍ୱାମ୍ ଭେନେନାଟିସ୍ ଭେଷ୍ଟିବୁଲମ୍ |

ପପ୍ ଓଭର ଠିକ୍ |

ଲୋବୋର୍ଟିସ୍ ରେ ସେଡ୍ ପୋଜୁରେ କନସେକ୍ଟୁର ଇଷ୍ଟ | Aenean eu leo ​​quam। ପେଲେଣ୍ଟେସ୍କ୍ ଅର୍ନେର୍ ସେମ୍ ଲାସିନିଆ କ୍ୱାମ୍ ଭେନେନାଟିସ୍ ଭେଷ୍ଟିବୁଲମ୍ |

ପପୋଭର ତଳ |

ଲୋବୋର୍ଟିସ୍ ରେ ସେଡ୍ ପୋଜୁରେ କନସେକ୍ଟୁର ଇଷ୍ଟ | Aenean eu leo ​​quam। ପେଲେଣ୍ଟେସ୍କ୍ ଅର୍ନେର୍ ସେମ୍ ଲାସିନିଆ କ୍ୱାମ୍ ଭେନେନାଟିସ୍ ଭେଷ୍ଟିବୁଲମ୍ |

ପପୋଭର ଚାଲିଗଲା |

ଲୋବୋର୍ଟିସ୍ ରେ ସେଡ୍ ପୋଜୁରେ କନସେକ୍ଟୁର ଇଷ୍ଟ | Aenean eu leo ​​quam। ପେଲେଣ୍ଟେସ୍କ୍ ଅର୍ନେର୍ ସେମ୍ ଲାସିନିଆ କ୍ୱାମ୍ ଭେନେନାଟିସ୍ ଭେଷ୍ଟିବୁଲମ୍ |

ପପଓଭର ଭାବରେ ଦେଖାଯାଇଥିବା କ mark ଣସି ମାର୍କଅପ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ଏବଂ ଏକ dataଆଟ୍ରିବ୍ୟୁଟ୍ ମଧ୍ୟରେ ବିଷୟବସ୍ତୁରୁ ଉତ୍ପନ୍ନ ହୁଏ ନାହିଁ |

ଲାଇଭ୍ ଡେମୋ |

ଚାରୋଟି ଦିଗ |


ବ୍ୟବହାର

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

  1. $ ( '# ଉଦାହରଣ' ) | ପପ୍ ଓଭର ( ବିକଳ୍ପ )

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

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

ନାମ ଟାଇପ୍ କରନ୍ତୁ | ଡିଫଲ୍ଟ | ବର୍ଣ୍ଣନା
ଆନିମେସନ୍ ବୁଲିଅନ୍ ସତ ଟୁଲ୍ ଟିପ୍ କୁ ଏକ css ଫେଡ୍ ଟ୍ରାନ୍ସଗେସନ୍ ପ୍ରୟୋଗ କରନ୍ତୁ |
html ବୁଲିଅନ୍ ମିଥ୍ୟା ପପଓଭରରେ html ସନ୍ନିବେଶ କରନ୍ତୁ | ଯଦି ମିଥ୍ୟା, jquery ର textପଦ୍ଧତି ଡୋମରେ ବିଷୟବସ୍ତୁ ସନ୍ନିବେଶ କରିବାକୁ ବ୍ୟବହୃତ ହେବ | ଯଦି ଆପଣ XSS ଆକ୍ରମଣ ବିଷୟରେ ଚିନ୍ତିତ ତେବେ ପାଠ ବ୍ୟବହାର କରନ୍ତୁ |
ସ୍ଥାନ string | କାର୍ଯ୍ୟ 'ଠିକ୍' ପପଓଭର କିପରି - ଟପ୍ | ତଳ | ବାମ | ଠିକ୍
ଚୟନକର୍ତ୍ତା | ଷ୍ଟ୍ରିଙ୍ଗ୍ ମିଥ୍ୟା ଯଦି ଏକ ଚୟନକର୍ତ୍ତା ପ୍ରଦାନ କରାଯାଏ, ଟୁଲ୍ ଟିପ୍ ବସ୍ତୁଗୁଡିକ ନିର୍ଦ୍ଦିଷ୍ଟ ଲକ୍ଷ୍ୟସ୍ଥଳକୁ ଦିଆଯିବ |
ଟ୍ରିଗର ଷ୍ଟ୍ରିଙ୍ଗ୍ 'କ୍ଲିକ୍' ପପଓଭର କିପରି ଟ୍ରିଗର ହୁଏ - କ୍ଲିକ୍ କରନ୍ତୁ | ହୋଭର | ଧ୍ୟାନ | ମାନୁଆଲ୍ |
ଆଖ୍ୟା string | କାର୍ଯ୍ୟ '' ଡିଫଲ୍ଟ ଟାଇଟଲ୍ ମୂଲ୍ୟ ଯଦି `ଟାଇଟଲ୍ 'ଆଟ୍ରିବ୍ୟୁଟ୍ ଉପସ୍ଥିତ ନାହିଁ |
ବିଷୟବସ୍ତୁ string | କାର୍ଯ୍ୟ '' ଡିଫଲ୍ଟ ବିଷୟବସ୍ତୁ ମୂଲ୍ୟ ଯଦି “ଡାଟା-ବିଷୟବସ୍ତୁ” ଗୁଣ ଉପସ୍ଥିତ ନଥାଏ |
ବିଳମ୍ବ ସଂଖ୍ୟା | ବସ୍ତୁ 0

ପପଓଭର (ms) ଦେଖାଇବା ଏବଂ ଲୁଚାଇବାରେ ବିଳମ୍ବ - ମାନୁଆଲ ଟ୍ରିଗର ପ୍ରକାର ପାଇଁ ପ୍ରଯୁଜ୍ୟ ନୁହେଁ |

ଯଦି ଏକ ସଂଖ୍ୟା ଯୋଗାଇ ଦିଆଯାଏ, ଉଭୟ ଲୁଚାଇବା / ଶୋ ପାଇଁ ବିଳମ୍ବ ପ୍ରୟୋଗ କରାଯାଏ |

ବସ୍ତୁ ଗଠନ ହେଉଛି:delay: { show: 500, hide: 100 }

ପାତ୍ର string | ମିଥ୍ୟା ମିଥ୍ୟା

ପପଓଭରକୁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଉପାଦାନରେ ଯୋଡେ |container: 'body'

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

ମାର୍କଅପ୍ |

କାର୍ଯ୍ୟଦକ୍ଷତା କାରଣରୁ, ଟୁଲଟିପ୍ ଏବଂ ପପୋଭର ଡାଟା-ଆପିସ୍ ଅପ୍ଟ ଇନ୍ ଅଟେ | ଯଦି ଆପଣ ସେଗୁଡିକୁ ବ୍ୟବହାର କରିବାକୁ ଚାହୁଁଛନ୍ତି ତେବେ କେବଳ ଏକ ଚୟନକର୍ତ୍ତା ବିକଳ୍ପ ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ |

ପ୍ରଣାଳୀ

ପପୋଭର (ବିକଳ୍ପ)

ଏକ ଉପାଦାନ ସଂଗ୍ରହ ପାଇଁ ପପୋଭର ଆରମ୍ଭ କରେ |

.ପୋଭର ('ଶୋ')

ଏକ ଉପାଦାନ ପପଓଭର ପ୍ରକାଶ କରେ |

  1. $ ( '# ଉପାଦାନ' ) | popover ( 'show' )

.ପୋଭର ('ଲୁଚାନ୍ତୁ')

ଏକ ଉପାଦାନ ପପଓଭର ଲୁଚାଏ |

  1. $ ( '# ଉପାଦାନ' ) | popover ( 'ଲୁଚାନ୍ତୁ' )

.ପୋପୋଭର ('ଟୋଗଲ୍')

ଏକ ଉପାଦାନ ପପଓଭର ଟୋଗଲ୍ କରେ |

  1. $ ( '# ଉପାଦାନ' ) | popover ( 'ଟୋଗଲ୍' )

.ପୋଭର ('ବିନାଶ')

ଏକ ଉପାଦାନର ପପ୍ ଓଭର ଲୁଚାଇଥାଏ ଏବଂ ନଷ୍ଟ କରେ |

  1. $ ( '# ଉପାଦାନ' ) | popover ( 'ବିନାଶ' )

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

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

ପବିତ୍ର ଗୁଆକାମୋଲ୍! ସର୍ବୋତ୍ତମ ଚେକ୍ ୟୋ ସେଲ୍ଫ୍, ଆପଣ ବହୁତ ଭଲ ଦେଖାଯାଉ ନାହାଁନ୍ତି |

ହେ ସ୍ନାପ୍! ତୁମେ ଏକ ତ୍ରୁଟି ପାଇଛ!

ଏହାକୁ ଏବଂ ତାହା ପରିବର୍ତ୍ତନ କରନ୍ତୁ ଏବଂ ପୁନର୍ବାର ଚେଷ୍ଟା କରନ୍ତୁ | ଡୁଇସ୍ ମଲିସ୍, ଇଷ୍ଟ ନନ୍ କମୋଡୋ ଲକ୍ଟସ୍, ନିସି ଏରାଟ ପୋର୍ଟଟିଟର୍ ଲିଗୁଲା, ଇଜେଟ୍ ଲାସିନିଆ ଓଡିଓ ସେମ ନେକ୍ ଏଲିଟ୍ | Cras mattis consectetur purus sit amet fermentum |

ଏହି କାର୍ଯ୍ୟ ନିଅନ୍ତୁ | କିମ୍ବା ଏହା କରନ୍ତୁ |


ବ୍ୟବହାର

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଏକ ଆଲର୍ଟ ରଦ୍ଦ କରିବାକୁ ସକ୍ଷମ କରନ୍ତୁ:

  1. $ ( ".alert" ) ସତର୍କ ()

ମାର୍କଅପ୍ |

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

  1. <a class = "close" data-dismiss = "alert" href = "#"> & times ; </a>

ପ୍ରଣାଳୀ

$ ()। ସତର୍କ ()

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

ଆଲର୍ଟ ('ବନ୍ଦ')

ଏକ ଆଲର୍ଟ ବନ୍ଦ କରେ |

  1. $ ( ".alert" ) ସତର୍କ ( 'ବନ୍ଦ' )

ଘଟଣା

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

ଘଟଣା ବର୍ଣ୍ଣନା
ବନ୍ଦ closeଉଦାହରଣ ପଦ୍ଧତି ଡାକିବା ପରେ ଏହି ଘଟଣା ତୁରନ୍ତ ନିଆଁ ଲାଗେ |
ବନ୍ଦ | ଆଲର୍ଟ ବନ୍ଦ ହୋଇଗଲେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ (css ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) |
  1. $ ( '# my-alert' ) | ବାନ୍ଧ ( 'ବନ୍ଦ' , କାର୍ଯ୍ୟ () {
  2. // କିଛି କର…
  3. })

ଉଦାହରଣ ବ୍ୟବହାର କରେ |

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

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

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

  1. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "btn btn-primary" ଡାଟା-ଲୋଡିଂ-ଟେକ୍ସଟ୍ = "ଲୋଡିଂ ..." > ଲୋଡିଂ ସ୍ଥିତି </button>

ଏକକ ଟୋଗଲ୍ |

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

  1. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "btn btn- ପ୍ରାଥମିକ" ଡାଟା-ଟୋଗଲ୍ = "ବଟନ୍" > ଏକକ ଟୋଗଲ୍ </button>

ଚେକ୍ ବକ୍ସ |

data-toggle="buttons-checkbox"Btn- ଗ୍ରୁପରେ ଟୋଗଲ୍ କରିବା ପାଇଁ ଚେକ୍ ବକ୍ସ ଶ style ଳୀ ପାଇଁ ଯୋଡନ୍ତୁ |

  1. <div class = "btn-group" ଡାଟା-ଟୋଗଲ୍ = "ବଟନ୍-ଚେକ୍ ବକ୍ସ" > |
  2. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "btn btn-primary" > ବାମ </ button> |
  3. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "btn btn-primary" > ମଧ୍ୟମ </button> |
  4. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "btn btn-primary" > ଡାହାଣ </button> |
  5. </div>

ରେଡିଓ |

data-toggle="buttons-radio"Btn- ଗ୍ରୁପରେ ରେଡିଓ ଷ୍ଟାଇଲ୍ ଟୋଗଲ୍ ପାଇଁ ଯୋଡନ୍ତୁ |

  1. <div class = "btn-group" ଡାଟା-ଟୋଗଲ୍ = "ବଟନ୍-ରେଡିଓ" > |
  2. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "btn btn-primary" > ବାମ </ button> |
  3. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "btn btn-primary" > ମଧ୍ୟମ </button> |
  4. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "btn btn-primary" > ଡାହାଣ </button> |
  5. </div>

ବ୍ୟବହାର

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

  1. $ ( '.nav-tabs' ) | ବଟନ୍ ()

ମାର୍କଅପ୍ |

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବଟନ୍ ପ୍ଲଗଇନ୍ ପାଇଁ ଅବିଚ୍ଛେଦ୍ୟ | ବିଭିନ୍ନ ମାର୍କଅପ୍ ପ୍ରକାର ପାଇଁ ନିମ୍ନରେ ଥିବା ଉଦାହରଣ କୋଡ୍ ଦେଖନ୍ତୁ |

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

କିଛି ନୁହେଁ |

ପ୍ରଣାଳୀ

$ ()। ବଟନ୍ ('ଟୋଗଲ୍')

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

ମୁଣ୍ଡ ଉପରକୁ! data-toggleଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରି ଆପଣ ଏକ ବଟନ୍ ର ଅଟୋ ଟୋଗଲ୍ ସକ୍ଷମ କରିପାରିବେ |
  1. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "btn" ଡାଟା-ଟୋଗଲ୍ = "ବଟନ୍" > </button>

$ ()। ବଟନ୍ ('ଲୋଡିଂ')

ଲୋଡିଂ ପାଇଁ ବଟନ୍ ସ୍ଥିତି ସେଟ୍ କରେ - ବଟନ୍ ଅକ୍ଷମ କରେ ଏବଂ ଟେକ୍ସଟ୍ ଲୋଡିଙ୍ଗ୍ ପାଇଁ ଟେକ୍ସଟ୍ ସ୍ୱାପ୍ କରେ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରି ବଟନ୍ ଉପାଦାନରେ ଟେକ୍ସଟ୍ ଲୋଡିଙ୍ଗ୍ ବ୍ୟାଖ୍ୟା କରାଯିବା ଉଚିତ data-loading-text|

  1. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "btn" ଡାଟା-ଲୋଡିଂ-ଟେକ୍ସଟ୍ = "ଷ୍ଟଫ୍ ଲୋଡିଂ ..." > ... </button>
ମୁଣ୍ଡ ଉପରକୁ! ପେଜ୍ ଲୋଡ୍ ମଧ୍ୟରେ ଫାୟାରଫକ୍ସ ଅକ୍ଷମ ଅବସ୍ଥାକୁ ସ୍ଥିର କରିଥାଏ | ଏହା ପାଇଁ ଏକ କାର୍ଯ୍ୟଧାରା autocomplete="off"|

$ ()। ବଟନ୍ ('ପୁନ et ସେଟ୍')

ବଟନ୍ ସ୍ଥିତିକୁ ପୁନ ets ସେଟ୍ କରେ - ପାଠ୍ୟକୁ ମୂଳ ପାଠ୍ୟକୁ ସ୍ୱାପ୍ କରେ |

$ () ବଟନ୍ (ଷ୍ଟ୍ରିଙ୍ଗ୍)

ବଟନ୍ ସ୍ଥିତିକୁ ପୁନ ets ସେଟ୍ କରେ - ଯେକ any ଣସି ତଥ୍ୟ ପରିଭାଷିତ ପାଠ୍ୟ ସ୍ଥିତିକୁ ପାଠ୍ୟ ସ୍ୱାପ୍ କରେ |

  1. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "btn" ଡାଟା-ସଂପୂର୍ଣ୍ଣ-ପାଠ୍ୟ = "ସମାପ୍ତ!" > ... </button>
  2. <ସ୍କ୍ରିପ୍ଟ> |
  3. $ ( '.btn' ) | ବଟନ୍ ( 'ସଂପୂର୍ଣ୍ଣ' )
  4. </script>

ବିଷୟରେ

ଆକର୍ଡିଅନ୍ ଏବଂ ନେଭିଗେସନ୍ ପରି ଭୁଶୁଡ଼ିପାରୁଥିବା ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ବେସ୍ ଷ୍ଟାଇଲ୍ ଏବଂ ନମନୀୟ ସମର୍ଥନ ପ୍ରାପ୍ତ କରନ୍ତୁ |

* ଟ୍ରାନ୍ସଜେନ୍ସ ପ୍ଲଗଇନ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ଆବଶ୍ୟକ କରେ |

ଉଦାହରଣ ଆକର୍ଡିଅନ୍ |

କ୍ଲାସ୍ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରି, ଆମେ ଏକ ସରଳ ଆକର୍ଡିଅନ୍ ଷ୍ଟାଇଲ୍ ୱିଜେଟ୍ ନିର୍ମାଣ କରିଛୁ:

ଆନିମ୍ ପ୍ୟାରିଏଟର୍ କ୍ଲିଚ୍ ରିପ୍ରେଣ୍ଡେରିଟ୍, ଏନିମ୍ ଇୟୁସମୋଡ୍ ହାଇ ଲାଇଫ୍ ଆକସାମସ୍ ଟେରି ରିଚାର୍ଡସନ ବିଜ୍ଞାପନ ସ୍କ୍ୱିଡ୍ | 3 ଗଧିଆ ଚନ୍ଦ୍ର ଅଫିସିଆ aute, non cupidatat skateboard dolor brunch | ଖାଦ୍ୟ ଟ୍ରକ୍ କ୍ୱିନୋଆ ନେସ୍କିଣ୍ଟ୍ ଲେବରମ୍ ଇୟୁସମୋଡ୍ | ବ୍ରଞ୍ଚ୍ 3 ଗଧିଆ ଚନ୍ଦ୍ର ଟେମ୍ପୋର, ସୁଣ୍ଟ ଆଲିକା ଏହା ଉପରେ ଏକ ପକ୍ଷୀ ରଖିଲା ସ୍କ୍ୱିଡ୍ ଏକକ ଉତ୍ପନ୍ନ କଫି ନୁଲା ଅନୁମାନେ ଶୋରେଡିଚ୍ ଇତ୍ୟାଦି | ନିହିଲ୍ ଆନିମ କେଫିୟେ ହେଲଭେଟିକା, କ୍ରାଫ୍ଟ ବିୟର ଲାବୋର୍ ୱେସ୍ ଆଣ୍ଡର୍ସନ୍ କ୍ରେଡିଟ୍ ନେସକ୍ୟୁଣ୍ଟ୍ ସାପିଏଣ୍ଟେ ଇ ପ୍ରୋଏଡେଣ୍ଟ୍ | ବିଜ୍ଞାପନ ଭେଜାନ୍ ଏକ୍ସପ୍ରେଟର୍ ବଟର୍ ଭାଇସ୍ ଲୋମୋ | ଲେଗିଙ୍ଗ୍ସ ଅକାକେଟ ଶିଳ୍ପ ବିୟର ଫାର୍ମ-ଟୁ-ଟେବୁଲ୍, କଞ୍ଚା ଡେନିମ୍ ଆଷ୍ଟେଟିକ୍ ସିନ୍ଥ ନେସିଅଣ୍ଟ୍ ଆପଣ ବୋଧହୁଏ ସେମାନଙ୍କ ବିଷୟରେ ଅଭିଯୋଗ କରି ନାହାଁନ୍ତି |
ଆନିମ୍ ପ୍ୟାରିଏଟର୍ କ୍ଲିଚ୍ ରିପ୍ରେଣ୍ଡେରିଟ୍, ଏନିମ୍ ଇୟୁସମୋଡ୍ ହାଇ ଲାଇଫ୍ ଆକସାମସ୍ ଟେରି ରିଚାର୍ଡସନ ବିଜ୍ଞାପନ ସ୍କ୍ୱିଡ୍ | 3 ଗଧିଆ ଚନ୍ଦ୍ର ଅଫିସିଆ aute, non cupidatat skateboard dolor brunch | ଖାଦ୍ୟ ଟ୍ରକ୍ କ୍ୱିନୋଆ ନେସ୍କିଣ୍ଟ୍ ଲେବରମ୍ ଇୟୁସମୋଡ୍ | ବ୍ରଞ୍ଚ୍ 3 ଗଧିଆ ଚନ୍ଦ୍ର ଟେମ୍ପୋର, ସୁଣ୍ଟ ଆଲିକା ଏହା ଉପରେ ଏକ ପକ୍ଷୀ ରଖିଲା ସ୍କ୍ୱିଡ୍ ଏକକ ଉତ୍ପନ୍ନ କଫି ନୁଲା ଅନୁମାନେ ଶୋରେଡିଚ୍ ଇତ୍ୟାଦି | ନିହିଲ୍ ଆନିମ କେଫିୟେ ହେଲଭେଟିକା, କ୍ରାଫ୍ଟ ବିୟର ଲାବୋର୍ ୱେସ୍ ଆଣ୍ଡର୍ସନ୍ କ୍ରେଡିଟ୍ ନେସକ୍ୟୁଣ୍ଟ୍ ସାପିଏଣ୍ଟେ ଇ ପ୍ରୋଏଡେଣ୍ଟ୍ | ବିଜ୍ଞାପନ ଭେଜାନ୍ ଏକ୍ସପ୍ରେଟର୍ ବଟର୍ ଭାଇସ୍ ଲୋମୋ | ଲେଗିଙ୍ଗ୍ସ ଅକାକେଟ ଶିଳ୍ପ ବିୟର ଫାର୍ମ-ଟୁ-ଟେବୁଲ୍, କଞ୍ଚା ଡେନିମ୍ ଆଷ୍ଟେଟିକ୍ ସିନ୍ଥ ନେସିଅଣ୍ଟ୍ ଆପଣ ବୋଧହୁଏ ସେମାନଙ୍କ ବିଷୟରେ ଅଭିଯୋଗ କରି ନାହାଁନ୍ତି |
ଆନିମ୍ ପ୍ୟାରିଏଟର୍ କ୍ଲିଚ୍ ରିପ୍ରେଣ୍ଡେରିଟ୍, ଏନିମ୍ ଇୟୁସମୋଡ୍ ହାଇ ଲାଇଫ୍ ଆକସାମସ୍ ଟେରି ରିଚାର୍ଡସନ ବିଜ୍ଞାପନ ସ୍କ୍ୱିଡ୍ | 3 ଗଧିଆ ଚନ୍ଦ୍ର ଅଫିସିଆ aute, non cupidatat skateboard dolor brunch | ଖାଦ୍ୟ ଟ୍ରକ୍ କ୍ୱିନୋଆ ନେସ୍କିଣ୍ଟ୍ ଲେବରମ୍ ଇୟୁସମୋଡ୍ | ବ୍ରଞ୍ଚ୍ 3 ଗଧିଆ ଚନ୍ଦ୍ର ଟେମ୍ପୋର, ସୁଣ୍ଟ ଆଲିକା ଏହା ଉପରେ ଏକ ପକ୍ଷୀ ରଖିଲା ସ୍କ୍ୱିଡ୍ ଏକକ ଉତ୍ପନ୍ନ କଫି ନୁଲା ଅନୁମାନେ ଶୋରେଡିଚ୍ ଇତ୍ୟାଦି | ନିହିଲ୍ ଆନିମ କେଫିୟେ ହେଲଭେଟିକା, କ୍ରାଫ୍ଟ ବିୟର ଲାବୋର୍ ୱେସ୍ ଆଣ୍ଡର୍ସନ୍ କ୍ରେଡିଟ୍ ନେସକ୍ୟୁଣ୍ଟ୍ ସାପିଏଣ୍ଟେ ଇ ପ୍ରୋଏଡେଣ୍ଟ୍ | ବିଜ୍ଞାପନ ଭେଜାନ୍ ଏକ୍ସପ୍ରେଟର୍ ବଟର୍ ଭାଇସ୍ ଲୋମୋ | ଲେଗିଙ୍ଗ୍ସ ଅକାକେଟ ଶିଳ୍ପ ବିୟର ଫାର୍ମ-ଟୁ-ଟେବୁଲ୍, କଞ୍ଚା ଡେନିମ୍ ଆଷ୍ଟେଟିକ୍ ସିନ୍ଥ ନେସିଅଣ୍ଟ୍ ଆପଣ ବୋଧହୁଏ ସେମାନଙ୍କ ବିଷୟରେ ଅଭିଯୋଗ କରି ନାହାଁନ୍ତି |
  1. <div ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍" id = "ଆକର୍ଡିଅନ୍ 2" > |
  2. <div ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍-ଗ୍ରୁପ୍" > |
  3. <div ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍-ହେଡିଙ୍ଗ୍" > |
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne"> _
  5. ସଂପୃକ୍ତ ଗୋଷ୍ଠୀ ଆଇଟମ୍ # 1 |
  6. </a>
  7. </div>
  8. <div id = "collapseOne" ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍-ଶରୀର ଭୁଶୁଡ଼ିବା" > |
  9. <div ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍-ଆଭ୍ୟନ୍ତରୀଣ" > |
  10. Anim pariatur cliche ...
  11. </div>
  12. </div>
  13. </div>
  14. <div ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍-ଗ୍ରୁପ୍" > |
  15. <div ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍-ହେଡିଙ୍ଗ୍" > |
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo"> _
  17. ସଂପୃକ୍ତ ଗୋଷ୍ଠୀ ଆଇଟମ୍ # 2 |
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍-ଶରୀର ପତନ" > |
  21. <div ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍-ଆଭ୍ୟନ୍ତରୀଣ" > |
  22. Anim pariatur cliche ...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

ଆପଣ ଆକ୍ରେଡୋନ୍ ମାର୍କଅପ୍ ବିନା ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିପାରିବେ | ଅନ୍ୟ ଏକ ଉପାଦାନର ବିସ୍ତାର ଏବଂ ଭୁଶୁଡ଼ିବା ପାଇଁ ଏକ ବଟନ୍ ପ୍ରସ୍ତୁତ କରନ୍ତୁ |

  1. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. ସରଳ ଭୁଶୁଡ଼ିବା |
  3. </button>
  4.  
  5. <div id = "ଡେମୋ" ଶ୍ରେଣୀ = "ଭୁଶୁଡ଼ିବା" > </div> |

ବ୍ୟବହାର

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

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

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

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

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

  1. $ ( ".collapse" ) ଭୁଶୁଡ଼ିବା ()

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

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

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

ପ୍ରଣାଳୀ

.collapse (ବିକଳ୍ପ)

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

  1. $ ( '#myCollapsible' ) | ଭୁଶୁଡ଼ିବା ({
  2. ଟୋଗଲ୍ : ମିଥ୍ୟା |
  3. })

.collapse ('ଟୋଗଲ୍')

ଦେଖାଯାଇଥିବା କିମ୍ବା ଲୁକ୍କାୟିତ ହେବା ପାଇଁ ଏକ ଭୁଶୁଡ଼ୁଥିବା ଉପାଦାନକୁ ଟୋଗଲ୍ କରେ |

.collapse ('show')

ଏକ ଭୁଶୁଡ଼ୁଥିବା ଉପାଦାନ ଦେଖାଏ |

.collapse ('ଲୁଚାନ୍ତୁ')

ଏକ ଭୁଶୁଡ଼ୁଥିବା ଉପାଦାନକୁ ଲୁଚାଇଥାଏ |

ଘଟଣା

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

ଘଟଣା ବର୍ଣ୍ଣନା
ଦେଖାନ୍ତୁ | showଉଦାହରଣ ପଦ୍ଧତି ଡାକିବା ପରେ ଏହି ଘଟଣା ତୁରନ୍ତ ନିଆଁ ଲାଗେ |
ଦର୍ଶାଯାଇଛି ଉପଭୋକ୍ତାଙ୍କୁ ଦୃଶ୍ୟମାନ ହେବାପରେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ (css ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) |
ଲୁଚାନ୍ତୁ | hideପଦ୍ଧତି ଡାକିବା ପରେ ତୁରନ୍ତ ଏହି ଘଟଣାକୁ ବରଖାସ୍ତ କରାଯାଏ |
ଲୁକ୍କାୟିତ | ଉପଭୋକ୍ତାଙ୍କ ଠାରୁ ଏକ ପତନ ଉପାଦାନ ଲୁଚି ରହିଥିବାବେଳେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଇଥାଏ (css ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) |
  1. $ ( '#myCollapsible' ) | ଉପରେ ( 'ଲୁକ୍କାୟିତ' , କାର୍ଯ୍ୟ () {
  2. // କିଛି କର…
  3. })

ଉଦାହରଣ |

ଯେକ any ଣସି ଫର୍ମ ପାଠ୍ୟ ଇନପୁଟ୍ ସହିତ ଶୀଘ୍ର ଚମତ୍କାର ଟାଇପ୍ହେଡ୍ ସୃଷ୍ଟି କରିବା ପାଇଁ ଏକ ମ basic ଳିକ, ସହଜରେ ବିସ୍ତାରିତ ପ୍ଲଗଇନ୍ |

  1. <ଇନପୁଟ୍ ପ୍ରକାର = "text" data-provide = "typeahead" > |

autocomplete="off"ଡିଫଲ୍ଟ ବ୍ରାଉଜର୍ ମେନୁଗୁଡ଼ିକୁ ବୁଟଷ୍ଟ୍ରାପ୍ ଟାଇପ୍ ହେଡ୍ ଡ୍ରପ୍ ଡାଉନ୍ ଉପରେ ଦେଖାଯିବାକୁ ରୋକିବାକୁ ଆପଣ ସେଟ୍ କରିବାକୁ ଚାହାଁନ୍ତି |


ବ୍ୟବହାର

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

ଉପରୋକ୍ତ ଉଦାହରଣରେ ଦେଖାଯାଇଥିବା ପରି ଟାଇପ୍ହେଡ୍ କାର୍ଯ୍ୟକାରିତା ସହିତ ଏକ ଉପାଦାନକୁ ପଞ୍ଜିକରଣ କରିବାକୁ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ସ ଯୋଡନ୍ତୁ |

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

ଟାଇପ୍ହେଡ୍ କୁ ହସ୍ତକୃତ ଭାବରେ କଲ୍ କରନ୍ତୁ:

  1. $ ( '.typeahead' ) |typeahead ()

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

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

ନାମ ଟାଇପ୍ କରନ୍ତୁ | ଡିଫଲ୍ଟ | ବର୍ଣ୍ଣନା
ଉତ୍ସ ଆରେ, ଫଙ୍କସନ୍ [] ବିପକ୍ଷରେ ପ୍ରଶ୍ନ କରିବା ପାଇଁ ତଥ୍ୟ ଉତ୍ସ | ଷ୍ଟ୍ରିଙ୍ଗ୍ କିମ୍ବା ଏକ ଫଙ୍କସନ୍ ହୋଇପାରେ | ଫଙ୍କସନ୍ ଦୁଇଟି ଆର୍ଗୁମେଣ୍ଟ୍ ପାସ୍ queryହୋଇଛି, ଇନପୁଟ୍ ଫିଲ୍ଡର ମୂଲ୍ୟ ଏବଂ processକଲବ୍ୟାକ୍ | processକଲ୍ବ୍ୟାକ୍ ର ଏକକ ଆର୍ଗୁମେଣ୍ଟ୍ ମାଧ୍ୟମରେ ଡାଟା ଉତ୍ସକୁ ସିଧାସଳଖ କିମ୍ବା ଅସନ୍ତୁଳିତ ଭାବରେ ଫେରାଇ ଏହି କାର୍ଯ୍ୟଟି ସମକାଳୀନ ଭାବରେ ବ୍ୟବହୃତ ହୋଇପାରେ |
ଆଇଟମ୍ ସଂଖ୍ୟା 8 ଡ୍ରପଡାଉନରେ ପ୍ରଦର୍ଶିତ କରିବାକୁ ସର୍ବାଧିକ ସଂଖ୍ୟକ ଆଇଟମ୍ |
ମିନିଟ୍ ଲମ୍ବ ସଂଖ୍ୟା ସ୍ oc ତ ompl ସଂପୂର୍ଣ୍ଣ ପରାମର୍ଶଗୁଡ଼ିକୁ ଟ୍ରିଗର କରିବା ପୂର୍ବରୁ ସର୍ବନିମ୍ନ ବର୍ଣ୍ଣ ଦ length ର୍ଘ୍ୟ ଆବଶ୍ୟକ |
ମ୍ୟାଚର୍ କାର୍ଯ୍ୟ କେସ୍ ସମ୍ବେଦନଶୀଳ | ଏକ ପ୍ରଶ୍ନ ଏକ ଆଇଟମ୍ ସହିତ ମେଳ ଖାଉଛି କି ନାହିଁ ତାହା ଜାଣିବା ପାଇଁ ବ୍ୟବହୃତ ପଦ୍ଧତି | ଗୋଟିଏ ଯୁକ୍ତି ଗ୍ରହଣ କରେ, ଯାହା itemବିରୁଦ୍ଧରେ ଜିଜ୍ଞାସା ପରୀକ୍ଷା କରିବାକୁ | ସହିତ ସାମ୍ପ୍ରତିକ ଜିଜ୍ଞାସା ଆକ୍ସେସ୍ କରନ୍ତୁ this.query| trueଯଦି ଜିଜ୍ଞାସା ମେଳ ହୁଏ ତେବେ ଏକ ବୁଲିଅନ୍ ଫେରସ୍ତ କରନ୍ତୁ |
ସର୍ଟର୍ କାର୍ଯ୍ୟ ସଠିକ୍ ମେଳ,
କେସ୍ ସମ୍ବେଦନଶୀଳ,
କେସ୍ ସମ୍ବେଦନଶୀଳ |
ସ୍ୱୟଂଚାଳିତ ଫଳାଫଳକୁ ସଜାଡ଼ିବା ପାଇଁ ବ୍ୟବହୃତ ପଦ୍ଧତି | ଗୋଟିଏ ଆର୍ଗୁମେଣ୍ଟ୍ ଗ୍ରହଣ କରେ itemsଏବଂ ଟାଇପ୍ ହେଡ୍ ଇନ୍ଷ୍ଟାନ୍ସର ପରିସର ଅଛି | ସାମ୍ପ୍ରତିକ ଜିଜ୍ଞାସା ସହିତ ସନ୍ଦର୍ଭ କରନ୍ତୁ this.query|
ଅପଡେଟର୍ | କାର୍ଯ୍ୟ ମନୋନୀତ ଆଇଟମ୍ ଫେରସ୍ତ କରେ | ମନୋନୀତ ଆଇଟମ୍ ଫେରାଇବା ପାଇଁ ବ୍ୟବହୃତ ପଦ୍ଧତି | ଗୋଟିଏ ଆର୍ଗୁମେଣ୍ଟ୍ ଗ୍ରହଣ କରେ, itemଏବଂ ଟାଇପ୍ ହେଡ୍ ଇନ୍ଷ୍ଟାନ୍ସର ପରିସର ଅଛି |
ହାଇଲାଇଟର୍ | କାର୍ଯ୍ୟ ସମସ୍ତ ଡିଫଲ୍ଟ ମେଳକକୁ ହାଇଲାଇଟ୍ କରେ | ସ୍ୱୟଂ ସଂପୂର୍ଣ୍ଣ ଫଳାଫଳକୁ ଆଲୋକିତ କରିବା ପାଇଁ ବ୍ୟବହୃତ ପଦ୍ଧତି | ଗୋଟିଏ ଆର୍ଗୁମେଣ୍ଟ୍ ଗ୍ରହଣ କରେ itemଏବଂ ଟାଇପ୍ ହେଡ୍ ଇନ୍ଷ୍ଟାନ୍ସର ପରିସର ଅଛି | Html ଫେରାଇବା ଉଚିତ୍ |

ପ୍ରଣାଳୀ

.ପ୍ରକାର (ବିକଳ୍ପ)

ଏକ ଟାଇପ୍ ହେଡ୍ ସହିତ ଏକ ଇନପୁଟ୍ ଆରମ୍ଭ କରେ |

ଉଦାହରଣ |

ବାମ ପାର୍ଶ୍ୱରେ ଥିବା ସବନାଭିଗେସନ୍ ହେଉଛି ଆଫିକ୍ସ ପ୍ଲଗଇନ୍ ର ଏକ ଲାଇଭ୍ ଡେମୋ |


ବ୍ୟବହାର

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

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

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
ମୁଣ୍ଡ ଉପରକୁ! ଆପଣ ନିଶ୍ଚିତ ଭାବରେ ଏକ ପିନ୍ ହୋଇଥିବା ଉପାଦାନର ସ୍ଥିତି ଏବଂ ଏହାର ତୁରନ୍ତ ପିତାମାତାଙ୍କ ଆଚରଣ ପରିଚାଳନା କରିବେ | ଅବସ୍ଥାନ ଦ୍ୱାରା ନିୟନ୍ତ୍ରିତ affix, affix-topଏବଂ affix-bottom। ପୃଷ୍ଠାର ସାଧାରଣ ପ୍ରବାହରୁ ବିଷୟବସ୍ତୁ ଅପସାରଣ କରୁଥିବାବେଳେ ଆଫିକ୍ସ ଆରମ୍ଭ ହେବାବେଳେ ଏକ ସମ୍ଭାବ୍ୟ ଭୁଶୁଡି ପଡିଥିବା ପିତାମାତାଙ୍କୁ ଯାଞ୍ଚ କରିବାକୁ ମନେରଖ |

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

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

  1. $ ( '# ନାଭବାର୍' ) | ଆଫିକ୍ସ ()

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

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

ନାମ ଟାଇପ୍ କରନ୍ତୁ | ଡିଫଲ୍ଟ | ବର୍ଣ୍ଣନା
ଅଫସେଟ ସଂଖ୍ୟା | କାର୍ଯ୍ୟ | ବସ୍ତୁ ୧୦ ସ୍କ୍ରୋଲର ସ୍ଥିତି ଗଣନା କରିବା ସମୟରେ ସ୍କ୍ରିନରୁ ଅଫସେଟ କରିବାକୁ ପିକ୍ସେଲ | ଯଦି ଗୋଟିଏ ସଂଖ୍ୟା ପ୍ରଦାନ କରାଯାଏ, ଅଫସେଟ୍ ଉଭୟ ଉପର ଏବଂ ବାମ ଦିଗରେ ପ୍ରୟୋଗ ହେବ | ଗୋଟିଏ ଦିଗ, କିମ୍ବା ଏକାଧିକ ଅନନ୍ୟ ଅଫସେଟ୍ ଶୁଣିବାକୁ, କେବଳ ଏକ ବସ୍ତୁ ପ୍ରଦାନ କରନ୍ତୁ offset: { x: 10 }| ଯେତେବେଳେ ଆପଣ ଗତିଶୀଳ ଭାବରେ ଏକ ଅଫସେଟ୍ ପ୍ରଦାନ କରିବା ଆବଶ୍ୟକ କରନ୍ତି ଏକ ଫଙ୍କସନ୍ ବ୍ୟବହାର କରନ୍ତୁ (କିଛି ପ୍ରତିକ୍ରିୟାଶୀଳ ଡିଜାଇନ୍ ପାଇଁ ଉପଯୋଗୀ) |