ജാവാസ്ക്രിപ്റ്റ്

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഘടകങ്ങൾ ജീവസുറ്റതാക്കുക-ഇപ്പോൾ 13 ഇഷ്‌ടാനുസൃത jQuery പ്ലഗിനുകൾക്കൊപ്പം.

ഹെഡ്സ് അപ്പുകൾ! ഈ ഡോക്‌സ് v2.3.2-നുള്ളതാണ്, അത് ഇനി ഔദ്യോഗികമായി പിന്തുണയ്‌ക്കില്ല. ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഏറ്റവും പുതിയ പതിപ്പ് പരിശോധിക്കുക!

വ്യക്തിഗതമോ സമാഹരിച്ചതോ

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

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

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

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

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

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

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

പ്രോഗ്രാം API

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

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

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

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

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

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

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

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

ഇവന്റുകൾ

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

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

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

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

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

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

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

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

ഉദാഹരണങ്ങൾ

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

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

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

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </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>

ലൈവ് ഡെമോ

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

  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. <button type = "button" class = "close" data-dismiss = "modal" 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. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > അടയ്ക്കുക </button>
  15. <button class = "btn btn-primary" > മാറ്റങ്ങൾ സംരക്ഷിക്കുക </button>
  16. </div>
  17. </div>

ഉപയോഗം

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

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

  1. <button type = "button" data-toggle = "modal " data-target = "#myModal" > ലോഞ്ച് മോഡൽ </button>

JavaScript വഴി

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

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

ഓപ്ഷനുകൾ

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

പേര് തരം സ്ഥിരസ്ഥിതി വിവരണം
പശ്ചാത്തലം ബൂളിയൻ സത്യം ഒരു മോഡൽ-ബാക്ക്‌ഡ്രോപ്പ് ഘടകം ഉൾപ്പെടുന്നു. പകരമായി, staticക്ലിക്കിൽ മോഡൽ അടയ്‌ക്കാത്ത ഒരു ബാക്ക്‌ഡ്രോപ്പിനായി വ്യക്തമാക്കുക.
കീബോർഡ് ബൂളിയൻ സത്യം എസ്‌കേപ്പ് കീ അമർത്തുമ്പോൾ മോഡൽ അടയ്‌ക്കുന്നു
കാണിക്കുക ബൂളിയൻ സത്യം ആരംഭിക്കുമ്പോൾ മോഡൽ കാണിക്കുന്നു.
റിമോട്ട് പാത തെറ്റായ

ഒരു വിദൂര url നൽകിയിട്ടുണ്ടെങ്കിൽ, jQuery-ന്റെ loadരീതി വഴി ഉള്ളടക്കം ലോഡുചെയ്യുകയും എന്നതിലേക്ക് കുത്തിവയ്ക്കുകയും ചെയ്യും .modal-body. നിങ്ങൾ ഡാറ്റ എപിഐയാണ് ഉപയോഗിക്കുന്നതെങ്കിൽ, hrefറിമോട്ട് ഉറവിടം വ്യക്തമാക്കാൻ നിങ്ങൾക്ക് ടാഗ് ഉപയോഗിക്കാം. ഇതിന്റെ ഒരു ഉദാഹരണം താഴെ കാണിച്ചിരിക്കുന്നു:

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

രീതികൾ

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

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

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

.modal('ടോഗിൾ')

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

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

.modal('ഷോ')

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

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

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

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

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

ഇവന്റുകൾ

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

സംഭവം വിവരണം
കാണിക്കുക showഇൻസ്‌റ്റൻസ് മെത്തേഡ് എന്ന് വിളിക്കുമ്പോൾ ഈ സംഭവം ഉടനടി തീപിടിക്കുന്നു .
കാണിച്ചിരിക്കുന്നു മോഡൽ ഉപയോക്താവിന് ദൃശ്യമാക്കുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (css സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
മറയ്ക്കുക hideഇൻസ്‌റ്റൻസ് മെത്തേഡ് വിളിച്ചാൽ ഉടൻ തന്നെ ഈ ഇവന്റ് ഫയർ ചെയ്യപ്പെടും.
മറഞ്ഞിരിക്കുന്നു മോഡൽ ഉപയോക്താവിൽ നിന്ന് മറയ്ക്കുന്നത് പൂർത്തിയാകുമ്പോൾ ഈ ഇവന്റ് ആരംഭിക്കുന്നു (css സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
  1. $ ( '#myModal' ). ഓൺ ( 'മറഞ്ഞിരിക്കുന്നു' , പ്രവർത്തനം () {
  2. // എന്തെങ്കിലും ചെയ്യൂ…
  3. })

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

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

@കൊഴുപ്പ്

പരസ്യ ലെഗ്ഗിംഗ്‌സ് കീറ്റാർ, ബ്രഞ്ച് ഐഡി ആർട്ട് പാർട്ടി ഡോളോർ ലേബർ. പിച്ച്ഫോർക്ക് yr enim lo-fi അവർ qui വിറ്റുതീരുന്നതിന് മുമ്പ്. Tumblr ഫാം-ടു-ടേബിൾ സൈക്കിൾ അവകാശം എന്തായാലും. അനിം കെഫിയേ കാർലെസ് കാർഡിഗൻ. Velit seitan mcsweeney's ഫോട്ടോ ബൂത്ത് 3 wolf moon irure. കോസ്ബി സ്വെറ്റർ ലോമോ ജീൻ ഷോർട്ട്‌സ്, വില്ല്യംസ്ബർഗ് ഹൂഡി മിനിം ക്വി നിങ്ങൾ അവയെക്കുറിച്ച് കേട്ടിട്ടുണ്ടാകില്ല, കാർഡിഗൻ ട്രസ്റ്റ് ഫണ്ട് കുൽപ ബയോഡീസൽ വെസ് ആൻഡേഴ്സൺ സൗന്ദര്യാത്മകത. നിഹിൽ ടാറ്റൂ ചെയ്ത ആക്സാമസ്, ക്രെഡ് ഐറണി ബയോഡീസൽ കെഫിയെ ആർട്ടിസൻ ഉള്ളാംകോ അനന്തരഫലം.

@mdo

വെനിയം മാർഫ മീശ സ്കേറ്റ്ബോർഡ്, അഡിപിസിസിംഗ് ഫ്യൂജിയാറ്റ് വെലിറ്റ് പിച്ച്ഫോർക്ക് താടി. ഫ്രീഗാൻ താടി അലിക്വ കുപ്പിഡാറ്ററ്റ് മക്‌സ്വീനിയുടെ വെറോ. ക്യുപ്പിഡാറ്റ് ഫോർ ലോക്കോ നിസി, ഇഎ ഹെൽവെറ്റിക്ക നുള്ള കാർലെസ്. ടാറ്റൂ ചെയ്ത കോസ്ബി സ്വെറ്റർ ഫുഡ് ട്രക്ക്, mcsweeney's quis non freegan vinyl. ലോ-ഫൈ വെസ് ആൻഡേഴ്സൺ +1 സാർട്ടോറിയൽ. കാർലെസ് നോൺ-സൗന്ദര്യ വ്യായാമം ക്വിസ് ജെൻട്രിഫൈ ചെയ്യുന്നു. ബ്രൂക്ക്ലിൻ അഡിപിസിസിംഗ് ക്രാഫ്റ്റ് ബിയർ വൈസ് കീറ്റാർ ഡിസറന്റ്.

ഒന്ന്

ഒക്കേകാറ്റ് കമോഡോ അലിക്വ ഡെലെക്റ്റസ്. ഫാപ് ക്രാഫ്റ്റ് ബിയർ ഡിസറന്റ് സ്കേറ്റ്ബോർഡ് ഇഎ. ലോമോ സൈക്കിൾ അവകാശങ്ങൾ adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in Magna veniam. ഹൈ ലൈഫ് ഐഡി വിനൈൽ, എക്കോ പാർക്ക് കൺസെക്വാറ്റ് ക്വിസ് അലിക്വിപ് ബാൻ മൈ പിച്ച്ഫോർക്ക്. വെറോ വിഎച്ച്എസ് എടിപിസിസിംഗ് ആണ്. Consectetur nisi 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.

Keytar Twee ബ്ലോഗ്, culpa messenger bag marfa എന്തായാലും delectus food truck. Sapiente synth id assumenda. ലൊകാവോർ സെഡ് ഹെൽവെറ്റിക്ക ക്ലീഷെ ഐറണി, ഇടിമുഴക്കങ്ങൾ, ഹൂഡി ഗ്ലൂറ്റൻ-ഫ്രീ ലോ-ഫൈ ഫാപ് അലിക്വിപ്പിനെ കുറിച്ച് നിങ്ങൾ കേട്ടിട്ടുണ്ടാകില്ല. ലേബർ എലിറ്റ് പ്ലേസാറ്റ് അവർ വിറ്റുതീരുന്നതിന് മുമ്പായി, ടെറി റിച്ചാർഡ്സൺ പ്രൊഡന്റ് ബ്രഞ്ച് നെസ്സിയന്റ് ക്വിസ് കോസ്ബി സ്വെറ്റർ പരിയാതുർ കെഫിയെ അറ്റ് ഹെൽവെറ്റിക്ക ആർട്ടിസാൻ. കാർഡിഗൻ ക്രാഫ്റ്റ് ബിയർ സെറ്റാൻ റെഡിമെയ്ഡ് വെലിറ്റ്. വിഎച്ച്എസ് ചേംബ്രേ ലബോറീസ് ടെമ്പർ വേനിയം. അനിം മോളിറ്റ് മിനിം കമോഡോ ഉള്ളംകോ ഇടിമുഴക്കം.


ഉപയോഗം

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

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

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

JavaScript വഴി

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

  1. $ ( '#navbar' ). സ്ക്രോൾസ്പി ()
ഹെഡ്സ് അപ്പുകൾ! നവബാർ ലിങ്കുകൾക്ക് പരിഹരിക്കാവുന്ന ഐഡി ടാർഗെറ്റുകൾ ഉണ്ടായിരിക്കണം. ഉദാഹരണത്തിന്, ഒരു <a href="#home">home</a>ഡോമിലെ എന്തെങ്കിലും പോലെ ആയിരിക്കണം <div id="home"></div>.

രീതികൾ

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

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

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

ഓപ്ഷനുകൾ

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

പേര് തരം സ്ഥിരസ്ഥിതി വിവരണം
ഓഫ്സെറ്റ് നമ്പർ 10 സ്ക്രോളിന്റെ സ്ഥാനം കണക്കാക്കുമ്പോൾ മുകളിൽ നിന്ന് ഓഫ്സെറ്റ് ചെയ്യേണ്ട പിക്സലുകൾ.

ഇവന്റുകൾ

സംഭവം വിവരണം
സജീവമാക്കുക സ്ക്രോൾസ്പി ഒരു പുതിയ ഇനം സജീവമാക്കുമ്പോഴെല്ലാം ഈ ഇവന്റ് ഫയർ ചെയ്യുന്നു.

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

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

അസംസ്‌കൃത ഡെനിം, ജീൻ ഷോർട്ട്‌സ് ഓസ്റ്റിനിനെക്കുറിച്ച് നിങ്ങൾ കേട്ടിട്ടുണ്ടാകില്ല. നെസ്സിയന്റ് ടോഫു സ്റ്റംപ്ടൗൺ അലിക്വ, റെട്രോ സിന്ത് മാസ്റ്റർ ക്ലീൻസ്. മീശ ക്ലിച്ചെ ടെമ്പർ, വില്യംസ്ബർഗ് കാർലെസ് വെഗൻ ഹെൽവെറ്റിക്ക. റെപ്രെഹെൻഡറിറ്റ് കശാപ്പ് റെട്രോ കെഫിയെ ഡ്രീംകാച്ചർ സിന്ത്. കോസ്ബി സ്വെറ്റർ eu banh mi, qui irure ടെറി റിച്ചാർഡ്സൺ എക്സ് സ്ക്വിഡ്. സാൽവിയ സിലം ഐഫോൺ പ്ലേസ് ആക്കി. സീതാൻ അലിക്വിപ് ക്വിസ് കാർഡിഗൻ അമേരിക്കൻ വസ്ത്രങ്ങൾ, കശാപ്പ് വോൾപ്‌റ്റേറ്റ് നിസി ക്വി.

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.


ഉപയോഗം

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

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

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

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

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

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

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Home </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > പ്രൊഫൈൽ </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > സന്ദേശങ്ങൾ </a></li>
  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 class = "active" ><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 class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "പ്രൊഫൈൽ" > ... </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:last' ). ടാബ് ( 'കാണിക്കുക' );
  18. })
  19. </script>

ഇവന്റുകൾ

സംഭവം വിവരണം
കാണിക്കുക ഈ ഇവന്റ് ടാബ് ഷോയിൽ പ്രവർത്തിക്കുന്നു, എന്നാൽ പുതിയ ടാബ് കാണിക്കുന്നതിന് മുമ്പ്. യഥാക്രമം സജീവമായ ടാബും മുമ്പത്തെ സജീവമായ ടാബും (ലഭ്യമെങ്കിൽ) ഉപയോഗിക്കുകയും event.targetടാർഗെറ്റുചെയ്യുകയും ചെയ്യുക.event.relatedTarget
കാണിച്ചിരിക്കുന്നു ഒരു ടാബ് കാണിച്ചതിന് ശേഷം ടാബ് ഷോയിൽ ഈ ഇവന്റ് ഫയർ ചെയ്യുന്നു. യഥാക്രമം സജീവമായ ടാബും മുമ്പത്തെ സജീവമായ ടാബും (ലഭ്യമെങ്കിൽ) ഉപയോഗിക്കുകയും event.targetടാർഗെറ്റുചെയ്യുകയും ചെയ്യുക.event.relatedTarget
  1. $ ( 'a[data-toggle="tab"]' ). ഓൺ ( 'കാണിച്ചിരിക്കുന്നു' , ഫംഗ്‌ഷൻ ( ) {
  2. . ടാർഗെറ്റ് // സജീവമാക്കിയ ടാബ്
  3. . ബന്ധപ്പെട്ട ടാർഗെറ്റ് // മുമ്പത്തെ ടാബ്
  4. })

ഉദാഹരണങ്ങൾ

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

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

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

ഇറുകിയ പാന്റ്‌സ് അടുത്ത ലെവൽ keffiyeh നിങ്ങൾ അവയെക്കുറിച്ച് കേട്ടിരിക്കില്ല. ഫോട്ടോ ബൂത്ത് താടി റോ ഡെനിം ലെറ്റർപ്രസ്സ് വെഗൻ മെസഞ്ചർ ബാഗ് സ്റ്റംപ്ടൗൺ. ഫാം-ടു-ടേബിൾ സെയ്റ്റൻ, മക്‌സ്വീനിയുടെ ഫിക്‌സി സുസ്ഥിര ക്വിനോവ 8-ബിറ്റ് അമേരിക്കൻ വസ്ത്രങ്ങൾക്ക് ടെറി റിച്ചാർഡ്‌സൺ വിനൈൽ ചേംബ്രേ ഉണ്ട് . താടി സ്റ്റംപ്ടൗൺ, കാർഡിഗൻസ് ബാൻ മൈ ലോമോ ഇടിമിന്നൽ. ടോഫു ബയോഡീസൽ വില്യംസ്ബർഗ് മാർഫ, ഫോർ ലോക്കോ മക്‌സ്വീനിയുടെ ക്ലീൻസ് വെഗൻ ചേംബ്രേ. ഒരു ശരിക്കും വിരോധാഭാസമായ ആർട്ടിസൻ എന്തായാലും കീറ്റാർ , സീൻസ്റ്റർ ഫാം-ടു-ടേബിൾ ബാങ്ക്സി ഓസ്റ്റിൻ ട്വിറ്റർ ഹാൻഡിൽ ഫ്രീഗാൻ ക്രെഡ് റോ ഡെനിം സിംഗിൾ ഒറിജിൻ കോഫി വൈറൽ.

നാല് ദിശകൾ

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

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


ഉപയോഗം

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

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

ഓപ്ഷനുകൾ

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

പേര് തരം സ്ഥിരസ്ഥിതി വിവരണം
ആനിമേഷൻ ബൂളിയൻ സത്യം ടൂൾടിപ്പിലേക്ക് ഒരു css ഫേഡ് ട്രാൻസിഷൻ പ്രയോഗിക്കുക
html ബൂളിയൻ തെറ്റായ ടൂൾടിപ്പിൽ html ചേർക്കുക. തെറ്റാണെങ്കിൽ, ഡോമിൽ textഉള്ളടക്കം ചേർക്കാൻ jquery യുടെ രീതി ഉപയോഗിക്കും. XSS ആക്രമണങ്ങളെക്കുറിച്ച് നിങ്ങൾക്ക് ആശങ്കയുണ്ടെങ്കിൽ ടെക്സ്റ്റ് ഉപയോഗിക്കുക.
പ്ലേസ്മെന്റ് ചരട് | പ്രവർത്തനം 'മുകളിൽ' ടൂൾടിപ്പ് എങ്ങനെ സ്ഥാപിക്കാം - മുകളിൽ | താഴെ | വിട്ടു | ശരിയാണ്
സെലക്ടർ സ്ട്രിംഗ് തെറ്റായ ഒരു സെലക്ടർ നൽകിയിട്ടുണ്ടെങ്കിൽ, ടൂൾടിപ്പ് ഒബ്ജക്റ്റുകൾ നിർദ്ദിഷ്ട ടാർഗെറ്റുകളിലേക്ക് നിയോഗിക്കും.
തലക്കെട്ട് ചരട് | പ്രവർത്തനം '' `ശീർഷകം` ടാഗ് ഇല്ലെങ്കിൽ സ്ഥിരസ്ഥിതി ശീർഷക മൂല്യം
ട്രിഗർ സ്ട്രിംഗ് 'ഹോവർ ഫോക്കസ്' ടൂൾടിപ്പ് എങ്ങനെയാണ് ട്രിഗർ ചെയ്യുന്നത് - ക്ലിക്ക് | ഹോവർ | ഫോക്കസ് | മാനുവൽ. നിങ്ങളുടെ കേസ് പാസ് ട്രിഗർ മൾട്ടിപ്പിൾ, സ്പേസ് വേർതിരിച്ചത്, ട്രിഗർ തരങ്ങൾ എന്നിവ ശ്രദ്ധിക്കുക.
കാലതാമസം നമ്പർ | വസ്തു 0

ടൂൾടിപ്പ് (എംഎസ്) കാണിക്കുന്നതിനും മറയ്ക്കുന്നതിനും കാലതാമസം - മാനുവൽ ട്രിഗർ തരത്തിന് ബാധകമല്ല

ഒരു നമ്പർ നൽകിയിട്ടുണ്ടെങ്കിൽ, മറയ്ക്കുക/കാണിക്കുക എന്നിവയ്‌ക്ക് കാലതാമസം ബാധകമാകും

വസ്തുവിന്റെ ഘടന ഇതാണ്:delay: { show: 500, hide: 100 }

കണ്ടെയ്നർ ചരട് | തെറ്റായ തെറ്റായ

ഒരു നിർദ്ദിഷ്ട ഘടകത്തിലേക്ക് ടൂൾടിപ്പ് കൂട്ടിച്ചേർക്കുന്നുcontainer: 'body'

ഹെഡ്സ് അപ്പുകൾ! വ്യക്തിഗത ടൂൾടിപ്പുകൾക്കുള്ള ഓപ്ഷനുകൾ ഡാറ്റ ആട്രിബ്യൂട്ടുകളുടെ ഉപയോഗത്തിലൂടെ പകരമായി വ്യക്തമാക്കാം.

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

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

രീതികൾ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ഉദാഹരണങ്ങൾ

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

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

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

പോപോവർ ടോപ്പ്

ലോബോർട്ടിസിൽ സെഡ് പോസ്യുയർ കൺസെക്റ്ററാണ്. എനിയൻ ഇയു ലിയോ ക്വാം. പെല്ലെന്റസ്‌ക്യൂ ഓർനാരെ സെം ലാസിനിയ ക്വാം വെനനാറ്റിസ് വെസ്റ്റിബുലം.

പോപ്പോവർ വലത്

ലോബോർട്ടിസിൽ സെഡ് പോസ്യുയർ കൺസെക്റ്ററാണ്. എനിയൻ ഇയു ലിയോ ക്വാം. പെല്ലെന്റസ്‌ക്യൂ ഓർനാരെ സെം ലാസിനിയ ക്വാം വെനനാറ്റിസ് വെസ്റ്റിബുലം.

പോപോവർ അടിഭാഗം

ലോബോർട്ടിസിൽ സെഡ് പോസ്യുയർ കൺസെക്റ്ററാണ്. എനിയൻ ഇയു ലിയോ ക്വാം. പെല്ലെന്റസ്‌ക്യൂ ഓർനാരെ സെം ലാസിനിയ ക്വാം വെനനാറ്റിസ് വെസ്റ്റിബുലം.

പോപ്പോവർ വിട്ടു

ലോബോർട്ടിസിൽ സെഡ് പോസ്യുയർ കൺസെക്റ്ററാണ്. എനിയൻ ഇയു ലിയോ ക്വാം. പെല്ലെന്റസ്‌ക്യൂ ഓർനാരെ സെം ലാസിനിയ ക്വാം വെനനാറ്റിസ് വെസ്റ്റിബുലം.

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

ലൈവ് ഡെമോ

നാല് ദിശകൾ


ഉപയോഗം

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

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

ഓപ്ഷനുകൾ

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

പേര് തരം സ്ഥിരസ്ഥിതി വിവരണം
ആനിമേഷൻ ബൂളിയൻ സത്യം ടൂൾടിപ്പിലേക്ക് ഒരു css ഫേഡ് ട്രാൻസിഷൻ പ്രയോഗിക്കുക
html ബൂളിയൻ തെറ്റായ പോപോവറിൽ html ചേർക്കുക. തെറ്റാണെങ്കിൽ, ഡോമിൽ textഉള്ളടക്കം ചേർക്കാൻ jquery യുടെ രീതി ഉപയോഗിക്കും. XSS ആക്രമണങ്ങളെക്കുറിച്ച് നിങ്ങൾക്ക് ആശങ്കയുണ്ടെങ്കിൽ ടെക്സ്റ്റ് ഉപയോഗിക്കുക.
പ്ലേസ്മെന്റ് ചരട് | പ്രവർത്തനം 'ശരി' പോപോവർ എങ്ങനെ സ്ഥാപിക്കാം - മുകളിൽ | താഴെ | വിട്ടു | ശരിയാണ്
സെലക്ടർ സ്ട്രിംഗ് തെറ്റായ ഒരു സെലക്ടർ നൽകിയിട്ടുണ്ടെങ്കിൽ, ടൂൾടിപ്പ് ഒബ്ജക്റ്റുകൾ നിർദ്ദിഷ്ട ടാർഗെറ്റുകളിലേക്ക് നിയോഗിക്കും
ട്രിഗർ സ്ട്രിംഗ് 'ക്ലിക്ക്' എങ്ങനെയാണ് പോപോവർ ഉണ്ടാകുന്നത് - ക്ലിക്ക് | ഹോവർ | ഫോക്കസ് | മാനുവൽ
തലക്കെട്ട് ചരട് | പ്രവർത്തനം '' `title` ആട്രിബ്യൂട്ട് ഇല്ലെങ്കിൽ സ്ഥിരസ്ഥിതി ശീർഷക മൂല്യം
ഉള്ളടക്കം ചരട് | പ്രവർത്തനം '' `data-content` ആട്രിബ്യൂട്ട് ഇല്ലെങ്കിൽ ഡിഫോൾട്ട് ഉള്ളടക്ക മൂല്യം
കാലതാമസം നമ്പർ | വസ്തു 0

പോപോവർ (എംഎസ്) കാണിക്കുന്നതിനും മറയ്ക്കുന്നതിനും കാലതാമസം - മാനുവൽ ട്രിഗർ തരത്തിന് ബാധകമല്ല

ഒരു നമ്പർ നൽകിയിട്ടുണ്ടെങ്കിൽ, മറയ്ക്കുക/കാണിക്കുക എന്നിവയ്‌ക്ക് കാലതാമസം ബാധകമാകും

വസ്തുവിന്റെ ഘടന ഇതാണ്:delay: { show: 500, hide: 100 }

കണ്ടെയ്നർ ചരട് | തെറ്റായ തെറ്റായ

ഒരു നിർദ്ദിഷ്ട ഘടകത്തിലേക്ക് പോപോവർ കൂട്ടിച്ചേർക്കുന്നുcontainer: 'body'

ഹെഡ്സ് അപ്പുകൾ!വ്യക്തിഗത പോപ്പോവറുകൾക്കുള്ള ഓപ്ഷനുകൾ ഡാറ്റ ആട്രിബ്യൂട്ടുകളുടെ ഉപയോഗത്തിലൂടെ പകരമായി വ്യക്തമാക്കാം.

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

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

രീതികൾ

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

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

.popover('ഷോ')

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

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

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

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

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

.popover('ടോഗിൾ')

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

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

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

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

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

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

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

വിശുദ്ധ ഗ്വാക്കാമോൾ! സ്വയം പരിശോധിക്കുക, നിങ്ങൾ വളരെ നല്ലതല്ല.

ഓ സ്നാപ്പ്! നിങ്ങൾക്ക് ഒരു പിശക് ലഭിച്ചു!

അതും ഇതും മാറ്റി വീണ്ടും ശ്രമിക്കുക. ഡ്യൂയിസ് മോളിസ്, ഈസ്റ്റ് നോൺ കമോഡോ ലക്റ്റസ്, നിസി എററ്റ് പോർട്ടിറ്റർ ലിഗുല, എഗെറ്റ് ലാസിനിയ ഒഡിയോ സെം നെക് എലിറ്റ്. ക്രാസ് മാറ്റിസ് കൺസെക്റ്റേറ്റർ പുരുസ് സിറ്റ് അമെറ്റ് ഫെർമെന്റം.

ഈ നടപടി സ്വീകരിക്കുക അല്ലെങ്കിൽ ഇത് ചെയ്യുക


ഉപയോഗം

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

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

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

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

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

രീതികൾ

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

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

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

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

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

ഇവന്റുകൾ

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

സംഭവം വിവരണം
അടുത്ത് closeഇൻസ്‌റ്റൻസ് മെത്തേഡ് എന്ന് വിളിക്കുമ്പോൾ ഈ സംഭവം ഉടനടി തീപിടിക്കുന്നു .
അടച്ചു അലേർട്ട് അടയ്‌ക്കുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (css സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
  1. $ ( '#മൈ-അലേർട്ട്' ). ബൈൻഡ് ( 'അടച്ച' , പ്രവർത്തനം () {
  2. // എന്തെങ്കിലും ചെയ്യൂ…
  3. })

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

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

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

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

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

ഒറ്റ ടോഗിൾ

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

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

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

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

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

റേഡിയോ

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

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

ഉപയോഗം

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

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

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

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

ഓപ്ഷനുകൾ

ഒന്നുമില്ല

രീതികൾ

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

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

ഹെഡ്സ് അപ്പുകൾ! data-toggleആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഒരു ബട്ടണിന്റെ സ്വയമേവ ടോഗിൾ ചെയ്യുന്നത് പ്രവർത്തനക്ഷമമാക്കാം .
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

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

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

  1. <button type = "button" class = "btn" data-loading-text = "ലോഡിംഗ് സ്റ്റഫ്..." > ... </button>
ഹെഡ്സ് അപ്പുകൾ! പേജ് ലോഡുകളിലുടനീളം ഫയർഫോക്സ് പ്രവർത്തനരഹിതമാക്കിയ അവസ്ഥ തുടരുന്നു . ഇതിനുള്ള ഒരു പരിഹാരമാർഗ്ഗം ഉപയോഗിക്കുക എന്നതാണ് autocomplete="off".

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

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

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

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

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

കുറിച്ച്

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

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

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

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

അനിം പരിയാതുർ ക്ലീഷെ റിപ്രെഹെൻഡറിറ്റ്, എനിം ഐയുസ്‌മോഡ് ഹൈ ലൈഫ് അക്‌സാമസ് ടെറി റിച്ചാർഡ്‌സൺ ആഡ് സ്ക്വിഡ്. 3 വുൾഫ് മൂൺ ഒഫീഷ്യ ഓട്ട്, നോൺ കുപിഡാറ്ററ്റ് സ്കേറ്റ്ബോർഡ് ഡോളർ ബ്രഞ്ച്. ഫുഡ് ട്രക്ക് quinoa nesciunt labour eiusmod. ബ്രഞ്ച് 3 വുൾഫ് മൂൺ ടെമ്പർ, സൺറ്റ് അലിക്വ അതിൽ ഒരു പക്ഷിയെ ഇട്ടു കണവ സിംഗിൾ ഒറിജിൻ കോഫി നുള്ള അസ്സുമെൻഡ ഷോർഡിച്ച് എറ്റ്. നിഹിൽ ആനിം കെഫിയെ ഹെൽവെറ്റിക്ക, ക്രാഫ്റ്റ് ബിയർ ലേബർ വെസ് ആൻഡേഴ്സൺ ക്രെഡ് നെസ്സിയന്റ് സാപിയന്റ് ഇഎ പ്രൊഡന്റ്. പരസ്യ സസ്യാഹാരം ഒഴിവാക്കുന്ന കശാപ്പ് വൈസ് ലോമോ. ലെഗ്ഗിംഗ്‌സ് ഒക്കേകാറ്റ് ക്രാഫ്റ്റ് ബിയർ ഫാം-ടു-ടേബിൾ, റോ ഡെനിം സൗന്ദര്യാത്മക സിന്ത് നെസ്‌സിയന്റ് നിങ്ങൾ അവയെക്കുറിച്ച് കേട��ടിരിക്കാനിടയില്ല.
അനിം പരിയാതുർ ക്ലീഷെ റിപ്രെഹെൻഡറിറ്റ്, എനിം ഐയുസ്‌മോഡ് ഹൈ ലൈഫ് അക്‌സാമസ് ടെറി റിച്ചാർഡ്‌സൺ ആഡ് സ്ക്വിഡ്. 3 വുൾഫ് മൂൺ ഒഫീഷ്യ ഓട്ട്, നോൺ കുപിഡാറ്ററ്റ് സ്കേറ്റ്ബോർഡ് ഡോളർ ബ്രഞ്ച്. ഫുഡ് ട്രക്ക് quinoa nesciunt labour eiusmod. ബ്രഞ്ച് 3 വുൾഫ് മൂൺ ടെമ്പർ, സൺറ്റ് അലിക്വ അതിൽ ഒരു പക്ഷിയെ ഇട്ടു കണവ സിംഗിൾ ഒറിജിൻ കോഫി നുള്ള അസ്സുമെൻഡ ഷോർഡിച്ച് എറ്റ്. നിഹിൽ ആനിം കെഫിയെ ഹെൽവെറ്റിക്ക, ക്രാഫ്റ്റ് ബിയർ ലേബർ വെസ് ആൻഡേഴ്സൺ ക്രെഡ് നെസ്സിയന്റ് സാപിയന്റ് ഇഎ പ്രൊഡന്റ്. പരസ്യ സസ്യാഹാരം ഒഴിവാക്കുന്ന കശാപ്പ് വൈസ് ലോമോ. ലെഗ്ഗിംഗ്‌സ് ഒക്കേകാറ്റ് ക്രാഫ്റ്റ് ബിയർ ഫാം-ടു-ടേബിൾ, റോ ഡെനിം സൗന്ദര്യാത്മക സിന്ത് നെസ്‌സിയന്റ് നിങ്ങൾ അവയെക്കുറിച്ച് കേട്ടിരിക്കാനിടയില്ല.
അനിം പരിയാതുർ ക്ലീഷെ റിപ്രെഹെൻഡറിറ്റ്, എനിം ഐയുസ്‌മോഡ് ഹൈ ലൈഫ് അക്‌സാമസ് ടെറി റിച്ചാർഡ്‌സൺ ആഡ് സ്ക്വിഡ്. 3 വുൾഫ് മൂൺ ഒഫീഷ്യ ഓട്ട്, നോൺ കുപിഡാറ്ററ്റ് സ്കേറ്റ്ബോർഡ് ഡോളർ ബ്രഞ്ച്. ഫുഡ് ട്രക്ക് quinoa nesciunt labour eiusmod. ബ്രഞ്ച് 3 വുൾഫ് മൂൺ ടെമ്പർ, സൺറ്റ് അലിക്വ അതിൽ ഒരു പക്ഷിയെ ഇട്ടു കണവ സിംഗിൾ ഒറിജിൻ കോഫി നുള്ള അസ്സുമെൻഡ ഷോർഡിച്ച് എറ്റ്. നിഹിൽ ആനിം കെഫിയെ ഹെൽവെറ്റിക്ക, ക്രാഫ്റ്റ് ബിയർ ലേബർ വെസ് ആൻഡേഴ്സൺ ക്രെഡ് നെസ്സിയന്റ് സാപിയന്റ് ഇഎ പ്രൊഡന്റ്. പരസ്യ സസ്യാഹാരം ഒഴിവാക്കുന്ന കശാപ്പ് വൈസ് ലോമോ. ലെഗ്ഗിംഗ്‌സ് ഒക്കേകാറ്റ് ക്രാഫ്റ്റ് ബിയർ ഫാം-ടു-ടേബിൾ, റോ ഡെനിം സൗന്ദര്യാത്മക സിന്ത് നെസ്‌സിയന്റ് നിങ്ങൾ അവയെക്കുറിച്ച് കേട്ടിരിക്കാനിടയില്ല.
  1. <div class = "accordion" id = "accordion2" >
  2. <div class = "accordion-group" >
  3. <div class = "accordion-heading" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. ചുരുക്കാവുന്ന ഗ്രൂപ്പ് ഇനം #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "accordion-bodyfold in" >
  9. <div class = "accordion-inner" >
  10. അനിം പരിയാതുർ ക്ലീഷെ...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "accordion-group" >
  15. <div class = "accordion-heading" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. ചുരുക്കാവുന്ന ഗ്രൂപ്പ് ഇനം #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "accordion-bodyfold" >
  21. <div class = "accordion-inner" >
  22. അനിം പരിയാതുർ ക്ലീഷെ...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

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

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

ഉപയോഗം

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

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

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

JavaScript വഴി

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

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

ഓപ്ഷനുകൾ

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

പേര് തരം സ്ഥിരസ്ഥിതി വിവരണം
രക്ഷിതാവ് സെലക്ടർ തെറ്റായ സെലക്ടർ ആണെങ്കിൽ, ഈ പൊളിക്കാവുന്ന ഇനം കാണിക്കുമ്പോൾ, നിർദ്ദിഷ്‌ട പാരന്റിനു കീഴിലുള്ള എല്ലാ പൊളിക്കാവുന്ന ഘടകങ്ങളും അടയ്‌ക്കും. (പരമ്പരാഗത അക്രോഡിയൻ സ്വഭാവത്തിന് സമാനം)
ടോഗിൾ ചെയ്യുക ബൂളിയൻ സത്യം അഭ്യർത്ഥനയിൽ തകർക്കാവുന്ന ഘടകം ടോഗിൾ ചെയ്യുന്നു

രീതികൾ

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

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

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

.collapse('ടോഗിൾ')

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

.collapse('ഷോ')

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

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

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

ഇവന്റുകൾ

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

സംഭവം വിവരണം
കാണിക്കുക showഇൻസ്‌റ്റൻസ് മെത്തേഡ് എന്ന് വിളിക്കുമ്പോൾ ഈ സംഭവം ഉടനടി തീപിടിക്കുന്നു .
കാണിച്ചിരിക്കുന്നു ഒരു തകർച്ച ഘടകം ഉപയോക്താവിന് ദൃശ്യമാകുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (css സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
മറയ്ക്കുക hideരീതി വിളിച്ചപ്പോൾ ഈ സംഭവം ഉടനടി വെടിവയ്ക്കുന്നു .
മറഞ്ഞിരിക്കുന്നു ഉപയോക്താവിൽ നിന്ന് ഒരു തകർച്ച ഘടകം മറച്ചിരിക്കുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (css സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
  1. $ ( '#myCollapsible' ). ഓൺ ( 'മറഞ്ഞിരിക്കുന്നു' , പ്രവർത്തനം () {
  2. // എന്തെങ്കിലും ചെയ്യൂ…
  3. })

ഉദാഹരണം

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

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

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


ഉപയോഗം

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

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

JavaScript വഴി

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

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

ഓപ്ഷനുകൾ

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

പേര് തരം സ്ഥിരസ്ഥിതി വിവരണം
ഉറവിടം അറേ, ഫംഗ്ഷൻ [ ] ചോദ്യം ചെയ്യാനുള്ള ഡാറ്റ ഉറവിടം. സ്ട്രിംഗുകളുടെ ഒരു നിരയോ ഫംഗ്‌ഷനോ ആകാം. ഫംഗ്‌ഷൻ രണ്ട് ആർഗ്യുമെന്റുകൾ queryനൽകുന്നു, ഇൻപുട്ട് ഫീൽഡിലെ മൂല്യവും processകോൾബാക്കും. processകോൾബാക്കിന്റെ സിംഗിൾ ആർഗ്യുമെന്റ് വഴി നേരിട്ടോ അസമന്വിതമായോ ഡാറ്റാ ഉറവിടം തിരികെ നൽകിക്കൊണ്ട് ഫംഗ്ഷൻ സിൻക്രണസ് ആയി ഉപയോഗിക്കാം .
ഇനങ്ങൾ നമ്പർ 8 ഡ്രോപ്പ്ഡൗണിൽ പ്രദർശിപ്പിക്കേണ്ട പരമാവധി എണ്ണം ഇനങ്ങൾ.
മിനിമം നീളം നമ്പർ 1 സ്വയമേവ പൂർത്തിയാക്കൽ നിർദ്ദേശങ്ങൾ ട്രിഗർ ചെയ്യുന്നതിന് മുമ്പ് ആവശ്യമായ ഏറ്റവും കുറഞ്ഞ പ്രതീക ദൈർഘ്യം
മാച്ചർ പ്രവർത്തനം കേസ് സെൻസിറ്റീവ് ഒരു ചോദ്യം ഒരു ഇനവുമായി പൊരുത്തപ്പെടുന്നുണ്ടോ എന്ന് നിർണ്ണയിക്കാൻ ഉപയോഗിക്കുന്ന രീതി. itemചോദ്യം പരീക്ഷിക്കുന്നതിന് എതിരായ ഒരൊറ്റ വാദം അംഗീകരിക്കുന്നു . ഉപയോഗിച്ച് നിലവിലെ ചോദ്യം ആക്സസ് ചെയ്യുക this.query. trueചോദ്യം പൊരുത്തം ആണെങ്കിൽ ഒരു ബൂലിയൻ തിരികെ നൽകുക .
സോർട്ടർ പ്രവർത്തനം കൃത്യമായ പൊരുത്തം,
കേസ് സെൻസിറ്റീവ്, കേസ്
സെൻസിറ്റീവ്
യാന്ത്രിക പൂർത്തീകരണ ഫലങ്ങൾ അടുക്കാൻ ഉപയോഗിക്കുന്ന രീതി. ഒരൊറ്റ ആർഗ്യുമെന്റ് itemsഅംഗീകരിക്കുന്നു കൂടാതെ ടൈപ്പ്ഹെഡ് ഉദാഹരണത്തിന്റെ വ്യാപ്തിയും ഉണ്ട്. ഉപയോഗിച്ച് നിലവിലെ ചോദ്യം റഫറൻസ് ചെയ്യുക this.query.
അപ്ഡേറ്റർ പ്രവർത്തനം തിരഞ്ഞെടുത്ത ഇനം തിരികെ നൽകുന്നു തിരഞ്ഞെടുത്ത ഇനം തിരികെ നൽകാൻ ഉപയോഗിക്കുന്ന രീതി. ഒരൊറ്റ ആർഗ്യുമെന്റ് itemഅംഗീകരിക്കുന്നു, ടൈപ്പ്ഹെഡ് ഉദാഹരണത്തിന്റെ വ്യാപ്തിയും ഉണ്ട്.
ഹൈലൈറ്റർ പ്രവർത്തനം എല്ലാ ഡിഫോൾട്ട് പൊരുത്തങ്ങളും ഹൈലൈറ്റ് ചെയ്യുന്നു യാന്ത്രിക പൂർത്തീകരണ ഫലങ്ങൾ ഹൈലൈറ്റ് ചെയ്യാൻ ഉപയോഗിക്കുന്ന രീതി. ഒരൊറ്റ ആർഗ്യുമെന്റ് itemഅംഗീകരിക്കുന്നു കൂടാതെ ടൈപ്പ്ഹെഡ് ഉദാഹരണത്തിന്റെ വ്യാപ്തിയും ഉണ്ട്. html തിരികെ നൽകണം.

രീതികൾ

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

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

ഉദാഹരണം

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


ഉപയോഗം

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

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

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
ഹെഡ്സ് അപ്പുകൾ! പിൻ ചെയ്‌ത മൂലകത്തിന്റെ സ്ഥാനവും അതിന്റെ ഉടനടി രക്ഷിതാവിന്റെ പെരുമാറ്റവും നിങ്ങൾ മാനേജ് ചെയ്യണം. സ്ഥാനം നിയന്ത്രിക്കുന്നത് affix, affix-top, കൂടാതെ affix-bottom. പേജിന്റെ സാധാരണ ഫ്ലോയിൽ നിന്ന് ഉള്ളടക്കം നീക്കം ചെയ്യുന്നതിനാൽ, അഫിക്സ് ആരംഭിക്കുമ്പോൾ, തകരാൻ സാധ്യതയുള്ള രക്ഷിതാവിനെ പരിശോധിക്കാൻ ഓർക്കുക.

JavaScript വഴി

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

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

ഓപ്ഷനുകൾ

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

പേര് തരം സ്ഥിരസ്ഥിതി വിവരണം
ഓഫ്സെറ്റ് നമ്പർ | പ്രവർത്തനം | വസ്തു 10 സ്ക്രോളിന്റെ സ്ഥാനം കണക്കാക്കുമ്പോൾ സ്ക്രീനിൽ നിന്ന് ഓഫ്സെറ്റ് ചെയ്യാനുള്ള പിക്സലുകൾ. ഒരൊറ്റ നമ്പർ നൽകിയാൽ, മുകളിലേക്കും ഇടതുവശത്തേക്കും ഓഫ്‌സെറ്റ് പ്രയോഗിക്കും. ഒരൊറ്റ ദിശയോ ഒന്നിലധികം അദ്വിതീയ ഓഫ്‌സെറ്റുകളോ കേൾക്കാൻ, ഒരു ഒബ്‌ജക്റ്റ് നൽകിയാൽ മതി offset: { x: 10 }. നിങ്ങൾക്ക് ചലനാത്മകമായി ഒരു ഓഫ്സെറ്റ് നൽകേണ്ടിവരുമ്പോൾ ഒരു ഫംഗ്ഷൻ ഉപയോഗിക്കുക (ചില റെസ്പോൺസീവ് ഡിസൈനുകൾക്ക് ഉപയോഗപ്രദമാണ്).