വ്യക്തിഗത അല്ലെങ്കിൽ സമാഹരിച്ചത്

പ്ലഗിനുകൾ വ്യക്തിഗതമായി ഉൾപ്പെടുത്താം (ചിലതിന് ആവശ്യമായ ഡിപൻഡൻസികൾ ഉണ്ടെങ്കിലും), അല്ലെങ്കിൽ എല്ലാം ഒറ്റയടിക്ക്. bootstrap.js , bootstrap.min.js എന്നിവയിൽ എല്ലാ പ്ലഗിനുകളും ഒരൊറ്റ ഫയലിൽ അടങ്ങിയിരിക്കുന്നു.

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ

ജാവാസ്ക്രിപ്റ്റിന്റെ ഒരു വരി പോലും എഴുതാതെ തന്നെ നിങ്ങൾക്ക് എല്ലാ ബൂട്ട്സ്ട്രാപ്പ് പ്ലഗിനുകളും മാർക്ക്അപ്പ് API വഴി ഉപയോഗിക്കാൻ കഴിയും. ഇത് ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഫസ്റ്റ് ക്ലാസ് API ആണ്, ഒരു പ്ലഗിൻ ഉപയോഗിക്കുമ്പോൾ നിങ്ങളുടെ ആദ്യ പരിഗണന ആയിരിക്കണം.

അതായത്, ചില സാഹചര്യങ്ങളിൽ ഈ പ്രവർത്തനം ഓഫാക്കുന്നത് അഭികാമ്യമാണ്. അതിനാൽ, `'data-api'' എന്നതിനൊപ്പം ബോഡി നെയിംസ്പേസ് ഉള്ള എല്ലാ ഇവന്റുകളും അൺബൈൻഡ് ചെയ്തുകൊണ്ട് ഡാറ്റ ആട്രിബ്യൂട്ട് API പ്രവർത്തനരഹിതമാക്കാനുള്ള കഴിവും ഞങ്ങൾ നൽകുന്നു. ഇത് ഇതുപോലെ കാണപ്പെടുന്നു:

$('ശരീരം').ഓഫ്('.ഡാറ്റ-എപിഐ')( 'ശരീരം' ). ഓഫ് ( '.data-api' )

പകരമായി, ഒരു നിർദ്ദിഷ്‌ട പ്ലഗിൻ ടാർഗെറ്റുചെയ്യുന്നതിന്, ഇതുപോലുള്ള ഡാറ്റ-എപിഐ നെയിംസ്‌പെയ്‌സിനൊപ്പം പ്ലഗിന്റെ പേര് ഒരു നെയിംസ്‌പെയ്‌സായി ഉൾപ്പെടുത്തുക:

$('ശരീരം').ഓഫ്('.alert.data-api')( 'ശരീരം' ). ഓഫ് ( '.alert.data-api' )

പ്രോഗ്രാം API

JavaScript API വഴി നിങ്ങൾക്ക് എല്ലാ ബൂട്ട്‌സ്‌ട്രാപ്പ് പ്ലഗിനുകളും ഉപയോഗിക്കാൻ കഴിയുമെന്നും ഞങ്ങൾ വിശ്വസിക്കുന്നു. എല്ലാ പൊതു API-കളും സിംഗിൾ, ചെയിൻ ചെയ്യാവുന്ന രീതികൾ, ഒപ്പം പ്രവർത്തിച്ച ശേഖരം തിരികെ നൽകുകയും ചെയ്യുന്നു.

$(".btn.danger").button("toggle").addClass("fat")( ".btn.danger" ). ബട്ടൺ ( "ടോഗിൾ" ). addClass ( "കൊഴുപ്പ്" )

എല്ലാ രീതികളും ഒരു ഓപ്‌ഷണൽ ഓപ്‌ഷൻ ഒബ്‌ജക്റ്റ്, ഒരു പ്രത്യേക രീതിയെ ടാർഗെറ്റുചെയ്യുന്ന ഒരു സ്‌ട്രിംഗ് അല്ലെങ്കിൽ ഒന്നും സ്വീകരിക്കണം (ഇത് ഡിഫോൾട്ട് സ്വഭാവമുള്ള ഒരു പ്ലഗിൻ ആരംഭിക്കുന്നു):

$("#myModal").modal() // ഡിഫോൾട്ടുകൾ ഉപയോഗിച്ച് സമാരംഭിച്ചു( "#myModal" ). മോഡൽ () // ഡിഫോൾട്ടുകൾ ഉപയോഗിച്ച് സമാരംഭിച്ചു                       
$ ( "#myModal" ). മോഡൽ ({ കീബോർഡ് : തെറ്റ് }) // കീബോർഡില്ലാതെ ആരംഭിച്ചിരിക്കുന്നു     
$ ( "#myModal" ). മോഡൽ ( 'ഷോ' ) // ഉടൻ ഷോ ആരംഭിക്കുകയും അഭ്യർത്ഥിക്കുകയും ചെയ്യുന്നു                

ഓരോ പ്ലഗിനും അതിന്റെ അസംസ്‌കൃത കൺസ്‌ട്രക്‌ടറെ ഒരു `കൺസ്‌ട്രക്‌റ്റർ' പ്രോപ്പർട്ടിയിൽ തുറന്നുകാട്ടുന്നു: $.fn.popover.Constructor. നിങ്ങൾക്ക് ഒരു പ്രത്യേക പ്ലഗിൻ ഇൻസ്‌റ്റൻസ് ലഭിക്കണമെങ്കിൽ, ഒരു ഘടകത്തിൽ നിന്ന് നേരിട്ട് അത് വീണ്ടെടുക്കുക: $('[rel=popover]').data('popover').

വൈരുദ്ധ്യമില്ല

ചിലപ്പോൾ മറ്റ് യുഐ ചട്ടക്കൂടുകൾക്കൊപ്പം ബൂട്ട്സ്ട്രാപ്പ് പ്ലഗിനുകൾ ഉപയോഗിക്കേണ്ടത് ആവശ്യമാണ്. ഈ സാഹചര്യത്തിൽ, നെയിംസ്പേസ് കൂട്ടിയിടികൾ ഇടയ്ക്കിടെ സംഭവിക്കാം. .noConflictഇത് സംഭവിക്കുകയാണെങ്കിൽ, നിങ്ങൾ മൂല്യം പഴയപടിയാക്കാൻ ആഗ്രഹിക്കുന്ന പ്ലഗിനിലേക്ക് വിളിക്കാം .

var bootstrapButton = $.fn.button.noConflict() // $.fn.button മുമ്പ് നൽകിയ മൂല്യത്തിലേക്ക് തിരികെ നൽകുകbootstrapButton = $ . എഫ്.എൻ. _ ബട്ടൺ . noConflict () // $.fn.button മുമ്പ് നൽകിയ മൂല്യത്തിലേക്ക് തിരികെ നൽകുക 
$ _ എഫ്.എൻ. _ bootstrapBtn = bootstrapButton             // $().bootstrapBtn ബൂട്ട്സ്ട്രാപ്പ് പ്രവർത്തനക്ഷമത നൽകുക

സംഭവങ്ങൾ

ഒട്ടുമിക്ക പ്ലഗിന്റെ തനതായ പ്രവർത്തനങ്ങൾക്കും ബൂട്ട്‌സ്‌ട്രാപ്പ് ഇഷ്‌ടാനുസൃത ഇവന്റുകൾ നൽകുന്നു. showസാധാരണയായി, ഇവ ഒരു അവിഭാജ്യവും ഭൂതകാലവുമായ രൂപത്തിലാണ് വരുന്നത് - ഇവിടെ ഒരു സംഭവത്തിന്റെ തുടക്കത്തിൽ ഇൻഫിനിറ്റീവ് (ഉദാ. ) shownട്രിഗർ ചെയ്യപ്പെടുന്നു, ഒരു പ്രവർത്തനത്തിന്റെ പൂർത്തീകരണത്തിൽ അതിന്റെ ഭൂതകാല രൂപവും (ഉദാ.) ട്രിഗർ ചെയ്യുന്നു.

എല്ലാ അനന്തമായ ഇവന്റുകളും പ്രിവൻഡ് ഡിഫോൾട്ട് പ്രവർത്തനം നൽകുന്നു. ഒരു പ്രവർത്തനം ആരംഭിക്കുന്നതിന് മുമ്പ് അത് നടപ്പിലാക്കുന്നത് നിർത്താനുള്ള കഴിവ് ഇത് നൽകുന്നു.

$('#myModal').on('show', function (e) {( '#myModal' ). ഓൺ ( 'ഷോ' , ഫംഗ്‌ഷൻ ( ഇ ) {   
    എങ്കിൽ ( ! ഡാറ്റ ) ഇ . തടയൽ ഡിഫോൾട്ട് () // മോഡൽ കാണിക്കുന്നതിൽ നിന്ന് നിർത്തുന്നു   
})

പരിവർത്തനങ്ങളെക്കുറിച്ച്

ലളിതമായ സംക്രമണ ഇഫക്റ്റുകൾക്കായി, മറ്റ് JS ഫയലുകൾക്കൊപ്പം ഒരിക്കൽ bootstrap-transition.js ഉൾപ്പെടുത്തുക. നിങ്ങൾ കംപൈൽ ചെയ്ത (അല്ലെങ്കിൽ ചെറുതാക്കിയ) bootstrap.js ആണ് ഉപയോഗിക്കുന്നതെങ്കിൽ , ഇത് ഉൾപ്പെടുത്തേണ്ട ആവശ്യമില്ല-ഇത് ഇതിനകം തന്നെയുണ്ട്.

കേസുകൾ ഉപയോഗിക്കുക

ട്രാൻസിഷൻ പ്ലഗിന്റെ ചില ഉദാഹരണങ്ങൾ:

• മോഡലുകളിൽ സ്ലൈഡിംഗ് അല്ലെങ്കിൽ മങ്ങൽ
• മങ്ങിപ്പോകുന്ന ടാബുകൾ
• അലേർട്ടുകൾ മങ്ങുന്നു
• സ്ലൈഡിംഗ് കറൗസൽ പാളികൾ

ഉദാഹരണങ്ങൾ

മോഡലുകൾ സ്‌ട്രീംലൈൻ ചെയ്‌തതും എന്നാൽ വഴക്കമുള്ളതും ആവശ്യമായ ഏറ്റവും കുറഞ്ഞ പ്രവർത്തനക്ഷമതയും സ്‌മാർട്ട് ഡിഫോൾട്ടുകളും ഉള്ള ഡയലോഗ് ആവശ്യപ്പെടുന്നു.

സ്റ്റാറ്റിക് ഉദാഹരണം

തലക്കെട്ടും ബോഡിയും ഫൂട്ടറിലെ പ്രവർത്തനങ്ങളുടെ സെറ്റും ഉള്ള ഒരു റെൻഡർ ചെയ്‌ത മോഡൽ.

<div class="modal hide fade"> ക്ലാസ് = "മോഡൽ ഹൈഡ് ഫേഡ്" >
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </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>

ലൈവ് ഡെമോ

താഴെയുള്ള ബട്ടണിൽ ക്ലിക്ക് ചെയ്ത് JavaScript വഴി ഒരു മോഡൽ ടോഗിൾ ചെയ്യുക. അത് താഴേക്ക് സ്ലൈഡ് ചെയ്യുകയും പേജിന്റെ മുകളിൽ നിന്ന് മങ്ങുകയും ചെയ്യും.

<!-- മോഡൽ ട്രിഗർ ചെയ്യാനുള്ള ബട്ടൺ -->
<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" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > മോഡൽ ഹെഡർ </h3> 
  </div>
  <div class = "modal-body" > 
    <p> ഒരു നല്ല ശരീരം... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > അടയ്ക്കുക </button>   
    <button class = "btn btn-primary" > മാറ്റങ്ങൾ സംരക്ഷിക്കുക </button> 
  </div>
</div>

ഉപയോഗം

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി

JavaScript എഴുതാതെ ഒരു മോഡൽ സജീവമാക്കുക. ടോഗിൾ ചെയ്യാൻ ഒരു നിർദ്ദിഷ്ട മോഡൽ അല്ലെങ്കിൽ ടാർഗെറ്റ് data-toggle="modal"ചെയ്യുന്നതിനായി ഒരു ബട്ടൺ പോലെയുള്ള ഒരു കൺട്രോളർ എലമെന്റിൽ സജ്ജീകരിക്കുക .data-target="#foo"href="#foo"

<button type="button" data-toggle="modal" data-target="#myModal">മോഡൽ സമാരംഭിക്കുക</button> type = "button" data-toggle = "modal " data-target = "#myModal" > ലോഞ്ച് മോഡൽ </button>  

JavaScript വഴി

myModalJavaScript-ന്റെ ഒരൊറ്റ വരി ഉപയോഗിച്ച് ഐഡി ഉപയോഗിച്ച് ഒരു മോഡൽ വിളിക്കുക :

$('#myModal').modal(ഓപ്ഷനുകൾ)( '#myModal' ). മോഡൽ ( ഓപ്ഷനുകൾ )

ഓപ്ഷനുകൾ

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴിയോ JavaScript വഴിയോ ഓപ്ഷനുകൾ കൈമാറാൻ കഴിയും. data-ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്കായി, എന്നതിലെന്നപോലെ ഓപ്ഷന്റെ പേര് ചേർക്കുക data-backdrop="".

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

രീതികൾ

.modal(ഓപ്ഷനുകൾ)

നിങ്ങളുടെ ഉള്ളടക്കം ഒരു മോഡൽ ആയി സജീവമാക്കുന്നു. ഒരു ഓപ്ഷണൽ ഓപ്ഷനുകൾ സ്വീകരിക്കുന്നു object.

$('#myModal').modal({( '#myModal' ). മോഡൽ ({
  കീബോർഡ് : തെറ്റ് 
})

.modal('ടോഗിൾ')

ഒരു മോഡൽ സ്വമേധയാ ടോഗിൾ ചെയ്യുന്നു.

$('#myModal').modal('toggle')( '#myModal' ). മോഡൽ ( 'ടോഗിൾ' )

.modal('ഷോ')

സ്വമേധയാ ഒരു മോഡൽ തുറക്കുന്നു.

$('#myModal').modal('show')( '#myModal' ). മോഡൽ ( 'ഷോ' )

.modal('മറയ്ക്കുക')

ഒരു മോഡൽ സ്വമേധയാ മറയ്ക്കുന്നു.

$('#myModal').modal('മറയ്ക്കുക')( '#myModal' ). മോഡൽ ( 'മറയ്ക്കുക' )

സംഭവങ്ങൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ മോഡൽ ക്ലാസ് മോഡൽ പ്രവർത്തനത്തിലേക്ക് ഹുക്ക് ചെയ്യുന്നതിനായി കുറച്ച് ഇവന്റുകൾ തുറന്നുകാട്ടുന്നു.

$('#myModal').on('hidden', function () {( '#myModal' ). ഓൺ ( 'മറഞ്ഞിരിക്കുന്നു' , പ്രവർത്തനം () {   
  // എന്തെങ്കിലും ചെയ്യൂ…
})

ഉദാഹരണങ്ങൾ

നവബാർ, ടാബുകൾ, ഗുളികകൾ എന്നിവയുൾപ്പെടെ ഈ ലളിതമായ പ്ലഗിൻ ഉപയോഗിച്ച് മിക്കവാറും എല്ലാത്തിനും ഡ്രോപ്പ്ഡൗൺ മെനുകൾ ചേർക്കുക.

ഒരു നവബാറിനുള്ളിൽ

ടാബുകൾക്കുള്ളിൽ

ഉപയോഗം

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി

data-toggle="dropdown"ഒരു ഡ്രോപ്പ്ഡൗൺ ടോഗിൾ ചെയ്യാൻ ഒരു ലിങ്കിലേക്കോ ബട്ടണിലേക്കോ ചേർക്കുക .

<div class="ഡ്രോപ്പ്ഡൗൺ"> ക്ലാസ് = "ഡ്രോപ്പ്ഡൗൺ" >
  <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="ഡ്രോപ്പ്ഡൗൺ"> ക്ലാസ് = "ഡ്രോപ്പ്ഡൗൺ" >
  <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>

JavaScript വഴി

JavaScript വഴി ഡ്രോപ്പ്ഡൗണുകളെ വിളിക്കുക:

$('.dropdown-toggle').dropdown()( '.dropdown-toggle' ). ഡ്രോപ്പ്ഡൗൺ ()

ഓപ്ഷനുകൾ

ഒന്നുമില്ല

രീതികൾ

$().ഡ്രോപ്പ്ഡൗൺ('ടോഗിൾ')

തന്നിരിക്കുന്ന navbar അല്ലെങ്കിൽ ടാബ് ചെയ്‌ത നാവിഗേഷനായി മെനുകൾ ടോഗിൾ ചെയ്യുന്നതിനുള്ള ഒരു പ്രോഗ്രാമാറ്റിക് API.

നവബാറിലെ ഉദാഹരണം

സ്ക്രോൾ പൊസിഷൻ അടിസ്ഥാനമാക്കി നാവിക് ടാർഗെറ്റുകൾ സ്വയമേവ അപ്ഡേറ്റ് ചെയ്യുന്നതിനുള്ളതാണ് ScrollSpy പ്ലഗിൻ. നവബാറിന് താഴെയുള്ള ഏരിയ സ്ക്രോൾ ചെയ്‌ത് സജീവമായ ക്ലാസ് മാറ്റം കാണുക. ഡ്രോപ്പ്ഡൗൺ സബ് ഇനങ്ങളും ഹൈലൈറ്റ് ചെയ്യും.

ഉപയോഗം

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി

നിങ്ങളുടെ ടോപ്പ്ബാർ നാവിഗേഷനിലേക്ക് സ്ക്രോൾസ്പൈ സ്വഭാവം എളുപ്പത്തിൽ ചേർക്കുന്നതിന്, data-spy="scroll"നിങ്ങൾ ചാരപ്പണി ചെയ്യാൻ ആഗ്രഹിക്കുന്ന ഘടകത്തിലേക്ക് ചേർക്കുക (സാധാരണയായി ഇത് ബോഡി ആയിരിക്കും) കൂടാതെ data-target=".navbar"ഏത് nav ഉപയോഗിക്കണമെന്ന് തിരഞ്ഞെടുക്കുക. നിങ്ങൾ ഒരു .navഘടകം ഉപയോഗിച്ച് സ്ക്രോൾസ്പൈ ഉപയോഗിക്കാൻ ആഗ്രഹിക്കും.

<body data-spy="scroll" data-target=".navbar">...</body> data-spy = "സ്ക്രോൾ" data-target = ".navbar" > ... </body> 

JavaScript വഴി

JavaScript വഴി സ്ക്രോൾസ്പൈയെ വിളിക്കുക:

$('#navbar').scrollspy()( '#navbar' ). സ്ക്രോൾസ്പി ()

രീതികൾ

.scrollspy('പുതുക്കുക')

DOM-ൽ നിന്ന് ഘടകങ്ങൾ ചേർക്കുന്നതിനോ നീക്കം ചെയ്യുന്നതിനോ ചേർന്ന് സ്ക്രോൾസ്പൈ ഉപയോഗിക്കുമ്പോൾ, നിങ്ങൾ ഇതുപോലെ പുതുക്കൽ രീതി വിളിക്കേണ്ടതുണ്ട്:

$('[data-spy="scroll"]').each(function () {( '[data-spy="scroll"]' ). ഓരോന്നും ( പ്രവർത്തനം () {  
  var $spy = $ ( ഇത് ). സ്ക്രോൾസ്പി ( 'പുതുക്കുക' )
});

ഓപ്ഷനുകൾ

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴിയോ JavaScript വഴിയോ ഓപ്ഷനുകൾ കൈമാറാൻ കഴിയും. data-ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്കായി, എന്നതിലെന്നപോലെ ഓപ്ഷന്റെ പേര് ചേർക്കുക data-offset="".

സംഭവങ്ങൾ

ഉദാഹരണ ടാബുകൾ

ഡ്രോപ്പ്ഡൗൺ മെനുകൾ വഴി പോലും പ്രാദേശിക ഉള്ളടക്കത്തിന്റെ പാനുകൾ വഴി പരിവർത്തനം ചെയ്യാൻ ദ്രുതവും ചലനാത്മകവുമായ ടാബ് പ്രവർത്തനം ചേർക്കുക.

ഉപയോഗം

JavaScript വഴി ടാബബിൾ ടാബുകൾ പ്രവർത്തനക്ഷമമാക്കുക (ഓരോ ടാബും വ്യക്തിഗതമായി സജീവമാക്കേണ്ടതുണ്ട്):

$('#myTab a').ക്ലിക്ക്(ഫംഗ്ഷൻ (ഇ) {( '#myTab a' ). ക്ലിക്ക് ( പ്രവർത്തനം ( ഇ ) {  
  ഇ . പ്രിവൻഡ് ഡിഫോൾട്ട് ();
  $ ( ഇത് ). ടാബ് ( 'കാണിക്കുക' );
})

നിങ്ങൾക്ക് വ്യക്തിഗത ടാബുകൾ പല തരത്തിൽ സജീവമാക്കാം:

$('#myTab a[href="#profile"]').tab('show'); // പേര് പ്രകാരം ടാബ് തിരഞ്ഞെടുക്കുക( '#myTab a[href="#profile"]' ). ടാബ് ( 'കാണിക്കുക' ); // പേര് പ്രകാരം ടാബ് തിരഞ്ഞെടുക്കുക 
$ ( '#myTab a:first' ). ടാബ് ( 'കാണിക്കുക' ); // ആദ്യ ടാബ് തിരഞ്ഞെടുക്കുക 
$ ( '#myTab a:last' ). ടാബ് ( 'കാണിക്കുക' ); // അവസാന ടാബ് തിരഞ്ഞെടുക്കുക 
$ ( '#myTab li:eq(2) a' ). ടാബ് ( 'കാണിക്കുക' ); // മൂന്നാമത്തെ ടാബ് തിരഞ്ഞെടുക്കുക (0-ഇൻഡക്‌സ് ചെയ്‌തത്) 

മാർക്ക്അപ്പ്

ലളിതമായി വ്യക്തമാക്കിയോ ഒരു ഘടകത്തിലോ ജാവാസ്ക്രിപ്റ്റ് എഴുതാതെ നിങ്ങൾക്ക് ഒരു ടാബ് അല്ലെങ്കിൽ ഗുളിക നാവിഗേഷൻ സജീവമാക്കാം data-toggle="tab". ടാബിലേക്ക് ക്ലാസുകളും ചേർക്കുന്നത് data-toggle="pill"ബൂട്ട്‌സ്‌ട്രാപ്പ് ടാബ് സ്റ്റൈലിംഗ് പ്രയോഗിക്കും.navnav-tabsul

<ul class="nav nav-tabs"> ക്ലാസ് = "nav nav-tabs" >
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > പ്രൊഫൈൽ </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > സന്ദേശങ്ങൾ </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > ക്രമീകരണങ്ങൾ </a></li>  
</ul>

രീതികൾ

$().ടാബ്

ഒരു ടാബ് ഘടകവും ഉള്ളടക്ക കണ്ടെയ്‌നറും സജീവമാക്കുന്നു. ടാബിന് DOM-ൽ ഒരു കണ്ടെയ്‌നർ നോഡ് data-targetഅല്ലെങ്കിൽ ഒരു ടാർഗെറ്റിംഗ് ഉണ്ടായിരിക്കണം.href

<ul class="nav nav-tabs" id="myTab"> class = "nav nav-tabs" id = "myTab" > 
  <li class = "active" ><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 class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "പ്രൊഫൈൽ" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
<സ്ക്രിപ്റ്റ്>
  $ ( പ്രവർത്തനം () {  
    $ ( '#myTab a:last' ). ടാബ് ( 'കാണിക്കുക' );
  })
</script>

സംഭവങ്ങൾ

$('a[data-toggle="tab"]').on('കാണിച്ചിരിക്കുന്നു', ഫംഗ്‌ഷൻ (ഇ) {( 'a[data-toggle="tab"]' ). ഓൺ ( 'കാണിച്ചിരിക്കുന്നു' , ഫംഗ്‌ഷൻ ( ഇ ) {   
  ഇ . ടാർഗെറ്റ് // സജീവമാക്കിയ ടാബ്
  ഇ . ബന്ധപ്പെട്ട ടാർഗെറ്റ് // മുമ്പത്തെ ടാബ്
})

ഉദാഹരണങ്ങൾ

ജേസൺ ഫ്രെയിം എഴുതിയ മികച്ച jQuery.tipsy പ്ലഗിൻ പ്രചോദനം; ടൂൾടിപ്പുകൾ ഒരു അപ്‌ഡേറ്റ് ചെയ്ത പതിപ്പാണ്, അത് ചിത്രങ്ങളെ ആശ്രയിക്കുന്നില്ല, ആനിമേഷനുകൾക്കായി CSS3 ഉപയോഗിക്കുന്നു, പ്രാദേശിക തലക്കെട്ട് സംഭരണത്തിനായി ഡാറ്റ-ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുന്നു.

പ്രകടന കാരണങ്ങളാൽ, ടൂൾടിപ്പും പോപ്പോവർ ഡാറ്റ-എപിസും തിരഞ്ഞെടുക്കുന്നു, അതായത് നിങ്ങൾ അവ സ്വയം ആരംഭിക്കണം .

ടൂൾടിപ്പുകൾ കാണുന്നതിന് താഴെയുള്ള ലിങ്കുകളിൽ ഹോവർ ചെയ്യുക:

നാല് ദിശകൾ

ഇൻപുട്ട് ഗ്രൂപ്പുകളിലെ ടൂൾടിപ്പുകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഇൻപുട്ട് ഗ്രൂപ്പുകൾക്കൊപ്പം ടൂൾടിപ്പുകളും പോപോവറുകളും ഉപയോഗിക്കുമ്പോൾ, containerഅനാവശ്യ പാർശ്വഫലങ്ങൾ ഒഴിവാക്കാൻ നിങ്ങൾ (ചുവടെ രേഖപ്പെടുത്തിയിരിക്കുന്ന) ഓപ്ഷൻ സജ്ജീകരിക്കേണ്ടതുണ്ട്.

ഉപയോഗം

JavaScript വഴി ടൂൾടിപ്പ് ട്രിഗർ ചെയ്യുക:

$('#ഉദാഹരണം').ടൂൾടിപ്പ്(ഓപ്ഷനുകൾ)( '#ഉദാഹരണം' ). ടൂൾടിപ്പ് ( ഓപ്ഷനുകൾ )

ഓപ്ഷനുകൾ

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴിയോ JavaScript വഴിയോ ഓപ്ഷനുകൾ കൈമാറാൻ കഴിയും. data-ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്കായി, എന്നതിലെന്നപോലെ ഓപ്ഷന്റെ പേര് ചേർക്കുക data-animation="".

മാർക്ക്അപ്പ്

<a href="#" data-toggle="tooltip" title="first tooltip">എന്റെ മേൽ ഹോവർ ചെയ്യുക</a> href = "#" data-toggle = "tooltip" title = "ആദ്യ ടൂൾടിപ്പ്" > എന്റെ മേൽ ഹോവർ ചെയ്യുക </a>  

രീതികൾ

$().ടൂൾടിപ്പ്(ഓപ്ഷനുകൾ)

ഒരു മൂലക ശേഖരത്തിലേക്ക് ടൂൾടിപ്പ് ഹാൻഡ്‌ലർ അറ്റാച്ചുചെയ്യുന്നു.

.ടൂൾടിപ്പ്('ഷോ')

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പ് വെളിപ്പെടുത്തുന്നു.

$('#ഘടകം').ടൂൾടിപ്പ്('ഷോ')( '#ഘടകം' ). ടൂൾടിപ്പ് ( 'കാണിക്കുക' )

.ടൂൾടിപ്പ്('മറയ്ക്കുക')

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പ് മറയ്ക്കുന്നു.

$('#ഘടകം').ടൂൾടിപ്പ്('മറയ്ക്കുക')( '#ഘടകം' ). ടൂൾടിപ്പ് ( 'മറയ്ക്കുക' )

.ടൂൾടിപ്പ്('ടോഗിൾ')

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പ് ടോഗിൾ ചെയ്യുന്നു.

$('#ഘടകം').ടൂൾടിപ്പ്('ടോഗിൾ')( '#ഘടകം' ). ടൂൾടിപ്പ് ( 'ടോഗിൾ' )

.ടൂൾടിപ്പ്('നശിപ്പിക്കുക')

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പ് മറയ്ക്കുകയും നശിപ്പിക്കുകയും ചെയ്യുന്നു.

$('#ഘടകം').ടൂൾടിപ്പ്('നശിപ്പിക്കുക')( '#ഘടകം' ). ടൂൾടിപ്പ് ( 'നശിപ്പിക്കുക' )

ഉദാഹരണങ്ങൾ

ദ്വിതീയ വിവരങ്ങളുടെ ഭവനനിർമ്മാണത്തിനായി ഐപാഡിലുള്ളത് പോലെയുള്ള ഉള്ളടക്കത്തിന്റെ ചെറിയ ഓവർലേകൾ ചേർക്കുക. പോപോവർ പ്രവർത്തനക്ഷമമാക്കാൻ ബട്ടണിൽ ഹോവർ ചെയ്യുക. ടൂൾടിപ്പ് ഉൾപ്പെടുത്തേണ്ടതുണ്ട് .

സ്റ്റാറ്റിക് പോപോവർ

നാല് ഓപ്ഷനുകൾ ലഭ്യമാണ്: മുകളിൽ, വലത്, താഴെ, ഇടത് അലൈൻ ചെയ്‌തിരിക്കുന്നു.

dataജാവാസ്ക്രിപ്റ്റിൽ നിന്നും ഒരു ആട്രിബ്യൂട്ടിനുള്ളിലെ ഉള്ളടക്കത്തിൽ നിന്നും പോപ്പോവറുകൾ സൃഷ്ടിക്കപ്പെടുന്നില്ല .

ലൈവ് ഡെമോ

നാല് ദിശകൾ

ഉപയോഗം

JavaScript വഴി പോപോവറുകൾ പ്രവർത്തനക്ഷമമാക്കുക:

$('#ഉദാഹരണം').പോപ്പോവർ(ഓപ്ഷനുകൾ)( '#ഉദാഹരണം' ). പോപോവർ ( ഓപ്ഷനുകൾ )

ഓപ്ഷനുകൾ

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴിയോ JavaScript വഴിയോ ഓപ്ഷനുകൾ കൈമാറാൻ കഴിയും. data-ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്കായി, എന്നതിലെന്നപോലെ ഓപ്ഷന്റെ പേര് ചേർക്കുക data-animation="".

മാർക്ക്അപ്പ്

പ്രകടന കാരണങ്ങളാൽ, ടൂൾടിപ്പും പോപ്പോവർ ഡാറ്റ-എപിഎസും തിരഞ്ഞെടുക്കുന്നു. നിങ്ങൾക്ക് അവ ഉപയോഗിക്കാൻ താൽപ്പര്യമുണ്ടെങ്കിൽ ഒരു സെലക്ടർ ഓപ്ഷൻ വ്യക്തമാക്കുക.

രീതികൾ

$().popover(ഓപ്ഷനുകൾ)

ഒരു മൂലക ശേഖരണത്തിനായി പോപോവറുകൾ ആരംഭിക്കുന്നു.

.popover('ഷോ')

പോപോവർ മൂലകങ്ങൾ വെളിപ്പെടുത്തുന്നു.

$('#ഘടകം').popover('ഷോ')( '#ഘടകം' ). പോപോവർ ( 'ഷോ' )

.popover('മറയ്ക്കുക')

പോപോവർ മൂലകങ്ങൾ മറയ്ക്കുന്നു.

$('#ഘടകം').പോപോവർ('മറയ്ക്കുക')( '#ഘടകം' ). പോപോവർ ( 'മറയ്ക്കുക' )

.popover('ടോഗിൾ')

ഒരു ഘടകങ്ങൾ പോപ്പോവർ ടോഗിൾ ചെയ്യുന്നു.

$('#ഘടകം').പോപോവർ('ടോഗിൾ')( '#ഘടകം' ). പോപോവർ ( 'ടോഗിൾ' )

.popover('നശിപ്പിക്കുക')

ഒരു മൂലകത്തിന്റെ പോപോവർ മറയ്ക്കുകയും നശിപ്പിക്കുകയും ചെയ്യുന്നു.

$('#ഘടകം').പോപോവർ('നശിപ്പിക്കുക')( '#ഘടകം' ). പോപോവർ ( 'നശിപ്പിക്കുക' )

ഉദാഹരണ അലേർട്ടുകൾ

ഈ പ്ലഗിൻ ഉപയോഗിച്ച് എല്ലാ അലേർട്ട് സന്ദേശങ്ങളിലേക്കും ഡിസ്മിസ് പ്രവർത്തനം ചേർക്കുക.

ഉപയോഗം

JavaScript വഴി ഒരു അലേർട്ട് നിരസിക്കുന്നത് പ്രവർത്തനക്ഷമമാക്കുക:

$(".അലേർട്ട്").അലേർട്ട്()( ".അലേർട്ട്" ). മുന്നറിയിപ്പ് ()

മാർക്ക്അപ്പ്

data-dismiss="alert"ഒരു അലേർട്ട് ക്ലോസ് ഫംഗ്‌ഷണാലിറ്റി സ്വയമേവ നൽകുന്നതിന് നിങ്ങളുടെ ക്ലോസ് ബട്ടണിലേക്ക് ചേർക്കുക .

<a class="close" data-dismiss="alert" href="#">×</a> class = "close" data-dismiss = "Alert" href = "#" > × </a>  

രീതികൾ

$().അലേർട്ട്()

എല്ലാ അലേർട്ടുകളും അടുത്ത പ്രവർത്തനക്ഷമതയോടെ പൊതിയുന്നു. അടയ്‌ക്കുമ്പോൾ നിങ്ങളുടെ അലേർട്ടുകൾ ആനിമേറ്റ് ചെയ്യപ്പെടുന്നതിന്, അവയിൽ ഇതിനകം തന്നെ .fadeക്ലാസും .inപ്രയോഗിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.

.അലേർട്ട്('അടയ്ക്കുക')

ഒരു അലേർട്ട് അടയ്ക്കുന്നു.

$(".അലേർട്ട്").അലേർട്ട്('ക്ലോസ്')( ".അലേർട്ട്" ). മുന്നറിയിപ്പ് ( 'അടയ്ക്കുക' )

സംഭവങ്ങൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ അലേർട്ട് ക്ലാസ് അലേർട്ട് ഫംഗ്‌ഷണാലിറ്റിയിലേക്ക് ഹുക്ക് ചെയ്യുന്നതിനായി കുറച്ച് ഇവന്റുകൾ തുറന്നുകാട്ടുന്നു.

$('#my-Alert').bind('closed', function () {( '#മൈ-അലേർട്ട്' ). ബൈൻഡ് ( 'അടച്ച' , പ്രവർത്തനം () {   
  // എന്തെങ്കിലും ചെയ്യൂ…
})

ഉദാഹരണം ഉപയോഗങ്ങൾ

ബട്ടണുകൾ ഉപയോഗിച്ച് കൂടുതൽ ചെയ്യുക. ടൂൾബാറുകൾ പോലുള്ള കൂടുതൽ ഘടകങ്ങൾക്കായി നിയന്ത്രണ ബട്ടൺ പ്രസ്‌താവിക്കുക അല്ലെങ്കിൽ ബട്ടണുകളുടെ ഗ്രൂപ്പുകൾ സൃഷ്‌ടിക്കുക.

സ്റ്റേറ്റ്ഫുൾ

data-loading-text="Loading..."ഒരു ബട്ടണിൽ ഒരു ലോഡിംഗ് നില ഉപയോഗിക്കുന്നതിന് ചേർക്കുക .

<button type = "button" class = "btn btn-primary" data-loading-text = "ലോഡ് ചെയ്യുന്നു..." > ലോഡ് ചെയ്യുന്ന അവസ്ഥ </button>   

ഒറ്റ ടോഗിൾ

data-toggle="button"ഒരൊറ്റ ബട്ടണിൽ ടോഗിൾ ചെയ്യുന്നത് സജീവമാക്കാൻ ചേർക്കുക .

<button type = "button" class = "btn btn-primary" data-toggle = "button" > സിംഗിൾ ടോഗിൾ </button>   

ചെക്ക്ബോക്സ്

data-toggle="buttons-checkbox"btn-group-ൽ ടോഗിൾ ചെയ്യുന്നതിനായി ചെക്ക്ബോക്സ് ശൈലി ചേർക്കുക .

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > ഇടത് </button>  
  <button type = "button" class = "btn btn-primary" > മിഡിൽ </button>  
  <button type = "button" class = "btn btn-primary" > വലത് </button>  
</div>

റേഡിയോ

data-toggle="buttons-radio"btn-ഗ്രൂപ്പിൽ റേഡിയോ സ്റ്റൈൽ ടോഗിൾ ചെയ്യുന്നതിനായി ചേർക്കുക .

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > ഇടത് </button>  
  <button type = "button" class = "btn btn-primary" > മിഡിൽ </button>  
  <button type = "button" class = "btn btn-primary" > വലത് </button>  
</div>

ഉപയോഗം

JavaScript വഴി ബട്ടണുകൾ പ്രവർത്തനക്ഷമമാക്കുക:

$ ( '.nav-tabs' ). ബട്ടൺ ()

മാർക്ക്അപ്പ്

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ ബട്ടൺ പ്ലഗിൻ അവിഭാജ്യമാണ്. വിവിധ മാർക്ക്അപ്പ് തരങ്ങൾക്കായി ചുവടെയുള്ള ഉദാഹരണ കോഡ് പരിശോധിക്കുക.

ഓപ്ഷനുകൾ

ഒന്നുമില്ല

രീതികൾ

$().ബട്ടൺ('ടോഗിൾ')

പുഷ് അവസ്ഥ ടോഗിൾ ചെയ്യുന്നു. ബട്ടണിന് അത് സജീവമാക്കിയതായി തോന്നുന്നു.

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

$().ബട്ടൺ('ലോഡിംഗ്')

ലോഡുചെയ്യുന്നതിന് ബട്ടൺ നില സജ്ജീകരിക്കുന്നു - ബട്ടൺ അപ്രാപ്തമാക്കുകയും ടെക്‌സ്‌റ്റ് ലോഡുചെയ്യുന്നതിന് ടെക്‌സ്‌റ്റ് സ്വാപ്പ് ചെയ്യുകയും ചെയ്യുന്നു. ഡാറ്റ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് ബട്ടൺ എലമെന്റിൽ ടെക്സ്റ്റ് ലോഡുചെയ്യുന്നത് നിർവചിക്കേണ്ടതാണ് data-loading-text.

<button type = "button" class = "btn" data-loading-text = "ലോഡിംഗ് സ്റ്റഫ്..." > ... </button>    

$().ബട്ടൺ('റീസെറ്റ്')

ബട്ടൺ നില പുനഃസജ്ജമാക്കുന്നു - വാചകം യഥാർത്ഥ വാചകത്തിലേക്ക് മാറ്റുന്നു.

$().ബട്ടൺ(സ്ട്രിംഗ്)

ബട്ടൺ നില പുനഃസജ്ജമാക്കുന്നു - ഏതെങ്കിലും ഡാറ്റ നിർവചിച്ച ടെക്സ്റ്റ് അവസ്ഥയിലേക്ക് ടെക്സ്റ്റ് സ്വാപ്പ് ചെയ്യുന്നു.

<button type = "button" class = "btn" data-complete-text = "പൂർത്തിയായി!" > ... </button>    
<സ്ക്രിപ്റ്റ്>
  $ ( '.btn' ). ബട്ടൺ ( 'പൂർണ്ണം' )
</script>

കുറിച്ച്

അക്കോഡിയനുകളും നാവിഗേഷനും പോലുള്ള പൊളിക്കാവുന്ന ഘടകങ്ങൾക്ക് അടിസ്ഥാന ശൈലികളും വഴക്കമുള്ള പിന്തുണയും നേടുക.

* സംക്രമണ പ്ലഗിൻ ഉൾപ്പെടുത്തേണ്ടതുണ്ട്.

ഉദാഹരണം അക്രോഡിയൻ

തകർച്ച പ്ലഗിൻ ഉപയോഗിച്ച്, ഞങ്ങൾ ഒരു ലളിതമായ അക്കോഡിയൻ ശൈലിയിലുള്ള വിജറ്റ് നിർമ്മിച്ചു:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        ചുരുക്കാവുന്ന ഗ്രൂപ്പ് ഇനം #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-bodyfold in" >  
      <div class = "accordion-inner" > 
        അനിം പരിയാതുർ ക്ലീഷെ...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        ചുരുക്കാവുന്ന ഗ്രൂപ്പ് ഇനം #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-bodyfold" >  
      <div class = "accordion-inner" > 
        അനിം പരിയാതുർ ക്ലീഷെ...
      </div>
    </div>
  </div>
</div>
...

അക്കോഡിയൻ മാർക്ക്അപ്പ് കൂടാതെ നിങ്ങൾക്ക് പ്ലഗിൻ ഉപയോഗിക്കാം. മറ്റൊരു ഘടകത്തിന്റെ വികസിക്കുന്നതും തകരുന്നതും ടോഗിൾ ചെയ്യാൻ ഒരു ബട്ടൺ ഉണ്ടാക്കുക.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  ലളിതമായ collapsible
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

ഉപയോഗം

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി

data-toggle="collapse"ഒരു data-targetപൊളിക്കാവുന്ന ഘടകത്തിന്റെ നിയന്ത്രണം സ്വയമേവ നിയോഗിക്കുന്നതിന് എലമെന്റിലേക്ക് ചേർക്കുകയും ചേർക്കുകയും ചെയ്യുക. data-targetസങ്കോചം പ്രയോഗിക്കാൻ ആട്രിബ്യൂട്ട് ഒരു css സെലക്ടറെ സ്വീകരിക്കുന്നു . collapseപൊളിക്കാവുന്ന ഘടകത്തിലേക്ക് ക്ലാസ് ചേർക്കുന്നത് ഉറപ്പാക്കുക . ഇത് സ്ഥിരസ്ഥിതിയായി തുറക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, അധിക ക്ലാസ് ചേർക്കുക in.

ഒരു പൊളിക്കാവുന്ന നിയന്ത്രണത്തിലേക്ക് അക്കോഡിയൻ പോലുള്ള ഗ്രൂപ്പ് മാനേജ്മെന്റ് ചേർക്കാൻ, ഡാറ്റ ആട്രിബ്യൂട്ട് ചേർക്കുക data-parent="#selector". ഇത് പ്രവർത്തനക്ഷമമായി കാണുന്നതിന് ഡെമോ കാണുക.

JavaScript വഴി

ഇതുപയോഗിച്ച് സ്വമേധയാ പ്രവർത്തനക്ഷമമാക്കുക:

$ ( ".തകർച്ച" ). തകരുക ()

ഓപ്ഷനുകൾ

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴിയോ JavaScript വഴിയോ ഓപ്ഷനുകൾ കൈമാറാൻ കഴിയും. data-ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്കായി, എന്നതിലെന്നപോലെ ഓപ്ഷന്റെ പേര് ചേർക്കുക data-parent="".

രീതികൾ

.collapse(ഓപ്ഷനുകൾ)

തകർക്കാവുന്ന ഘടകമായി നിങ്ങളുടെ ഉള്ളടക്കം സജീവമാക്കുന്നു. ഒരു ഓപ്ഷണൽ ഓപ്ഷനുകൾ സ്വീകരിക്കുന്നു object.

$ ( '#myCollapsible' ). തകരുക ({
  ടോഗിൾ : തെറ്റ് 
})

.collapse('ടോഗിൾ')

കാണിക്കുന്നതോ മറച്ചതോ ആയ ഒരു പൊളിക്കാവുന്ന ഘടകം ടോഗിൾ ചെയ്യുന്നു.

.collapse('ഷോ')

തകർക്കാവുന്ന ഒരു ഘടകം കാണിക്കുന്നു.

.collapse('മറയ്ക്കുക')

പൊളിക്കാവുന്ന ഘടകം മറയ്ക്കുന്നു.

സംഭവങ്ങൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ തകർച്ച ക്ലാസ്, തകർച്ച പ്രവർത്തനത്തിലേക്ക് ഹുക്ക് ചെയ്യുന്നതിനുള്ള ചില ഇവന്റുകൾ തുറന്നുകാട്ടുന്നു.

$ ( '#myCollapsible' ). ഓൺ ( 'മറഞ്ഞിരിക്കുന്നു' , പ്രവർത്തനം () {   
  // എന്തെങ്കിലും ചെയ്യൂ…
})

ഉദാഹരണം കറൗസൽ

താഴെയുള്ള സ്ലൈഡ്‌ഷോ ഒരു കറൗസൽ പോലുള്ള ഘടകങ്ങളിലൂടെ സൈക്ലിംഗ് ചെയ്യുന്നതിനുള്ള ഒരു പൊതു പ്ലഗിനും ഘടകവും കാണിക്കുന്നു.

ആദ്യ ലഘുചിത്ര ലേബൽ

ക്രാസ് ജസ്റ്റോ ഒഡിയോ, ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ, എഗെസ്റ്റാസ് എഗെറ്റ് ക്വാം. ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്. Nullam id dolor id nibh ultricies vehicula ut id elit.

രണ്ടാമത്തെ ലഘുചിത്ര ലേബൽ

ക്രാസ് ജസ്റ്റോ ഒഡിയോ, ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ, എഗെസ്റ്റാസ് എഗെറ്റ് ക്വാം. ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്. Nullam id dolor id nibh ultricies vehicula ut id elit.

മൂന്നാമത്തെ ലഘുചിത്ര ലേബൽ

ക്രാസ് ജസ്റ്റോ ഒഡിയോ, ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ, എഗെസ്റ്റാസ് എഗെറ്റ് ക്വാം. ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "carousel slide" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- കറൗസൽ ഇനങ്ങൾ -->
  <div class = "carousel-inner" > 
    <div class = "സജീവ ഇനം" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

ഉപയോഗം

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി

കറൗസലിന്റെ സ്ഥാനം എളുപ്പത്തിൽ നിയന്ത്രിക്കാൻ ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുക. data-slideകീവേഡുകൾ സ്വീകരിക്കുന്നു prevഅല്ലെങ്കിൽ next, സ്ലൈഡിന്റെ നിലവിലെ സ്ഥാനവുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ അത് മാറ്റുന്നു. പകരമായി, data-slide-toകറൗസലിലേക്ക് ഒരു റോ സ്ലൈഡ് സൂചിക കൈമാറാൻ ഉപയോഗിക്കുക data-slide-to="2", അത് സ്ലൈഡ് പൊസിഷനിൽ നിന്ന് ആരംഭിക്കുന്ന ഒരു പ്രത്യേക സൂചികയിലേക്ക് കുതിക്കുന്നു 0.

JavaScript വഴി

ഇതുപയോഗിച്ച് കരൗസലിനെ നേരിട്ട് വിളിക്കുക:

$ ( '.carousel' ). കറൗസൽ ()

ഓപ്ഷനുകൾ

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ അല്ലെങ്കിൽ JavaScriptz വഴി ഓപ്ഷനുകൾ കൈമാറാൻ കഴിയും. data-ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്കായി, എന്നതിലെന്നപോലെ ഓപ്ഷന്റെ പേര് ചേർക്കുക data-interval="".

രീതികൾ

.carousel(ഓപ്ഷനുകൾ)

ഒരു ഓപ്‌ഷണൽ ഓപ്ഷനുകൾ ഉപയോഗിച്ച് കറൗസൽ objectആരംഭിക്കുകയും ഇനങ്ങളിലൂടെ സൈക്ലിംഗ് ആരംഭിക്കുകയും ചെയ്യുന്നു.

$ ( '.carousel' ). കറൗസൽ ({
  ഇടവേള : 2000 
})

.കറൗസൽ('സൈക്കിൾ')

കറൗസൽ ഇനങ്ങളിലൂടെ ഇടത്തുനിന്ന് വലത്തോട്ട് സൈക്കിളുകൾ.

.കറൗസൽ('താൽക്കാലികമായി നിർത്തുക')

ഇനങ്ങളിലൂടെ സൈക്കിൾ ചവിട്ടുന്നതിൽ നിന്ന് കറൗസലിനെ തടയുന്നു.

.കറൗസൽ(നമ്പർ)

ഒരു പ്രത്യേക ഫ്രെയിമിലേക്ക് കറൗസൽ സൈക്കിൾ ചെയ്യുന്നു (0 അടിസ്ഥാനമാക്കി, ഒരു അറേയ്ക്ക് സമാനമാണ്).

.കറൗസൽ('മുൻ')

മുമ്പത്തെ ഇനത്തിലേക്കുള്ള സൈക്കിളുകൾ.

.carousel('അടുത്തത്')

അടുത്ത ഇനത്തിലേക്കുള്ള സൈക്കിളുകൾ.

സംഭവങ്ങൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ കറൗസൽ ക്ലാസ് കറൗസൽ പ്രവർത്തനത്തിലേക്ക് ഹുക്ക് ചെയ്യുന്നതിനായി രണ്ട് ഇവന്റുകൾ തുറന്നുകാട്ടുന്നു.

ഉദാഹരണം

ഏത് ഫോം ടെക്‌സ്‌റ്റ് ഇൻപുട്ടും ഉപയോഗിച്ച് മനോഹരമായ ടൈപ്പ്ഹെഡുകൾ വേഗത്തിൽ സൃഷ്‌ടിക്കുന്നതിനുള്ള അടിസ്ഥാനപരവും എളുപ്പത്തിൽ വിപുലീകൃതവുമായ പ്ലഗിൻ.

<ഇൻപുട്ട് തരം = "ടെക്സ്റ്റ്" data-provide = "typeahead" >  

autocomplete="off"ബൂട്ട്‌സ്‌ട്രാപ്പ് ടൈപ്പ്‌ഹെഡ് ഡ്രോപ്പ്‌ഡൗണിൽ ഡിഫോൾട്ട് ബ്രൗസർ മെനുകൾ ദൃശ്യമാകുന്നത് തടയാൻ നിങ്ങൾ സജ്ജീകരിക്കണം .

ഉപയോഗം

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി

മുകളിലെ ഉദാഹരണത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ ടൈപ്പ്ഹെഡ് പ്രവർത്തനക്ഷമതയുള്ള ഒരു ഘടകം രജിസ്റ്റർ ചെയ്യാൻ ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ ചേർക്കുക.

JavaScript വഴി

ഇതുപയോഗിച്ച് ടൈപ്പ്ഹെഡ് സ്വമേധയാ വിളിക്കുക:

$ ( '.typeahead' ). ടൈപ്പ്ഹെഡ് ()

ഓപ്ഷനുകൾ

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴിയോ JavaScript വഴിയോ ഓപ്ഷനുകൾ കൈമാറാൻ കഴിയും. data-ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്കായി, എന്നതിലെന്നപോലെ ഓപ്ഷന്റെ പേര് ചേർക്കുക data-source="".

രീതികൾ

.typeahead(ഓപ്ഷനുകൾ)

ഒരു ടൈപ്പ്ഹെഡ് ഉപയോഗിച്ച് ഒരു ഇൻപുട്ട് ആരംഭിക്കുന്നു.

ഉദാഹരണം

ഇടതുവശത്തുള്ള ഉപനാവിഗേഷൻ അഫിക്സ് പ്ലഗിന്റെ ഒരു തത്സമയ ഡെമോയാണ്.

ഉപയോഗം

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി

ഏത് ഘടകത്തിലേക്കും അഫിക്സ് സ്വഭാവം എളുപ്പത്തിൽ ചേർക്കാൻ, data-spy="affix"നിങ്ങൾ ചാരപ്പണി ചെയ്യാൻ ആഗ്രഹിക്കുന്ന ഘടകത്തിലേക്ക് ചേർക്കുക. ഒരു മൂലകത്തിന്റെ പിൻ ചെയ്യൽ എപ്പോൾ ടോഗിൾ ചെയ്യണമെന്നും ഓഫാക്കണമെന്നും നിർവ്വചിക്കാൻ ഓഫ്‌സെറ്റുകൾ ഉപയോഗിക്കുക.

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

JavaScript വഴി

JavaScript വഴി അഫിക്സ് പ്ലഗിനിലേക്ക് വിളിക്കുക:

$ ( '#navbar' ). ഘടിപ്പിക്കുക ()

ഓപ്ഷനുകൾ

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴിയോ JavaScript വഴിയോ ഓപ്ഷനുകൾ കൈമാറാൻ കഴിയും. data-ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്കായി, എന്നതിലെന്നപോലെ ഓപ്ഷന്റെ പേര് ചേർക്കുക data-offset-top="200".