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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ଘଟଣା

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

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

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

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

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

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

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

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

ଉଦାହରଣଗୁଡିକ

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

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

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

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

ଲାଇଭ୍ ଡେମୋ |

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

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

ବ୍ୟବହାର

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

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

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

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

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

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

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

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

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

ପ୍ରଣାଳୀ

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

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

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

.modal ('ଟୋଗଲ୍')

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

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

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

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

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

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

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

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

ଘଟଣା

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

$ ( '# ମିମୋଡାଲ୍' ) | ଉପରେ ( 'ଲୁକ୍କାୟିତ' , କାର୍ଯ୍ୟ () {   
  // କିଛି କର…
})

ଉଦାହରଣଗୁଡିକ

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

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

ଟ୍ୟାବଗୁଡ଼ିକ ମଧ୍ୟରେ |

ବ୍ୟବହାର

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

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

<div class = "dropdown" > | 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> ଡ୍ରପଡାଉନ୍ ଟ୍ରିଗର </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

URL ଗୁଡିକ ଅକ୍ଷୁର୍ଣ୍ଣ ରଖିବା ପାଇଁ, data-targetଏହା ବଦଳରେ ଗୁଣ ବ୍ୟବହାର କରନ୍ତୁ href="#"|

<div class = "dropdown" > | 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html"> _      
    ଡ୍ରପଡାଉନ୍
    <b class = "caret" > </b> | 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

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

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

$ ( '.dropdown-toggle' ) | ଡ୍ରପଡାଉନ୍ ()

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

କିଛି ନୁହେଁ |

ପ୍ରଣାଳୀ

$ ()। ଡ୍ରପଡାଉନ୍ ('ଟୋଗଲ୍')

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

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

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

ବ୍ୟବହାର

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

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

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

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

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

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

ପ୍ରଣାଳୀ

.scrollspy ('ସତେଜ')

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

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

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

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

ଘଟଣା

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

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

ବ୍ୟବହାର

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

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

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

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

ମାର୍କଅପ୍ |

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

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

ପ୍ରଣାଳୀ

$ () ଟ୍ୟାବ୍ |

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

<ul class = "nav nav-tabs" id = "myTab" > |  
  <li ଶ୍ରେଣୀ = "ସକ୍ରିୟ" > <a href = "#home"> ଘର </a> </li> |  
  <li> <a href = "#profile"> ପ୍ରୋଫାଇଲ୍ </a> </li> | 
  <li> <a href = "#messages"> ବାର୍ତ୍ତାଗୁଡିକ </a> </li> | 
  <li> <a href = "#settings"> ସେଟିଂସମୂହ </a> </li> | 
</ul>
 
<div ଶ୍ରେଣୀ = "ଟ୍ୟାବ୍-ବିଷୟବସ୍ତୁ" > | 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<ସ୍କ୍ରିପ୍ଟ> |
  $ ( କାର୍ଯ୍ୟ () {  
    $ ( '#myTab a: ଶେଷ' ) | ଟ୍ୟାବ୍ ( 'ଶୋ' );
  })
</script>

ଘଟଣା

$ ( 'a [ଡାଟା-ଟୋଗଲ୍ = "ଟ୍ୟାବ୍"]' ) | ଉପରେ ( 'ଦେଖାଯାଇଛି' , ଫଙ୍କସନ୍ ( ଇ ) {   
  ଇ । ଲକ୍ଷ୍ୟ // ସକ୍ରିୟ ଟ୍ୟାବ୍ |
  ଇ । ସମ୍ବନ୍ଧୀୟ ଟାର୍ଗେଟ୍ // ପୂର୍ବ ଟ୍ୟାବ୍ |
})

ଉଦାହରଣଗୁଡିକ

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

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

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

ଚାରୋଟି ଦିଗ |

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

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

ବ୍ୟବହାର

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

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

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

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

ମାର୍କଅପ୍ |

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

ପ୍ରଣାଳୀ

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

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

.tooltip ('show')

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

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

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

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

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

.tooltip ('ଟୋଗଲ୍')

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

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

.tooltip ('ବିନାଶ')

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

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

ଉଦାହରଣଗୁଡିକ

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

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

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

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

ଲାଇଭ୍ ଡେମୋ |

ଚାରୋଟି ଦିଗ |

ବ୍ୟବହାର

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

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

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

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

ମାର୍କଅପ୍ |

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

ପ୍ରଣାଳୀ

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

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

.ପୋଭର ('ଶୋ')

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

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

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

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

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

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

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

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

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

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

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

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

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

ବ୍ୟବହାର

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

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

ମାର୍କଅପ୍ |

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

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

ପ୍ରଣାଳୀ

$ ()। ସତର୍କ ()

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

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

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

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

ଘଟଣା

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

$ ( '# my-alert' ) | ବାନ୍ଧ ( 'ବନ୍ଦ' , କାର୍ଯ୍ୟ () {   
  // କିଛି କର…
})

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

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

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

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

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

ଏକକ ଟୋଗଲ୍ |

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

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

ଚେକ୍ ବକ୍ସ |

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

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

ରେଡିଓ |

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

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

ବ୍ୟବହାର

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

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

ମାର୍କଅପ୍ |

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

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

କିଛି ନୁହେଁ |

ପ୍ରଣାଳୀ

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

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

<ବଟନ୍ ପ୍ରକାର = "ବଟନ୍" ଶ୍ରେଣୀ = "btn" ଡାଟା-ଟୋଗଲ୍ = "ବଟନ୍" > … </button>    

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

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

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

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

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

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

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

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

ବିଷୟରେ

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

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

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

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

<div ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍" id = "ଆକର୍ଡିଅନ୍ 2" > |  
  <div ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍-ଗ୍ରୁପ୍" > | 
    <div ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍-ହେଡିଙ୍ଗ୍" > | 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne"> _    
        ସଂପୃକ୍ତ ଗୋଷ୍ଠୀ ଆଇଟମ୍ # 1 |
      </a>
    </div>
    <div id = "collapseOne" ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍-ଶରୀର ଭୁଶୁଡ଼ିବା" > |  
      <div ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍-ଆଭ୍ୟନ୍ତରୀଣ" > | 
        Anim pariatur cliche ...
      </div>
    </div>
  </div>
  <div ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍-ଗ୍ରୁପ୍" > | 
    <div ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍-ହେଡିଙ୍ଗ୍" > | 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo"> _    
        ସଂପୃକ୍ତ ଗୋଷ୍ଠୀ ଆଇଟମ୍ # 2 |
      </a>
    </div>
    <div id = "collapseTwo" ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍-ଶରୀର ପତନ" > |  
      <div ଶ୍ରେଣୀ = "ଆକର୍ଡିଅନ୍-ଆଭ୍ୟନ୍ତରୀଣ" > | 
        Anim pariatur cliche ...
      </div>
    </div>
  </div>
</div>
...

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

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

ବ୍ୟବହାର

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

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

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

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

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

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

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

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

ପ୍ରଣାଳୀ

.collapse (ବିକଳ୍ପ)

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

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

.collapse ('ଟୋଗଲ୍')

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

.collapse ('show')

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

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

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

ଘଟଣା

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

$ ( '#myCollapsible' ) | ଉପରେ ( 'ଲୁକ୍କାୟିତ' , କାର୍ଯ୍ୟ () {   
  // କିଛି କର…
})

ଉଦାହରଣ କାରୁସେଲ୍ |

ନିମ୍ନରେ ଥିବା ସ୍ଲାଇଡ୍ ଶୋରେ ଏକ କାରୁସେଲ ପରି ଉପାଦାନ ମାଧ୍ୟମରେ ସାଇକେଲ ଚଲାଇବା ପାଇଁ ଏକ ଜେନେରିକ୍ ପ୍ଲଗଇନ୍ ଏବଂ ଉପାଦାନ ଦେଖାଯାଏ |

ପ୍ରଥମ ଥମ୍ବନେଲ୍ ଲେବଲ୍ |

Cras justo odio, dapibus ac facilisis in, egestas eget quam। Eget metus ରେ Donec id elit non mi porta gravida | Nullam id dolor id nibh ultricies vehicula ut id elit।

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" ଶ୍ରେଣୀ = "କାରୁସେଲ ସ୍ଲାଇଡ୍" > |  
  <ol ଶ୍ରେଣୀ = "କାରୁସେଲ-ସୂଚକ" > | 
    <li data-target = "#myCarousel" ଡାଟା-ସ୍ଲାଇଡ୍-ଟୁ = "0" ଶ୍ରେଣୀ = "ସକ୍ରିୟ" > </li>   
    <li data-target = "#myCarousel" ଡାଟା-ସ୍ଲାଇଡ୍-ଟୁ = "1" > </li> |  
    <li data-target = "#myCarousel" ଡାଟା-ସ୍ଲାଇଡ୍-ଟୁ = "2" > </li> |  
  </ol>
  <! - କାରୁସେଲ୍ ଆଇଟମ୍ -> |
  <div class = "carousel-inner" > | 
    <div class = "ସକ୍ରିୟ ଆଇଟମ୍" > … </div> | 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <! - କାରୁସେଲ୍ ନାଭ -> |
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev"> & lsaquo ; </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next"> & rsaquo; </a>   
</div>

ବ୍ୟବହାର

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

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

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

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

$ ( '.carousel' ) | କାରୁସେଲ ()

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

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

ପ୍ରଣାଳୀ

.carousel (ବିକଳ୍ପ)

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

$ ( '.carousel' ) | କାରୁସେଲ ({
  ବ୍ୟବଧାନ : 2000 
})

.କାରୋସେଲ୍ ('ଚକ୍ର')

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

.carousel ('ବିରତି')

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

.କାରୋସେଲ୍ (ସଂଖ୍ୟା)

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

.carousel ('ପୂର୍ବ')

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

.carousel ('ପରବର୍ତ୍ତୀ')

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

ଘଟଣା

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

ଉଦାହରଣ |

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

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

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

ବ୍ୟବହାର

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

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

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

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

$ ( '.typeahead' ) |typeahead ()

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

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

ପ୍ରଣାଳୀ

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

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

ଉଦାହରଣ |

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

ବ୍ୟବହାର

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

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

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

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

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

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

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

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