ବୁଟଷ୍ଟ୍ରାପ୍ ପାଇଁ ଜାଭାସ୍କ୍ରିପ୍ଟ |

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

ମୋଡାଲ୍ |

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

ଡ୍ରପଡାଉନ୍

ଏହି ସରଳ ପ୍ଲଗଇନ୍ ସହିତ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ପ୍ରାୟ କ anything ଣସି ଜିନିଷରେ ଡ୍ରପ୍ ଡାଉନ୍ ମେନୁ ଯୋଡନ୍ତୁ | ବୁଟଷ୍ଟ୍ରାପ୍ ନାଭବାର୍, ଟ୍ୟାବ୍ ଏବଂ ବଟିକା ଉପରେ ସମ୍ପୂର୍ଣ୍ଣ ଡ୍ରପଡାଉନ୍ ମେନୁ ସମର୍ଥନ ବ features ଶିଷ୍ଟ୍ୟ କରେ |

ସ୍କ୍ରୋଲ୍ସପି |

ସ୍କ୍ରୋଲ୍ ପୋଜିସନ୍ ଉପରେ ଆଧାର କରି ସାମ୍ପ୍ରତିକ ସକ୍ରିୟ ଲିଙ୍କ୍ ଦେଖାଇବା ପାଇଁ ସ୍ nav ତ automatically ସ୍ପୃତ ଭାବରେ ଆପଣଙ୍କର ନାଭବାର୍ ରେ ଥିବା ଲିଙ୍କଗୁଡ଼ିକୁ ଅପଡେଟ୍ କରିବାକୁ ସ୍କ୍ରୋଲ୍ସପି ବ୍ୟବହାର କରନ୍ତୁ |

ଟୋଗଲ୍ ଯୋଗ୍ୟ ଟ୍ୟାବ୍ସ |

ଟ୍ୟାବ ଏବଂ ବଟିକାକୁ ଅଧିକ ଉପଯୋଗୀ କରିବା ପାଇଁ ଏହି ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରନ୍ତୁ, ସେମାନଙ୍କୁ ସ୍ଥାନୀୟ ବିଷୟବସ୍ତୁର ଟ୍ୟାବଲ୍ ଟେବୁଲ୍ ମାଧ୍ୟମରେ ଟୋଗଲ୍ କରିବାକୁ ଅନୁମତି ଦିଅନ୍ତୁ |

ସାଧନଗୁଡ଼ିକ

JQuery ଟିପ୍ସୀ ପ୍ଲଗଇନ୍ ଉପରେ ଏକ ନୂତନ ପଦକ୍ଷେପ, ଟୁଲ୍ ଟିପ୍ସ ପ୍ରତିଛବି ଉପରେ ନିର୍ଭର କରେ ନାହିଁ - ସେମାନେ ଆନିମେସନ୍ ପାଇଁ CSS3 ଏବଂ ସ୍ଥାନୀୟ ଟାଇଟଲ୍ ଷ୍ଟୋରେଜ୍ ପାଇଁ ଡାଟା-ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରନ୍ତି |

ପପୋଭର୍ସ *

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

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

ସତର୍କ ବାର୍ତ୍ତା |

ଆଲର୍ଟରେ ଘନିଷ୍ଠ କାର୍ଯ୍ୟକାରିତା ଯୋଡିବା ପାଇଁ ଆଲର୍ଟ ପ୍ଲଗଇନ୍ ଏକ କ୍ଷୁଦ୍ର ଶ୍ରେଣୀ ଅଟେ |

ବଟନ୍

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

ଭୁଶୁଡ଼ିବା |

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

କାରୁସେଲ |

ବିଷୟବସ୍ତୁର ଏକ ଇଣ୍ଟରାକ୍ଟିଭ୍ ସ୍ଲାଇଡ୍ ଶୋ ପ୍ରଦାନ କରିବାକୁ ଚାହୁଁଥିବା ଯେକ content ଣସି ବିଷୟବସ୍ତୁର ଏକ ଆନନ୍ଦ-ଗୋ-ରାଉଣ୍ଡ ସୃଷ୍ଟି କରନ୍ତୁ |

ଟାଇପ୍ହେଡ୍ |

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

ସ୍ଥାନାନ୍ତରଣ *

ସରଳ ସ୍ଥାନାନ୍ତରଣ ପ୍ରଭାବ ପାଇଁ, ଥରେ ମୋଡାଲରେ ସ୍ଲାଇଡ୍ କରିବାକୁ କିମ୍ବା ଆଲର୍ଟ ଫିଡ୍ କରିବାକୁ bootstrap-transition.js ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ |

* ପ୍ଲଗଇନ୍ରେ ଆନିମେସନ୍ ପାଇଁ ଆବଶ୍ୟକ |

ମୁଣ୍ଡ ଉପରକୁ! ସମସ୍ତ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ jQuery ର ସର୍ବଶେଷ ସଂସ୍କରଣ ଆବଶ୍ୟକ କରେ |

ମୋଡାଲ୍ ବିଷୟରେ |

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

ଫାଇଲ୍ ଡାଉନଲୋଡ୍ କରନ୍ତୁ |

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

ନିମ୍ନରେ ଏକ ଷ୍ଟାଟିକାଲ୍ ରେଣ୍ଡେଡ୍ ମୋଡାଲ୍ ଅଛି |

ଲାଇଭ୍ ଡେମୋ |

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

ଡେମୋ ମୋଡାଲ୍ ଆରମ୍ଭ କରନ୍ତୁ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍-ମୋଡାଲ୍ ବ୍ୟବହାର କରି |

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

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

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

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

ମାର୍କଅପ୍ |

ଜାଭାସ୍କ୍ରିପ୍ଟର ଗୋଟିଏ ଧାଡ଼ି ଲେଖିବା ବିନା ତୁମେ ତୁମର ପୃଷ୍ଠାରେ ମୋଡାଲଗୁଡ଼ିକୁ ସହଜରେ ସକ୍ରିୟ କରିପାରିବ | data-toggle="modal"କେବଳ ଏକ ନିୟନ୍ତ୍ରକ ଉପାଦାନ ଉପରେ ସେଟ୍ କରନ୍ତୁ data-target="#foo"କିମ୍ବା href="#foo"ଯାହା ଏକ ମୋଡାଲ୍ ଉପାଦାନ id ସହିତ ଅନୁରୂପ ଅଟେ, ଏବଂ କ୍ଲିକ୍ ହେବାବେଳେ ଏହା ଆପଣଙ୍କ ମୋଡାଲ୍ ଲଞ୍ଚ କରିବ |

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

  1. <a class = "btn" data-toggle = "modal" href = "#myModal"> ଲଞ୍ଚ ମୋଡାଲ </a>
  1. <div class = "modal hide" id = "myModal" > |
  2. <div class = "modal-header" > |
  3. <ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "ବନ୍ଦ" ଡାଟା-ଖାରଜ = "ମୋଡାଲ୍" > × </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" data-dismiss = "modal"> ବନ୍ଦ </a> _
  11. <a href = "#" class = "btn btn-primary"> ପରିବର୍ତ୍ତନଗୁଡିକ ସଂରକ୍ଷଣ କରନ୍ତୁ </a>
  12. </div>
  13. </div>
ମୁଣ୍ଡ ଉପରକୁ! ଯଦି ତୁମେ ତୁମର ମୋଡାଲ୍ ଆନିମେଟ କରିବାକୁ ଚାହୁଁଛ, କେବଳ ଉପାଦାନରେ ଏକ .fadeଶ୍ରେଣୀ ଯୋଡ .modal(ଏହାକୁ କାର୍ଯ୍ୟରେ ଦେଖିବା ପାଇଁ ଡେମୋକୁ ଅନୁସରଣ କର) ଏବଂ bootstrap-transition.js ଅନ୍ତର୍ଭୂକ୍ତ କର |

ପ୍ରଣାଳୀ

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

ତୁମର ବିଷୟବସ୍ତୁକୁ ଏକ ମୋଡାଲ୍ ଭାବରେ ସକ୍ରିୟ କରେ | ଏକ ଇଚ୍ଛାଧୀନ ବିକଳ୍ପ ଗ୍ରହଣ କରେ 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 େଟର୍ ପ୍ୟାରିୟର୍ କେଫିହେ ହେଲଭେଟିକା କାରିଗର | କାର୍ଡିଗାନ୍ ଶିଳ୍ପ ବିୟର ସେଟାନ୍ ପ୍ରସ୍ତୁତ ଭେଲିଟ୍ | ଭିଏଚଏସ୍ ଚାମ୍ବ୍ରେ ଲେବରସ୍ ଟେମ୍ପୋର ଭେନିୟମ୍ | ଆନିମ୍ ମଲ୍ଲିଟ୍ ମିନିମ୍ କମୋଡୋ ଉଲାମକୋ ବଜ୍ରକାପ୍ତା |


Bootstrap-scrollspy.js ବ୍ୟବହାର କରି |

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

  1. $ ( '# ନାଭବାର୍' ) | scrollspy ()

ମାର୍କଅପ୍ |

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

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

ପ୍ରଣାଳୀ

.scrollspy ('ସତେଜ')

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

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

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

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

ଘଟଣା

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

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

ଫାଇଲ୍ ଡାଉନଲୋଡ୍ କରନ୍ତୁ |

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

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

କଞ୍ଚା ଡେନିମ୍ ଆପଣ ବୋଧହୁଏ ସେମାନଙ୍କ ବିଷୟରେ ଜିନ୍ ସର୍ଟସ୍ ଅଷ୍ଟିନ ବିଷୟରେ ଶୁଣି ନାହାଁନ୍ତି | ନେସିଏଣ୍ଟ ଟୋଫୁ ଷ୍ଟମ୍ପଟାଉନ୍ ଆଲିକିଆ, ରେଟ୍ରୋ ସିନ୍ଥ ମାଷ୍ଟର କ୍ଲିନ୍ସ | ମୁସ୍ତା କ୍ଲିଚ୍ ଟେମ୍ପୋର, ୱିଲିୟମ୍ସବର୍ଗ କାର୍ଲେସ୍ ଭେଗାନ୍ ହେଲଭେଟିକା | ପୁନରାବୃତ୍ତି କୋସବି ସ୍ 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.


Bootstrap-tab.js ବ୍ୟବହାର କରି |

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

  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"ଏକ ଉପାଦାନ ଉପରେ କ jav ଣସି ଜାଭାସ୍କ୍ରିପ୍ଟ ଲେଖି ବିନା ଏକ ଟ୍ୟାବ୍ କିମ୍ବା ବଟିକା ନାଭିଗେସନ୍ ସକ୍ରିୟ କରିପାରିବେ | 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 ି ଷ୍ଟମ୍ପଟାଉନ୍, କାର୍ଡିଗାନ୍ସ ବାନ୍ ମି ଲୋମୋ ବଜ୍ରକାପ୍ତା | ଟୋଫୁ ବାୟୋଡିଜେଲ ୱିଲିୟମ୍ସବର୍ଗ ମାର୍ଫା, ଚାରିଟି ଲୋକୋ ମିସସ୍ୱେନିଙ୍କ କ୍ଲିନ୍ ଭେଗାନ୍ ଚ୍ୟାମ୍ବ୍ରାଇ | ପ୍ରକୃତରେ ବିଡମ୍ବନାର କାରିଗର ଯାହା କି ଚାବି , ଦୃଶ୍ୟ ଫାର୍ମ-ଟେବୁଲ୍ ବ୍ୟାଙ୍କି ଅସ୍ଟିନ୍ ଟ୍ୱିଟର ହ୍ୟାଣ୍ଡେଲ୍ ଫ୍ରିଗାନ୍ କ୍ରେଡିଟ୍ କଞ୍ଚା ଡେନିମ୍ ଏକକ ଉତ୍ପତ୍ତି କଫି ଭାଇରାଲ୍ |


Bootstrap-tooltip.js ବ୍ୟବହାର କରି |

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

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

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

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

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

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

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

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

ମାର୍କଅପ୍ |

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

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

ପ୍ରଣାଳୀ

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

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

.tooltip ('show')

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

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

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

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

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

.tooltip ('ଟୋଗଲ୍')

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

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

ପପୋଭର ବିଷୟରେ |

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

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

ଫାଇଲ୍ ଡାଉନଲୋଡ୍ କରନ୍ତୁ |

ଉଦାହରଣ ହୋଭର୍ ପପ୍ ଓଭର |

ପପ୍ ଓଭର ଟ୍ରିଗର କରିବାକୁ ବଟନ୍ ଉପରେ ଚଲାନ୍ତୁ |


Bootstrap-popover.js ବ୍ୟବହାର କରି |

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

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

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

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

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

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

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

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

ମାର୍କଅପ୍ |

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

ପ୍ରଣାଳୀ

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

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

.ପୋଭର ('ଶୋ')

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

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

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

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

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

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

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

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

ସତର୍କ ବିଷୟରେ

ଆଲର୍ଟରେ ଘନିଷ୍ଠ କାର୍ଯ୍ୟକାରିତା ଯୋଡିବା ପାଇଁ ଆଲର୍ଟ ପ୍ଲଗଇନ୍ ଏକ କ୍ଷୁଦ୍ର ଶ୍ରେଣୀ ଅଟେ |

ଡାଉନଲୋଡ୍ କରନ୍ତୁ |

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

ଆଲର୍ଟ ପ୍ଲଗଇନ୍ ନିୟମିତ ଆଲର୍ଟ ମେସେଜ୍ ଏବଂ ବ୍ଲକ୍ ମେସେଜ୍ ଉପରେ କାମ କରେ |

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

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

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

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


Bootstrap-alert.js ବ୍ୟବହାର କରି |

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

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

ମାର୍କଅପ୍ |

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

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

ପ୍ରଣାଳୀ

$ ()। ସତର୍କ ()

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

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

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

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

ଘଟଣା

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

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

ବିଷୟରେ

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

ଫାଇଲ୍ ଡାଉନଲୋଡ୍ କରନ୍ତୁ |

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

ରାଜ୍ୟ ଏବଂ ଟୋଗଲ୍ ପାଇଁ ବ���ନ୍ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରନ୍ତୁ |

ରାଜ୍ୟସ୍ତରୀୟ |
ଏକକ ଟୋଗଲ୍ |
ଚେକ୍ ବକ୍ସ |
ରେଡିଓ |

Bootstrap-button.js ବ୍ୟବହାର କରି |

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

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

ମାର୍କଅପ୍ |

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

  1. <! - ଗୋଟିଏ ବଟନ୍ ରେ ଟୋଗଲ୍ ସକ୍ରିୟ କରିବାକୁ ଡାଟା-ଟୋଗଲ୍ = "ବଟନ୍" ଯୋଡନ୍ତୁ -> |
  2. <ବଟନ୍ ଶ୍ରେଣୀ = "btn" ଡାଟା-ଟୋଗଲ୍ = "ବଟନ୍" > ଏକକ ଟୋଗଲ୍ </button>
  3.  
  4. B!
  5. <div class = "btn-group" ଡାଟା-ଟୋଗଲ୍ = "ବଟନ୍-ଚେକ୍ ବକ୍ସ" > |
  6. <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ବାମ </button> |
  7. <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ମଧ୍ୟମ </button> |
  8. <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ଡାହାଣ </button> |
  9. </div>
  10.  
  11. <! - btn-group ରେ ରେଡିଓ ଶ style ଳୀ ଟୋଗଲ୍ କରିବା ପାଇଁ ଡାଟା-ଟୋଗଲ୍ = "ବଟନ୍-ରେଡିଓ" ଯୋଡନ୍ତୁ ->
  12. <div class = "btn-group" ଡାଟା-ଟୋଗଲ୍ = "ବଟନ୍-ରେଡିଓ" > |
  13. <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ବାମ </button> |
  14. <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ମଧ୍ୟମ </button> |
  15. <ବଟନ୍ ଶ୍ରେଣୀ = "btn" > ଡାହାଣ </button> |
  16. </div>

ପ୍ରଣାଳୀ

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

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

ମୁଣ୍ଡ ଉପରକୁ! 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 ଗଧିଆ ଚନ୍ଦ୍ର ଟେମ୍ପୋର, ସୁଣ୍ଟ ଆଲିକା ଏହା ଉପରେ ଏକ ପକ୍ଷୀ ରଖିଲା ସ୍କ୍ୱିଡ୍ ଏକକ ଉତ୍ପନ୍ନ କଫି ନୁଲା ଅନୁମାନେ ଶୋରେଡିଚ୍ ଇତ୍ୟାଦି | ନିହିଲ୍ ଆନିମ କେଫିୟେ ହେଲଭେଟିକା, କ୍ରାଫ୍ଟ ବିୟର ଲାବୋର୍ ୱେସ୍ ଆଣ୍ଡର୍ସନ୍ କ୍ରେଡିଟ୍ ନେସକ୍ୟୁଣ୍ଟ୍ ସାପିଏଣ୍ଟେ ଇ ପ୍ରୋଏଡେଣ୍ଟ୍ | ବିଜ୍ଞାପନ ଭେଜାନ୍ ଏକ୍ସପ୍ରେଟର୍ ବଟର୍ ଭାଇସ୍ ଲୋମୋ | ଲେଗିଙ୍ଗ୍ସ ଅକାକେଟ ଶିଳ୍ପ ବିୟର ଫାର୍ମ-ଟୁ-ଟେବୁଲ୍, କଞ୍ଚା ଡେନିମ୍ ଆଷ୍ଟେଟିକ୍ ସିନ୍ଥ ନେସିଅଣ୍ଟ୍ ଆପଣ ବୋଧହୁଏ ସେମାନଙ୍କ ବିଷୟରେ ଅଭିଯୋଗ କରି ନାହାଁନ୍ତି |

Bootstrap-collapse.js ବ୍ୟବହାର କରି |

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

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

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

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

ମାର୍କଅପ୍ |

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

  1. <ବଟନ୍ ଶ୍ରେଣୀ = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. ସରଳ ଭୁଶୁଡ଼ିବା |
  3. </button>
  4.  
  5. <div id = "ଡେମୋ" ଶ୍ରେଣୀ = "ଭୁଶୁଡ଼ିବା" > </div> |
ମୁଣ୍ଡ ଉପରକୁ! ଏକ ସଂପନ୍ନ ନିୟନ୍ତ୍ରଣରେ ଆକର୍ଡିଅନ୍ ପରି ଗୋଷ୍ଠୀ ପରିଚାଳନା ଯୋଡିବାକୁ, ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ data-parent="#selector"| ଏହାକୁ କାର୍ଯ୍ୟରେ ଦେଖିବା ପାଇଁ ଡେମୋକୁ ଅନୁସରଣ କରନ୍ତୁ |

ପ୍ରଣାଳୀ

.collapse (ବିକଳ୍ପ)

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

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

.collapse ('ଟୋଗଲ୍')

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

.collapse ('show')

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

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

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

ଘଟଣା

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

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

ବିଷୟରେ

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

ଫାଇଲ୍ ଡାଉନଲୋଡ୍ କରନ୍ତୁ |

ଉଦାହରଣ |

ଟାଇପ୍ହେଡ୍ ଫଳାଫଳ ଦେଖାଇବାକୁ ନିମ୍ନରେ ଫିଲ୍ଡରେ ଟାଇପ୍ କରିବା ଆରମ୍ଭ କରନ୍ତୁ |


Bootstrap-typeahead.js ବ୍ୟବହାର କରି |

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

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

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

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

ମାର୍କଅପ୍ |

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

  1. <input type = "text" data-provide = "typeahead" > |

ପ୍ରଣାଳୀ

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

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