അവലോകനം

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

പ്ലഗിനുകൾ വ്യക്തിഗതമായി ഉൾപ്പെടുത്താം (ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ വ്യക്തിഗത *.jsഫയലുകൾ ഉപയോഗിച്ച്), അല്ലെങ്കിൽ എല്ലാം ഒറ്റയടിക്ക് (ഉപയോഗിക്കുക bootstrap.jsഅല്ലെങ്കിൽ മിനിഫൈഡ് bootstrap.min.js).

സമാഹരിച്ച ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുന്നു

രണ്ടും bootstrap.jsഒരു bootstrap.min.jsഫയലിൽ എല്ലാ പ്ലഗിനുകളും അടങ്ങിയിരിക്കുന്നു. ഒരെണ്ണം മാത്രം ഉൾപ്പെടുത്തുക.

പ്ലഗിൻ ഡിപൻഡൻസികൾ

ചില പ്ലഗിന്നുകളും CSS ഘടകങ്ങളും മറ്റ് പ്ലഗിന്നുകളെ ആശ്രയിച്ചിരിക്കുന്നു. നിങ്ങൾ പ്ലഗിനുകൾ വ്യക്തിഗതമായി ഉൾപ്പെടുത്തുകയാണെങ്കിൽ, ഡോക്‌സിൽ ഈ ഡിപൻഡൻസികൾ പരിശോധിക്കുന്നത് ഉറപ്പാക്കുക. എല്ലാ പ്ലഗിനുകളും jQuery-യെ ആശ്രയിച്ചിരിക്കുന്നു എന്നതും ശ്രദ്ധിക്കുക (ഇതിനർത്ഥം പ്ലഗിൻ ഫയലുകൾക്ക് മുമ്പ് jQuery ഉൾപ്പെടുത്തണം). jQuery-bower.json യുടെ ഏത് പതിപ്പുകളാണ് പിന്തുണയ്‌ക്കുന്നതെന്ന് കാണാൻ ഞങ്ങളുമായി ബന്ധപ്പെടുക.

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

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

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

$(document).off('.data-api')

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

$(document).off('.alert.data-api')

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി ഓരോ ഘടകത്തിനും ഒരു പ്ലഗിൻ മാത്രം

ഒരേ ഘടകത്തിൽ ഒന്നിലധികം പ്ലഗിന്നുകളിൽ നിന്നുള്ള ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കരുത്. ഉദാഹരണത്തിന്, ഒരു ബട്ടണിന് ടൂൾടിപ്പ് ഉണ്ടായിരിക്കാനും മോഡൽ ടോഗിൾ ചെയ്യാനും കഴിയില്ല. ഇത് ചെയ്യുന്നതിന്, ഒരു റാപ്പിംഗ് ഘടകം ഉപയോഗിക്കുക.

പ്രോഗ്രാം API

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

$('.btn.danger').button('toggle').addClass('fat')

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

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

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

സ്ഥിരസ്ഥിതി ക്രമീകരണങ്ങൾ

Constructor.DEFAULTSപ്ലഗിനിന്റെ ഒബ്‌ജക്‌റ്റ് പരിഷ്‌ക്കരിക്കുന്നതിലൂടെ നിങ്ങൾക്ക് ഒരു പ്ലഗിനിന്റെ സ്ഥിരസ്ഥിതി ക്രമീകരണങ്ങൾ മാറ്റാനാകും :

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

സംഘർഷമില്ല

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

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

ഇവന്റുകൾ

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

3.0.0 മുതൽ, എല്ലാ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഇവന്റുകളും നെയിംസ്‌പെയ്‌സ് ചെയ്‌തിരിക്കുന്നു.

എല്ലാ അനന്തമായ ഇവന്റുകളും preventDefaultപ്രവർത്തനക്ഷമത നൽകുന്നു. ഒരു പ്രവർത്തനം ആരംഭിക്കുന്നതിന് മുമ്പ് അത് നടപ്പിലാക്കുന്നത് നിർത്താനുള്ള കഴിവ് ഇത് നൽകുന്നു.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

പതിപ്പ് നമ്പറുകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഓരോ jQuery പ്ലഗിന്നുകളുടെയും പതിപ്പ് VERSIONപ്ലഗിൻ കൺസ്ട്രക്‌ടറിന്റെ പ്രോപ്പർട്ടി വഴി ആക്‌സസ് ചെയ്യാൻ കഴിയും. ഉദാഹരണത്തിന്, ടൂൾടിപ്പ് പ്ലഗിന്നിനായി:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

JavaScript പ്രവർത്തനരഹിതമാക്കുമ്പോൾ പ്രത്യേക വീഴ്ചകളൊന്നുമില്ല

JavaScript പ്രവർത്തനരഹിതമാകുമ്പോൾ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പ്ലഗിനുകൾ പ്രത്യേകിച്ച് മനോഹരമായി പിന്നോട്ട് പോകില്ല. ഈ സാഹചര്യത്തിൽ ഉപയോക്തൃ അനുഭവത്തെക്കുറിച്ച് നിങ്ങൾ ശ്രദ്ധാലുവാണെങ്കിൽ, <noscript>നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് സാഹചര്യം (എങ്ങനെ JavaScript വീണ്ടും പ്രവർത്തനക്ഷമമാക്കാം) വിശദീകരിക്കാൻ ഉപയോഗിക്കുക, കൂടാതെ/അല്ലെങ്കിൽ നിങ്ങളുടെ സ്വന്തം ഇഷ്‌ടാനുസൃത ഫാൾബാക്കുകൾ ചേർക്കുക.

മൂന്നാം കക്ഷി ലൈബ്രറികൾ

പ്രോട്ടോടൈപ്പ് അല്ലെങ്കിൽ jQuery UI പോലുള്ള മൂന്നാം കക്ഷി ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറികളെ ബൂട്ട്സ്ട്രാപ്പ് ഔദ്യോഗികമായി പിന്തുണയ്ക്കുന്നില്ല . പേരിടാത്ത ഇവന്റുകൾ ഉണ്ടായിരുന്നിട്ടും .noConflict, നിങ്ങൾ സ്വയം പരിഹരിക്കേണ്ട അനുയോജ്യത പ്രശ്നങ്ങൾ ഉണ്ടാകാം.

സംക്രമണങ്ങൾ transition.js

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

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

ഉള്ളിൽ എന്താണുള്ളത്

Transition.js ഇവന്റുകൾക്കുള്ള അടിസ്ഥാന സഹായിയും transitionEndഅതുപോലെ ഒരു CSS ട്രാൻസിഷൻ എമുലേറ്ററും ആണ്. CSS സംക്രമണ പിന്തുണ പരിശോധിക്കുന്നതിനും ഹാംഗിംഗ് ട്രാൻസിഷനുകൾ പിടിക്കുന്നതിനും മറ്റ് പ്ലഗിനുകൾ ഇത് ഉപയോഗിക്കുന്നു.

സംക്രമണങ്ങൾ പ്രവർത്തനരഹിതമാക്കുന്നു

ഇനിപ്പറയുന്ന JavaScript സ്‌നിപ്പറ്റ് ഉപയോഗിച്ച് സംക്രമണങ്ങൾ ആഗോളതലത്തിൽ അപ്രാപ്‌തമാക്കാൻ കഴിയും, അത് ലോഡ് ചെയ്‌തതിന് ശേഷം transition.js(അല്ലെങ്കിൽ , bootstrap.jsഅല്ലെങ്കിൽ , സംഗതി പോലെ) വരണം :bootstrap.min.js

$.support.transition = false

മോഡലുകൾ modal.js

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

ഒന്നിലധികം ഓപ്പൺ മോഡലുകൾ പിന്തുണയ്ക്കുന്നില്ല

മറ്റൊന്ന് ദൃശ്യമാകുമ്പോൾ ഒരു മോഡൽ തുറക്കരുതെന്ന് ഉറപ്പാക്കുക. ഒരേ സമയം ഒന്നിലധികം മോഡൽ കാണിക്കുന്നതിന് ഇഷ്‌ടാനുസൃത കോഡ് ആവശ്യമാണ്.

മോഡൽ മാർക്ക്അപ്പ് പ്ലേസ്മെന്റ്

മോഡലിന്റെ രൂപഭാവത്തെയും കൂടാതെ/അല്ലെങ്കിൽ പ്രവർത്തനക്ഷമതയെയും ബാധിക്കുന്ന മറ്റ് ഘടകങ്ങൾ ഒഴിവാക്കുന്നതിന് നിങ്ങളുടെ ഡോക്യുമെന്റിൽ എല്ലായ്‌പ്പോഴും ഒരു മോഡലിന്റെ HTML കോഡ് ഒരു ഉയർന്ന തലത്തിൽ സ്ഥാപിക്കാൻ ശ്രമിക്കുക.

മൊബൈൽ ഉപകരണ മുന്നറിയിപ്പ്

മൊബൈൽ ഉപകരണങ്ങളിൽ മോഡലുകൾ ഉപയോഗിക്കുന്നതുമായി ബന്ധപ്പെട്ട് ചില മുന്നറിയിപ്പുകളുണ്ട്. വിശദാംശങ്ങൾക്ക് ഞങ്ങളുടെ ബ്രൗസർ പിന്തുണ ഡോക്‌സ് കാണുക.

HTML5 അതിന്റെ അർത്ഥശാസ്‌ത്രത്തെ എങ്ങനെ നിർവചിക്കുന്നു autofocusഎന്നതിനാൽ, ബൂട്ട്‌സ്‌ട്രാപ്പ് മോഡലുകളിൽ HTML ആട്രിബ്യൂട്ടിന് യാതൊരു സ്വാധീനവുമില്ല. ഇതേ ഇഫക്റ്റ് നേടുന്നതിന്, ചില ഇഷ്‌ടാനുസൃത JavaScript ഉപയോഗിക്കുക:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

ഉദാഹരണങ്ങൾ

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

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

ലൈവ് ഡെമോ

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

മോഡലുകൾ ആക്സസ് ചെയ്യാവുന്നതാക്കുക

മോഡൽ ശീർഷകം പരാമർശിച്ചുകൊണ്ട് ലേക്ക് , കൂടാതെ role="dialog"അതിലേക്ക് തന്നെ ചേർക്കുന്നത് ഉറപ്പാക്കുക .aria-labelledby="...".modalrole="document".modal-dialog

aria-describedbyകൂടാതെ, എന്നതിനൊപ്പം നിങ്ങളുടെ മോഡൽ ഡയലോഗിന്റെ ഒരു വിവരണം നിങ്ങൾക്ക് നൽകാം .modal.

YouTube വീഡിയോകൾ ഉൾച്ചേർക്കുന്നു

YouTube വീഡിയോകൾ മോഡലുകളിൽ ഉൾച്ചേർക്കുന്നതിന്, പ്ലേബാക്കും മറ്റും സ്വയമേവ നിർത്തുന്നതിന് ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ഇല്ലാത്ത അധിക JavaScript ആവശ്യമാണ്. കൂടുതൽ വിവരങ്ങൾക്ക് സഹായകരമായ ഈ സ്റ്റാക്ക് ഓവർഫ്ലോ പോസ്റ്റ് കാണുക.

ഓപ്ഷണൽ വലുപ്പങ്ങൾ

മോഡലുകൾക്ക് രണ്ട് ഓപ്‌ഷണൽ വലുപ്പങ്ങളുണ്ട്, അവയിൽ സ്ഥാപിക്കാൻ മോഡിഫയർ ക്ലാസുകൾ വഴി ലഭ്യമാണ് .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

ആനിമേഷൻ നീക്കം ചെയ്യുക

കാണുന്നതിന് മങ്ങുന്നതിന് പകരം ലളിതമായി ദൃശ്യമാകുന്ന മോഡലുകൾക്ക്, .fadeനിങ്ങളുടെ മോഡൽ മാർക്ക്അപ്പിൽ നിന്ന് ക്ലാസ് നീക്കം ചെയ്യുക.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

ഗ്രിഡ് സിസ്റ്റം ഉപയോഗിക്കുന്നു

ഒരു മോഡലിനുള്ളിൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഗ്രിഡ് സിസ്റ്റം പ്രയോജനപ്പെടുത്തുന്നതിന്, അതിനുള്ളിൽ നെസ്റ്റ് .rowചെയ്യുക .modal-body, തുടർന്ന് സാധാരണ ഗ്രിഡ് സിസ്റ്റം ക്ലാസുകൾ ഉപയോഗിക്കുക.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

അല്പം വ്യത്യസ്തമായ ഉള്ളടക്കങ്ങളോടെ, ഒരേ മോഡൽ പ്രവർത്തനക്ഷമമാക്കുന്ന ഒരു കൂട്ടം ബട്ടണുകൾ ഉണ്ടോ? ഏത് ബട്ടണാണ് ക്ലിക്ക് ചെയ്തത് എന്നതിനെ ആശ്രയിച്ച് മോഡൽ ഉള്ളടക്കം മാറ്റാൻ HTML ആട്രിബ്യൂട്ടുകളും (ഒരുപക്ഷേ jQuery വഴിevent.relatedTarget ) ഉപയോഗിക്കുക . വിശദാംശങ്ങൾക്ക് മോഡൽ ഇവന്റ് ഡോക്‌സ് കാണുക ,data-*relatedTarget

...കൂടുതൽ ബട്ടണുകൾ...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

ഉപയോഗം

മോഡൽ പ്ലഗിൻ, ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ അല്ലെങ്കിൽ JavaScript വഴി നിങ്ങളുടെ മറഞ്ഞിരിക്കുന്ന ഉള്ളടക്കം ആവശ്യാനുസരണം ടോഗിൾ ചെയ്യുന്നു. ഇത് ഡിഫോൾട്ട് സ്ക്രോളിംഗ് സ്വഭാവം അസാധുവാക്കുന്നതിലേക്ക് .modal-openചേർക്കുകയും മോഡലിന് പുറത്ത് ക്ലിക്കുചെയ്യുമ്പോൾ കാണിച്ചിരിക്കുന്ന മോഡലുകൾ ഡിസ്മിസ് ചെയ്യുന്നതിനായി ഒരു ക്ലിക്ക് ഏരിയ നൽകുകയും ചെയ്യുന്നു.<body>.modal-backdrop

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

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

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

JavaScript വഴി

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

$('#myModal').modal(options)

ഓപ്ഷനുകൾ

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

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

v3.3.0 മുതൽ ഈ ഓപ്‌ഷൻ ഒഴിവാക്കുകയും v4-ൽ നീക്കം ചെയ്യുകയും ചെയ്‌തു. പകരം ക്ലയന്റ്-സൈഡ് ടെംപ്ലേറ്റിംഗ് അല്ലെങ്കിൽ ഒരു ഡാറ്റ ബൈൻഡിംഗ് ഫ്രെയിംവർക്ക് അല്ലെങ്കിൽ jQuery.load എന്ന് വിളിക്കാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു.

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

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

രീതികൾ

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

$('#myModal').modal({
  keyboard: false
})

ഒരു മോഡൽ സ്വമേധയാ ടോഗിൾ ചെയ്യുന്നു. മോഡൽ യഥാർത്ഥത്തിൽ കാണിക്കുകയോ മറയ്ക്കുകയോ ചെയ്യുന്നതിനുമുമ്പ് (അതായത് shown.bs.modalഅല്ലെങ്കിൽ hidden.bs.modalഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) വിളിക്കുന്നയാളിലേക്ക് മടങ്ങുന്നു.

$('#myModal').modal('toggle')

സ്വമേധയാ ഒരു മോഡൽ തുറക്കുന്നു. മോഡൽ യഥാർത്ഥത്തിൽ കാണിക്കുന്നതിന് മുമ്പ് (അതായത് shown.bs.modalഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) വിളിക്കുന്നയാളിലേക്ക് മടങ്ങുന്നു.

$('#myModal').modal('show')

ഒരു മോഡൽ സ്വമേധയാ മറയ്ക്കുന്നു. മോഡൽ യഥാർത്ഥത്തിൽ മറയ്ക്കുന്നതിന് മുമ്പ് (അതായത് hidden.bs.modalഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) വിളിക്കുന്നയാളിലേക്ക് മടങ്ങുന്നു.

$('#myModal').modal('hide')

ഒരു സ്ക്രോൾബാറിനെ നേരിടാൻ മോഡൽ സ്ഥാനനിർണ്ണയം പുനഃക്രമീകരിക്കുന്നു, ഇത് മോഡൽ ഇടത്തേക്ക് കുതിക്കും.

മോഡൽ തുറന്നിരിക്കുമ്പോൾ അതിന്റെ ഉയരം മാറുമ്പോൾ മാത്രമേ ആവശ്യമുള്ളൂ.

$('#myModal').modal('handleUpdate')

ഇവന്റുകൾ

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

എല്ലാ മോഡൽ ഇവന്റുകളും മോഡലിൽ തന്നെ (അതായത് <div class="modal">) വെടിവയ്ക്കുന്നു.

ഇവന്റ് തരം വിവരണം
show.bs.modal showഇൻസ്‌റ്റൻസ് മെത്തേഡ് എന്ന് വിളിക്കുമ്പോൾ ഈ സംഭവം ഉടനടി തീപിടിക്കുന്നു . ഒരു ക്ലിക്കിലൂടെ സംഭവിച്ചതാണെങ്കിൽ, ക്ലിക്കുചെയ്‌ത ഘടകം relatedTargetഇവന്റിന്റെ പ്രോപ്പർട്ടിയായി ലഭ്യമാണ്.
കാണിച്ചിരിക്കുന്നു.bs.മോഡൽ മോഡൽ ഉപയോക്താവിന് ദൃശ്യമാക്കുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (സിഎസ്എസ് സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും). ഒരു ക്ലിക്കിലൂടെ സംഭവിച്ചതാണെങ്കിൽ, ക്ലിക്കുചെയ്‌ത ഘടകം relatedTargetഇവന്റിന്റെ പ്രോപ്പർട്ടിയായി ലഭ്യമാണ്.
hide.bs.modal hideഇൻസ്‌റ്റൻസ് മെത്തേഡ് വിളിച്ചാൽ ഉടൻ തന്നെ ഈ ഇവന്റ് ഫയർ ചെയ്യപ്പെടും.
മറഞ്ഞിരിക്കുന്നു.bs.മോഡൽ മോഡൽ ഉപയോക്താവിൽ നിന്ന് മറച്ചത് പൂർത്തിയാകുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (സിഎസ്എസ് സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
loaded.bs.modal remoteമോഡൽ ഓപ്ഷൻ ഉപയോഗിച്ച് ഉള്ളടക്കം ലോഡ് ചെയ്യുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും .
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

ഡ്രോപ്പ്ഡൌണുകൾ dropdown.js

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

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

ഗുളികകൾക്കുള്ളിൽ

.openഡാറ്റ ആട്രിബ്യൂട്ടുകൾ അല്ലെങ്കിൽ JavaScript വഴി , പാരന്റ് ലിസ്റ്റ് ഇനത്തിലെ ക്ലാസ് ടോഗിൾ ചെയ്തുകൊണ്ട് ഡ്രോപ്പ്ഡൗൺ പ്ലഗിൻ മറഞ്ഞിരിക്കുന്ന ഉള്ളടക്കം (ഡ്രോപ്പ്ഡൗൺ മെനുകൾ) ടോഗിൾ ചെയ്യുന്നു .

മൊബൈൽ ഉപകരണങ്ങളിൽ, ഒരു ഡ്രോപ്പ്ഡൗൺ തുറക്കുന്നത് .dropdown-backdrop, മെനുവിന് പുറത്ത് ടാപ്പുചെയ്യുമ്പോൾ ഡ്രോപ്പ്ഡൗൺ മെനുകൾ അടയ്‌ക്കുന്നതിനുള്ള ഒരു ടാപ്പ് ഏരിയയായി ചേർക്കുന്നു, ശരിയായ iOS പിന്തുണ ആവശ്യമാണ്. ഒരു തുറന്ന ഡ്രോപ്പ്ഡൗൺ മെനുവിൽ നിന്ന് മറ്റൊരു ഡ്രോപ്പ്ഡൗൺ മെനുവിലേക്ക് മാറുന്നതിന് മൊബൈലിൽ ഒരു അധിക ടാപ്പ് ആവശ്യമാണ് എന്നാണ് ഇതിനർത്ഥം.

കുറിപ്പ്: data-toggle="dropdown"ഒരു ആപ്ലിക്കേഷൻ തലത്തിൽ ഡ്രോപ്പ്ഡൗൺ മെനുകൾ അടയ്ക്കുന്നതിന് ആട്രിബ്യൂട്ട് ആശ്രയിക്കുന്നു, അതിനാൽ ഇത് എല്ലായ്പ്പോഴും ഉപയോഗിക്കുന്നത് നല്ലതാണ്.

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

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

ലിങ്ക് ബട്ടണുകൾ ഉപയോഗിച്ച് URL-കൾ കേടുകൂടാതെ സൂക്ഷിക്കാൻ, data-targetപകരം ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുക href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

JavaScript വഴി

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

$('.dropdown-toggle').dropdown()

data-toggle="dropdown"ഇപ്പോഴും ആവശ്യമാണ്

നിങ്ങൾ JavaScript വഴി നിങ്ങളുടെ ഡ്രോപ്പ്‌ഡൗണിനെ വിളിച്ചാലും പകരം ഡാറ്റ-എപിഐ ഉപയോഗിക്കുന്നുണ്ടോ എന്നത് പരിഗണിക്കാതെ തന്നെ data-toggle="dropdown", ഡ്രോപ്പ്‌ഡൗണിന്റെ ട്രിഗർ എലമെന്റിൽ എപ്പോഴും ഉണ്ടായിരിക്കേണ്ടത് ആവശ്യമാണ്.

ഒന്നുമില്ല

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

എല്ലാ ഡ്രോപ്പ്ഡൗൺ ഇവന്റുകളും .dropdown-menuന്റെ പാരന്റ് എലമെന്റിന് നേരെയാണ്.

എല്ലാ ഡ്രോപ്പ്ഡൗൺ ഇവന്റുകൾക്കും ഒരു relatedTargetപ്രോപ്പർട്ടി ഉണ്ട്, അതിന്റെ മൂല്യം ടോഗിൾ ആങ്കർ എലമെന്റാണ്.

ഇവന്റ് തരം വിവരണം
show.bs.ഡ്രോപ്പ്ഡൗൺ ഷോ ഇൻസ്‌റ്റൻസ് രീതി എന്ന് വിളിക്കുമ്പോൾ ഈ ഇവന്റ് ഉടനടി ഫയർ ചെയ്യുന്നു.
കാണിച്ചിരിക്കുന്നു.bs.ഡ്രോപ്പ്ഡൗൺ ഡ്രോപ്പ്ഡൗൺ ഉപയോക്താവിന് ദൃശ്യമാകുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (പൂർത്തിയാകാൻ CSS സംക്രമണങ്ങൾക്കായി കാത്തിരിക്കും).
hide.bs.ഡ്രോപ്പ്ഡൗൺ ഹൈഡ് ഇൻസ്‌റ്റൻസ് മെത്തേഡ് വിളിക്കുമ്പോൾ ഈ ഇവന്റ് ഉടനടി പ്രവർത്തനക്ഷമമാകും.
മറഞ്ഞിരിക്കുന്നു.bs.ഡ്രോപ്പ്ഡൗൺ ഡ്രോപ്പ്ഡൗൺ ഉപയോക്താവിൽ നിന്ന് മറയ്ക്കുന്നത് പൂർത്തിയാകുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (പൂർത്തിയാകാൻ CSS സംക്രമണത്തിനായി കാത്തിരിക്കും).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

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

സ്ക്രോൾ പൊസിഷൻ അടിസ്ഥാനമാക്കി നാവിക് ടാർഗെറ്റുകൾ സ്വയമേവ അപ്ഡേറ്റ് ചെയ്യുന്നതിനുള്ളതാണ് 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. ലൊകാവോർ സെഡ് ഹെൽവെറ്റിക്ക ക്ലീഷെ ഐറണി, ഇടിമുഴക്കങ്ങൾ, ഹൂഡി ഗ്ലൂറ്റൻ-ഫ്രീ ലോ-ഫൈ ഫാപ് അലിക്വിപ്പിനെ കുറിച്ച് നിങ്ങൾ കേട്ടിട്ടുണ്ടാകില്ല. ലേബർ എലിറ്റ് പ്ലേസാറ്റ് അവർ വിറ്റുതീരുന്നതിന് മുമ്പായി, ടെറി റിച്ചാർഡ്സൺ പ്രൊഡന്റ് ബ്രഞ്ച് നെസ്സിയന്റ് ക്വിസ് കോസ്ബി സ്വെറ്റർ പരിയാതുർ കെഫിയെ അറ്റ് ഹെൽവെറ്റിക്ക ആർട്ടിസാൻ. കാർഡിഗൻ ക്രാഫ്റ്റ് ബിയർ സെറ്റാൻ റെഡിമെയ്ഡ് വെലിറ്റ്. വിഎച്ച്എസ് ചേംബ്രേ ലബോറീസ് ടെമ്പർ വേനിയം. അനിം മോളിറ്റ് മിനിം കമോഡോ ഉള്ളംകോ ഇടിമുഴക്കം.

ഉപയോഗം

ബൂട്ട്സ്ട്രാപ്പ് nav ആവശ്യമാണ്

സജീവമായ ലിങ്കുകൾ ശരിയായി ഹൈലൈറ്റ് ചെയ്യുന്നതിന് സ്ക്രോൾസ്പിക്ക് നിലവിൽ ഒരു ബൂട്ട്സ്ട്രാപ്പ് നാവിക ഘടകം ആവശ്യമാണ്.

പരിഹരിക്കാവുന്ന ഐഡി ലക്ഷ്യങ്ങൾ ആവശ്യമാണ്

നവബാർ ലിങ്കുകൾക്ക് പരിഹരിക്കാവുന്ന ഐഡി ടാർഗെറ്റുകൾ ഉണ്ടായിരിക്കണം. ഉദാഹരണത്തിന്, <a href="#home">home</a>DOM-ലെ പോലെയുള്ള ഒന്നുമായി പൊരുത്തപ്പെടണം <div id="home"></div>.

ലക്ഷ്യമല്ലാത്ത :visibleഘടകങ്ങൾ അവഗണിച്ചു

:visiblejQuery അനുസരിച്ചല്ലാത്ത ടാർഗെറ്റ് ഘടകങ്ങൾ അവഗണിക്കപ്പെടുകയും അവയുടെ അനുബന്ധ nav ഇനങ്ങൾ ഒരിക്കലും ഹൈലൈറ്റ് ചെയ്യപ്പെടുകയുമില്ല.

ആപേക്ഷിക സ്ഥാനം ആവശ്യമാണ്

നടപ്പിലാക്കൽ രീതി എന്തുതന്നെയായാലും, position: relative;നിങ്ങൾ ചാരപ്പണി നടത്തുന്ന മൂലകത്തിൽ സ്ക്രോൾസ്പി ഉപയോഗിക്കേണ്ടതുണ്ട്. മിക്ക കേസുകളിലും ഇതാണ് <body>. കൂടാതെ മറ്റ് ഘടകങ്ങളിൽ സ്ക്രോൾസ്പൈ ചെയ്യുമ്പോൾ , ഒരു സെറ്റ് <body>ഉണ്ടെന്ന് ഉറപ്പാക്കുകയും പ്രയോഗിക്കുകയും ചെയ്യുക.heightoverflow-y: scroll;

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

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

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

JavaScript വഴി

നിങ്ങളുടെ CSS- ൽ ചേർത്ത ശേഷം position: relative;, JavaScript വഴി സ്ക്രോൾസ്പൈയെ വിളിക്കുക:

$('body').scrollspy({ target: '#navbar-example' })

രീതികൾ

.scrollspy('refresh')

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

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

ഓപ്ഷനുകൾ

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

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

ഇവന്റുകൾ

ഇവന്റ് തരം വിവരണം
activate.bs.scrollspy സ്ക്രോൾസ്പി ഒരു പുതിയ ഇനം സജീവമാക്കുമ്പോഴെല്ലാം ഈ ഇവന്റ് ഫയർ ചെയ്യുന്നു.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

ടോഗിൾ ചെയ്യാവുന്ന ടാബുകൾ tab.js

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

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

അസംസ്‌കൃത ഡെനിം, ജീൻ ഷോർട്ട്‌സ് ഓസ്റ്റിനിനെക്കുറിച്ച് നിങ്ങൾ കേട്ടിട്ടുണ്ടാകില്ല. നെസ്സിയന്റ് ടോഫു സ്റ്റംപ്ടൗൺ അലിക്വ, റെട്രോ സിന്ത് മാസ്റ്റർ ക്ലീൻസ്. മീശ ക്ലിച്ചെ ടെമ്പർ, വില്യംസ്ബർഗ് കാർലെസ് വെഗൻ ഹെൽവെറ്റിക്ക. റെപ്രെഹെൻഡറിറ്റ് കശാപ്പ് റെട്രോ കെഫിയെ ഡ്രീംകാച്ചർ സിന്ത്. കോസ്ബി സ്വെറ്റർ 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 വഴി ടാബബിൾ ടാബുകൾ പ്രവർത്തനക്ഷമമാക്കുക (ഓരോ ടാബും വ്യക്തിഗതമായി സജീവമാക്കേണ്ടതുണ്ട്):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

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

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

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

ഫേഡ് പ്രഭാവം

ടാബുകൾ മങ്ങാൻ, .fadeഓരോന്നിലേക്കും ചേർക്കുക .tab-pane. ആദ്യ ടാബ് പാളിയും .inപ്രാരംഭ ഉള്ളടക്കം ദൃശ്യമാക്കേണ്ടതുണ്ട്.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

രീതികൾ

$().tab

ഒരു ടാബ് ഘടകവും ഉള്ളടക്ക കണ്ടെയ്‌നറും സജീവമാക്കുന്നു. ടാബിന് DOM-ൽ ഒരു കണ്ടെയ്‌നർ നോഡ് data-targetഅല്ലെങ്കിൽ ഒരു ടാർഗെറ്റിംഗ് ഉണ്ടായിരിക്കണം. hrefമുകളിലുള്ള ഉദാഹരണങ്ങളിൽ, ടാബുകൾ ആട്രിബ്യൂട്ടുകളുള്ള <a>s ആണ് .data-toggle="tab"

.tab('show')

തന്നിരിക്കുന്ന ടാബ് തിരഞ്ഞെടുത്ത് അതിന്റെ അനുബന്ധ ഉള്ളടക്കം കാണിക്കുന്നു. മുമ്പ് തിരഞ്ഞെടുത്ത മറ്റേതെങ്കിലും ടാബ് തിരഞ്ഞെടുക്കപ്പെടാതിരിക്കുകയും അതുമായി ബന്ധപ്പെട്ട ഉള്ളടക്കം മറയ്ക്കുകയും ചെയ്യും. ടാബ് പാളി യഥാർത്ഥത്തിൽ കാണിക്കുന്നതിന് മുമ്പ് (അതായത് shown.bs.tabഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) കോളറിലേക്ക് മടങ്ങുന്നു.

$('#someTab').tab('show')

ഇവന്റുകൾ

ഒരു പുതിയ ടാബ് കാണിക്കുമ്പോൾ, ഇവന്റുകൾ ഇനിപ്പറയുന്ന ക്രമത്തിൽ പ്രവർത്തിക്കുന്നു:

  1. hide.bs.tab(നിലവിലെ സജീവമായ ടാബിൽ)
  2. show.bs.tab(കാണിക്കേണ്ട ടാബിൽ)
  3. hidden.bs.tab(മുമ്പത്തെ സജീവ ടാബിൽ, hide.bs.tabഇവന്റിന് സമാനമായത്)
  4. shown.bs.tab(പുതുതായി-സജീവമായി കാണിച്ചിരിക്കുന്ന ടാബിൽ, show.bs.tabഇവന്റിന് സമാനമായത്)

ഒരു ടാബും ഇതിനകം സജീവമല്ലെങ്കിൽ, hide.bs.tabഇവന്റുകളും hidden.bs.tabപ്രവർത്തനക്ഷമവുമാകില്ല.

ഇവന്റ് തരം വിവരണം
show.bs.tab ഈ ഇവന്റ് ടാബ് ഷോയിൽ പ്രവർത്തിക്കുന്നു, എന്നാൽ പുതിയ ടാബ് കാണിക്കുന്നതിന് മുമ്പ്. യഥാക്രമം സജീവമായ ടാബും മുമ്പത്തെ സജീവമായ ടാബും (ലഭ്യമെങ്കിൽ) ഉപയോഗിക്കുകയും event.targetടാർഗെറ്റുചെയ്യുകയും ചെയ്യുക.event.relatedTarget
കാണിച്ചിരിക്കുന്നു.bs.tab ഒരു ടാബ് കാണിച്ചതിന് ശേഷം ടാബ് ഷോയിൽ ഈ ഇവന്റ് ഫയർ ചെയ്യുന്നു. യഥാക്രമം സജീവമായ ടാബും മുമ്പത്തെ സജീവമായ ടാബും (ലഭ്യമെങ്കിൽ) ഉപയോഗിക്കുകയും event.targetടാർഗെറ്റുചെയ്യുകയും ചെയ്യുക.event.relatedTarget
hide.bs.tab ഒരു പുതിയ ടാബ് കാണിക്കുമ്പോൾ ഈ ഇവന്റ് ഫയർ ചെയ്യുന്നു (അതിനാൽ മുമ്പത്തെ സജീവമായ ടാബ് മറയ്ക്കണം). യഥാക്രമം നിലവിലെ സജീവ ടാബും പുതിയ ഉടൻ സജീവമാകുന്ന ടാബും ടാർഗെറ്റുചെയ്യാനും event.targetഉപയോഗിക്കുക .event.relatedTarget
മറച്ച.bs.tab ഒരു പുതിയ ടാബ് കാണിച്ചതിന് ശേഷം ഈ ഇവന്റ് ഫയർ ചെയ്യുന്നു (അങ്ങനെ മുമ്പത്തെ സജീവ ടാബ് മറച്ചിരിക്കുന്നു). യഥാക്രമം മുമ്പത്തെ സജീവ ടാബും പുതിയ സജീവ ടാബും ടാർഗെറ്റുചെയ്യാനും event.targetഉപയോഗിക്കാനും .event.relatedTarget
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

ടൂൾടിപ്പുകൾ ടൂൾടിപ്പ്.ജെഎസ്

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

പൂജ്യം നീളമുള്ള ശീർഷകങ്ങളുള്ള ടൂൾടിപ്പുകൾ ഒരിക്കലും പ്രദർശിപ്പിക്കില്ല.

ഉദാഹരണങ്ങൾ

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

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

സ്റ്റാറ്റിക് ടൂൾടിപ്പ്

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

നാല് ദിശകൾ

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

ഓപ്റ്റ്-ഇൻ പ്രവർത്തനം

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

ഒരു പേജിലെ എല്ലാ ടൂൾടിപ്പുകളും സമാരംഭിക്കുന്നതിനുള്ള ഒരു മാർഗ്ഗം അവയുടെ data-toggleആട്രിബ്യൂട്ട് അനുസരിച്ച് തിരഞ്ഞെടുക്കുന്നതാണ്:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

ഉപയോഗം

ടൂൾടിപ്പ് പ്ലഗിൻ ആവശ്യാനുസരണം ഉള്ളടക്കവും മാർക്ക്അപ്പും സൃഷ്ടിക്കുന്നു, ഡിഫോൾട്ടായി ടൂൾടിപ്പുകൾ അവയുടെ ട്രിഗർ ഘടകത്തിന് ശേഷം സ്ഥാപിക്കുന്നു.

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

$('#example').tooltip(options)

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

ടൂൾടിപ്പിന് ആവശ്യമായ മാർക്ക്അപ്പ് ഒരു dataആട്രിബ്യൂട്ട് മാത്രമാണ്, titleകൂടാതെ HTML ഘടകത്തിൽ നിങ്ങൾക്ക് ഒരു ടൂൾടിപ്പ് ഉണ്ടായിരിക്കണം. ഒരു ടൂൾടിപ്പിന്റെ ജനറേറ്റഡ് മാർക്ക്അപ്പ് വളരെ ലളിതമാണ്, എന്നിരുന്നാലും ഇതിന് ഒരു സ്ഥാനം ആവശ്യമാണ് (സ്ഥിരമായി, topപ്ലഗിൻ സജ്ജീകരിച്ചിരിക്കുന്നു).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

ഒന്നിലധികം വരി ലിങ്കുകൾ

ഒന്നിലധികം വരികൾ പൊതിയുന്ന ഒരു ഹൈപ്പർലിങ്കിലേക്ക് ചിലപ്പോൾ നിങ്ങൾ ഒരു ടൂൾടിപ്പ് ചേർക്കാൻ ആഗ്രഹിക്കുന്നു. ടൂൾടിപ്പ് പ്ലഗിന്റെ ഡിഫോൾട്ട് സ്വഭാവം അതിനെ തിരശ്ചീനമായും ലംബമായും കേന്ദ്രീകരിക്കുക എന്നതാണ്. white-space: nowrap;ഇത് ഒഴിവാക്കാൻ നിങ്ങളുടെ ആങ്കറുകളിലേക്ക് ചേർക്കുക .

ബട്ടൺ ഗ്രൂപ്പുകൾ, ഇൻപുട്ട് ഗ്രൂപ്പുകൾ, പട്ടികകൾ എന്നിവയിലെ ടൂൾടിപ്പുകൾക്ക് പ്രത്യേക ക്രമീകരണം ആവശ്യമാണ്

.btn-groupa അല്ലെങ്കിൽ an ഉള്ളിലെ ഘടകങ്ങളിൽ .input-group, അല്ലെങ്കിൽ പട്ടികയുമായി ബന്ധപ്പെട്ട ഘടകങ്ങളിൽ ( <td>, <th>, <tr>, <thead>, ) ടൂൾടിപ്പുകൾ ഉപയോഗിക്കുമ്പോൾ <tbody>, അനാവശ്യ പാർശ്വഫലങ്ങൾ ഒഴിവാക്കാൻ <tfoot>നിങ്ങൾ ഓപ്ഷൻ (ചുവടെ രേഖപ്പെടുത്തിയിരിക്കുന്നത്) വ്യക്തമാക്കേണ്ടതുണ്ട് (ഘടകം വിശാലമായി വളരുന്നത് പോലെയുള്ളതും/ container: 'body'അല്ലെങ്കിൽ ടൂൾടിപ്പ് പ്രവർത്തനക്ഷമമാകുമ്പോൾ അതിന്റെ വൃത്താകൃതിയിലുള്ള മൂലകൾ നഷ്ടപ്പെടും).

മറഞ്ഞിരിക്കുന്ന ഘടകങ്ങളിൽ ടൂൾടിപ്പുകൾ കാണിക്കാൻ ശ്രമിക്കരുത്

$(...).tooltip('show')ടാർഗെറ്റ് എലമെന്റ് ആയിരിക്കുമ്പോൾ display: none;അഭ്യർത്ഥിക്കുന്നത് ടൂൾടിപ്പ് തെറ്റായി സ്ഥാപിക്കുന്നതിന് കാരണമാകും.

കീബോർഡും അസിസ്റ്റീവ് ടെക്നോളജി ഉപയോക്താക്കൾക്കും ആക്സസ് ചെയ്യാവുന്ന ടൂൾടിപ്പുകൾ

ഒരു കീബോർഡ് ഉപയോഗിച്ച് നാവിഗേറ്റുചെയ്യുന്ന ഉപയോക്താക്കൾക്കും പ്രത്യേകിച്ചും സഹായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്കും, ലിങ്കുകൾ, ഫോം നിയന്ത്രണങ്ങൾ അല്ലെങ്കിൽ tabindex="0"ആട്രിബ്യൂട്ടുള്ള ഏതെങ്കിലും അനിയന്ത്രിതമായ ഘടകങ്ങൾ എന്നിവ പോലുള്ള കീബോർഡ് ഫോക്കസ് ചെയ്യാവുന്ന ഘടകങ്ങളിലേക്ക് ടൂൾടിപ്പുകൾ മാത്രമേ ചേർക്കാവൂ.

അപ്രാപ്തമാക്കിയ ഘടകങ്ങളുടെ ടൂൾടിപ്പുകൾക്ക് റാപ്പർ ഘടകങ്ങൾ ആവശ്യമാണ്

disabledഒരു ടൂൾടിപ്പ് അല്ലെങ്കിൽ ഘടകത്തിലേക്ക് ഒരു ടൂൾടിപ്പ് ചേർക്കാൻ .disabled, a യുടെ ഉള്ളിൽ മൂലകം ഇടുക, പകരം <div>ടൂൾടിപ്പ് പ്രയോഗിക്കുക .<div>

ഓപ്ഷനുകൾ

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

പേര് ടൈപ്പ് ചെയ്യുക സ്ഥിരസ്ഥിതി വിവരണം
ആനിമേഷൻ ബൂളിയൻ സത്യം ടൂൾടിപ്പിലേക്ക് ഒരു CSS ഫേഡ് ട്രാൻസിഷൻ പ്രയോഗിക്കുക
കണ്ടെയ്നർ ചരട് | തെറ്റായ തെറ്റായ

ഒരു നിർദ്ദിഷ്ട ഘടകത്തിലേക്ക് ടൂൾടിപ്പ് കൂട്ടിച്ചേർക്കുന്നു. ഉദാഹരണം: container: 'body'. ട്രിഗറിംഗ് എലമെന്റിന് സമീപം ഡോക്യുമെന്റിന്റെ ഫ്ലോയിൽ ടൂൾടിപ്പ് സ്ഥാപിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നതിനാൽ ഈ ഓപ്ഷൻ പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ് - ഇത് വിൻഡോ വലുപ്പം മാറ്റുമ്പോൾ ട്രിഗറിംഗ് എലമെന്റിൽ നിന്ന് ടൂൾടിപ്പ് ഒഴുകുന്നത് തടയും.

കാലതാമസം നമ്പർ | വസ്തു 0

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

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

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

html ബൂളിയൻ തെറ്റായ ടൂൾടിപ്പിൽ HTML ചേർക്കുക. തെറ്റാണെങ്കിൽ, textDOM-ൽ ഉള്ളടക്കം ചേർക്കാൻ jQuery-യുടെ രീതി ഉപയോഗിക്കും. XSS ആക്രമണങ്ങളെക്കുറിച്ച് നിങ്ങൾക്ക് ആശങ്കയുണ്ടെങ്കിൽ ടെക്സ്റ്റ് ഉപയോഗിക്കുക.
പ്ലേസ്മെന്റ് ചരട് | പ്രവർത്തനം 'മുകളിൽ'

ടൂൾടിപ്പ് എങ്ങനെ സ്ഥാപിക്കാം - മുകളിൽ | താഴെ | വിട്ടു | വലത് | ഓട്ടോ.
"ഓട്ടോ" വ്യക്തമാക്കുമ്പോൾ, അത് ടൂൾടിപ്പിനെ ചലനാത്മകമായി പുനഃക്രമീകരിക്കും. ഉദാഹരണത്തിന്, പ്ലെയ്‌സ്‌മെന്റ് "ഓട്ടോ ലെഫ്റ്റ്" ആണെങ്കിൽ, ടൂൾടിപ്പ് സാധ്യമാകുമ്പോൾ ഇടതുവശത്തേക്ക് പ്രദർശിപ്പിക്കും, അല്ലാത്തപക്ഷം അത് വലതുവശത്ത് പ്രദർശിപ്പിക്കും.

പ്ലെയ്‌സ്‌മെന്റ് നിർണ്ണയിക്കാൻ ഒരു ഫംഗ്‌ഷൻ ഉപയോഗിക്കുമ്പോൾ, അതിനെ ടൂൾടിപ്പ് DOM നോഡ് അതിന്റെ ആദ്യ ആർഗ്യുമെന്റും ട്രിഗറിംഗ് എലമെന്റ് DOM നോഡ് അതിന്റെ രണ്ടാമത്തേതുമായി വിളിക്കുന്നു. സന്ദർഭം ടൂൾടിപ്പ് ഉദാഹരണമായി thisസജ്ജീകരിച്ചിരിക്കുന്നു.

സെലക്ടർ സ്ട്രിംഗ് തെറ്റായ ഒരു സെലക്ടർ നൽകിയിട്ടുണ്ടെങ്കിൽ, ടൂൾടിപ്പ് ഒബ്ജക്റ്റുകൾ നിർദ്ദിഷ്ട ടാർഗെറ്റുകളിലേക്ക് നിയോഗിക്കും. പ്രായോഗികമായി, ടൂൾടിപ്പുകൾ ചേർക്കുന്നതിന് ഡൈനാമിക് HTML ഉള്ളടക്കം പ്രവർത്തനക്ഷമമാക്കാൻ ഇത് ഉപയോഗിക്കുന്നു. ഇതും വിജ്ഞാനപ്രദമായ ഒരു ഉദാഹരണവും കാണുക .
ടെംപ്ലേറ്റ് സ്ട്രിംഗ് '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

ടൂൾടിപ്പ് സൃഷ്ടിക്കുമ്പോൾ ഉപയോഗിക്കേണ്ട അടിസ്ഥാന HTML.

ടൂൾടിപ്പ് ന്റെ titleഉള്ളിലേക്ക് കുത്തിവയ്ക്കും .tooltip-inner.

.tooltip-arrowടൂൾടിപ്പിന്റെ അമ്പടയാളമായി മാറും.

ഏറ്റവും പുറത്തെ റാപ്പർ ഘടകത്തിന് .tooltipക്ലാസ് ഉണ്ടായിരിക്കണം.

തലക്കെട്ട് ചരട് | പ്രവർത്തനം ''

titleആട്രിബ്യൂട്ട് ഇല്ലെങ്കിൽ ഡിഫോൾട്ട് ശീർഷക മൂല്യം .

thisഒരു ഫംഗ്‌ഷൻ നൽകിയിട്ടുണ്ടെങ്കിൽ, ടൂൾടിപ്പ് ഘടിപ്പിച്ചിരിക്കുന്ന ഘടകത്തിലേക്ക് അതിന്റെ റഫറൻസ് സെറ്റ് ഉപയോഗിച്ച് അതിനെ വിളിക്കും .

ട്രിഗർ സ്ട്രിംഗ് 'ഹോവർ ഫോക്കസ്' ടൂൾടിപ്പ് എങ്ങനെയാണ് ട്രിഗർ ചെയ്യുന്നത് - ക്ലിക്ക് | ഹോവർ | ഫോക്കസ് | മാനുവൽ. നിങ്ങൾക്ക് ഒന്നിലധികം ട്രിഗറുകൾ കടന്നുപോകാം; ഒരു സ്പേസ് ഉപയോഗിച്ച് അവയെ വേർതിരിക്കുക. manualമറ്റേതെങ്കിലും ട്രിഗറുമായി സംയോജിപ്പിക്കാൻ കഴിയില്ല.
വ്യൂപോർട്ട് ചരട് | വസ്തു | പ്രവർത്തനം { സെലക്ടർ: 'ബോഡി', പാഡിംഗ്: 0 }

ഈ മൂലകത്തിന്റെ പരിധിക്കുള്ളിൽ ടൂൾടിപ്പ് സൂക്ഷിക്കുന്നു. ഉദാഹരണം: viewport: '#viewport'അല്ലെങ്കിൽ{ "selector": "#viewport", "padding": 0 }

ഒരു ഫംഗ്‌ഷൻ നൽകിയിട്ടുണ്ടെങ്കിൽ, ട്രിഗറിംഗ് എലമെന്റ് DOM നോഡ് അതിന്റെ ഏക ആർഗ്യുമെന്റായി അതിനെ വിളിക്കുന്നു. സന്ദർഭം ടൂൾടിപ്പ് ഉദാഹരണമായി thisസജ്ജീകരിച്ചിരിക്കുന്നു.

വ്യക്തിഗത ടൂൾടിപ്പുകൾക്കുള്ള ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ

മുകളിൽ വിശദീകരിച്ചതുപോലെ, വ്യക്തിഗത ടൂൾടിപ്പുകൾക്കുള്ള ഓപ്ഷനുകൾ ഡാറ്റ ആട്രിബ്യൂട്ടുകളുടെ ഉപയോഗത്തിലൂടെ പകരമായി വ്യക്തമാക്കാം.

രീതികൾ

$().tooltip(options)

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

.tooltip('show')

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പ് വെളിപ്പെടുത്തുന്നു. ടൂൾടിപ്പ് യഥാർത്ഥത്തിൽ കാണിക്കുന്നതിന് മുമ്പ് (അതായത് shown.bs.tooltipഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) വിളിക്കുന്നയാളിലേക്ക് മടങ്ങുന്നു. ഇത് ടൂൾടിപ്പിന്റെ "മാനുവൽ" ട്രിഗറിംഗ് ആയി കണക്കാക്കപ്പെടുന്നു. പൂജ്യം നീളമുള്ള ശീർഷകങ്ങളുള്ള ടൂൾടിപ്പുകൾ ഒരിക്കലും പ്രദർശിപ്പിക്കില്ല.

$('#element').tooltip('show')

.tooltip('hide')

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പ് മറയ്ക്കുന്നു. ടൂൾടിപ്പ് യഥാർത്ഥത്തിൽ മറയ്ക്കുന്നതിന് മുമ്പ് (അതായത് hidden.bs.tooltipഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) കോളറിലേക്ക് മടങ്ങുന്നു. ഇത് ടൂൾടിപ്പിന്റെ "മാനുവൽ" ട്രിഗറിംഗ് ആയി കണക്കാക്കപ്പെടുന്നു.

$('#element').tooltip('hide')

.tooltip('toggle')

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പ് ടോഗിൾ ചെയ്യുന്നു. ടൂൾടിപ്പ് യഥാർത്ഥത്തിൽ കാണിക്കുകയോ മറയ്ക്കുകയോ ചെയ്യുന്നതിനുമുമ്പ് (അതായത് shown.bs.tooltipഅല്ലെങ്കിൽ hidden.bs.tooltipഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) വിളിക്കുന്നയാളിലേക്ക് മടങ്ങുന്നു. ഇത് ടൂൾടിപ്പിന്റെ "മാനുവൽ" ട്രിഗറിംഗ് ആയി കണക്കാക്കപ്പെടുന്നു.

$('#element').tooltip('toggle')

.tooltip('destroy')

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പ് മറയ്ക്കുകയും നശിപ്പിക്കുകയും ചെയ്യുന്നു. ഡെലിഗേഷൻ ഉപയോഗിക്കുന്ന ടൂൾടിപ്പുകൾ ( ഓപ്ഷൻ ഉപയോഗിച്ച് സൃഷ്ടിച്ചതാണ്) ഡിസെൻഡന്റ് ട്രിഗർselector ഘടകങ്ങളിൽ വ്യക്തിഗതമായി നശിപ്പിക്കാൻ കഴിയില്ല.

$('#element').tooltip('destroy')

ഇവന്റുകൾ

ഇവന്റ് തരം വിവരണം
show.bs.tooltip showഇൻസ്‌റ്റൻസ് മെത്തേഡ് എന്ന് വിളിക്കുമ്പോൾ ഈ സംഭവം ഉടനടി തീപിടിക്കുന്നു .
കാണിച്ചിരിക്കുന്നു.bs.tooltip ടൂൾടിപ്പ് ഉപയോക്താവിന് ദൃശ്യമാക്കുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (CSS സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
hide.bs.tooltip hideഇൻസ്‌റ്റൻസ് മെത്തേഡ് വിളിച്ചാൽ ഉടൻ തന്നെ ഈ ഇവന്റ് ഫയർ ചെയ്യപ്പെടും.
മറഞ്ഞിരിക്കുന്നു.bs.ടൂൾടിപ്പ് ടൂൾടിപ്പ് ഉപയോക്താവിൽ നിന്ന് മറയ്ക്കുന്നത് പൂർത്തിയാകുമ്പോൾ ഈ ഇവന്റ് ആരംഭിക്കുന്നു (സിഎസ്എസ് സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
inserted.bs.tooltip show.bs.tooltipടൂൾടിപ്പ് ടെംപ്ലേറ്റ് DOM-ൽ ചേർക്കുമ്പോൾ ഇവന്റിന് ശേഷം ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

ശീർഷകവും ഉള്ളടക്കവും പൂജ്യം നീളമുള്ള പോപോവറുകൾ ഒരിക്കലും പ്രദർശിപ്പിക്കില്ല.

പ്ലഗിൻ ഡിപൻഡൻസി

Popovers നിങ്ങളുടെ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പതിപ്പിൽ ടൂൾടിപ്പ് പ്ലഗിൻ ഉൾപ്പെടുത്തേണ്ടതുണ്ട്.

ഓപ്റ്റ്-ഇൻ പ്രവർത്തനം

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

ഒരു പേജിലെ എല്ലാ പോപോവറുകളും ആരംഭിക്കുന്നതിനുള്ള ഒരു മാർഗ്ഗം അവയുടെ data-toggleആട്രിബ്യൂട്ട് അനുസരിച്ച് അവയെ തിരഞ്ഞെടുക്കുന്നതാണ്:

$(function () {
  $('[data-toggle="popover"]').popover()
})

ബട്ടൺ ഗ്രൂപ്പുകൾ, ഇൻപുട്ട് ഗ്രൂപ്പുകൾ, പട്ടികകൾ എന്നിവയിലെ പോപോവറുകൾക്ക് പ്രത്യേക ക്രമീകരണം ആവശ്യമാണ്

.btn-groupa അല്ലെങ്കിൽ an ഉള്ളിലെ ഘടകങ്ങളിൽ അല്ലെങ്കിൽ ടേബിളുമായി .input-groupബന്ധപ്പെട്ട ഘടകങ്ങളിൽ ( <td>, <th>, <tr>, <thead>, ) പോപോവറുകൾ ഉപയോഗിക്കുമ്പോൾ <tbody>, അനാവശ്യ പാർശ്വഫലങ്ങൾ ഒഴിവാക്കാൻ <tfoot>നിങ്ങൾ ഓപ്ഷൻ (ചുവടെ രേഖപ്പെടുത്തി) വ്യക്തമാക്കേണ്ടതുണ്ട് (ഘടകം വിശാലമായി വളരുന്നത് പോലെയുള്ളതും/ container: 'body'അല്ലെങ്കിൽ പോപോവർ ട്രിഗർ ചെയ്യുമ്പോൾ അതിന്റെ വൃത്താകൃതിയിലുള്ള മൂലകൾ നഷ്ടപ്പെടും).

മറഞ്ഞിരിക്കുന്ന ഘടകങ്ങളിൽ പോപോവറുകൾ കാണിക്കാൻ ശ്രമിക്കരുത്

$(...).popover('show')ടാർഗെറ്റ് എലമെന്റ് ആയിരിക്കുമ്പോൾ അഭ്യർത്ഥിക്കുന്നത് പോപോവറിനെ display: none;തെറ്റായി സ്ഥാപിക്കുന്നതിന് കാരണമാകും.

അപ്രാപ്തമാക്കിയ ഘടകങ്ങളിലെ പോപോവറുകൾക്ക് റാപ്പർ ഘടകങ്ങൾ ആവശ്യമാണ്

disabledഒരു പോപോവർ അല്ലെങ്കിൽ .disabledഎലമെന്റിലേക്ക് ഒരു പോപോവർ ചേർക്കാൻ, എയുടെ ഉള്ളിൽ എലമെന്റ് ഇടുക, പകരം <div>പോപോവർ പ്രയോഗിക്കുക .<div>

ഒന്നിലധികം വരി ലിങ്കുകൾ

ഒന്നിലധികം വരികൾ പൊതിയുന്ന ഒരു ഹൈപ്പർലിങ്കിലേക്ക് ചിലപ്പോൾ നിങ്ങൾ ഒരു പോപോവർ ചേർക്കാൻ ആഗ്രഹിക്കുന്നു. പോപോവർ പ്ലഗിന്റെ ഡിഫോൾട്ട് സ്വഭാവം അതിനെ തിരശ്ചീനമായും ലംബമായും കേന്ദ്രീകരിക്കുക എന്നതാണ്. white-space: nowrap;ഇത് ഒഴിവാക്കാൻ നിങ്ങളുടെ ആങ്കറുകളിലേക്ക് ചേർക്കുക .

ഉദാഹരണങ്ങൾ

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

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

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

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

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

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

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

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

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

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

ലൈവ് ഡെമോ

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

നാല് ദിശകൾ

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

അടുത്ത ക്ലിക്കിൽ ഡിസ്മിസ് ചെയ്യുക

focusഉപയോക്താവ് ചെയ്യുന്ന അടുത്ത ക്ലിക്കിൽ പോപോവറുകൾ ഡിസ്മിസ് ചെയ്യാൻ ട്രിഗർ ഉപയോഗിക്കുക .

ഡിസ്മിസ്-ഓൺ-അടുത്ത-ക്ലിക്കിന് പ്രത്യേക മാർക്ക്അപ്പ് ആവശ്യമാണ്

ശരിയായ ക്രോസ്-ബ്രൗസറിനും ക്രോസ്-പ്ലാറ്റ്ഫോം പെരുമാറ്റത്തിനും, നിങ്ങൾ ടാഗ് ഉപയോഗിക്കണം, <a>ടാഗ് അല്ല , <button>കൂടാതെ നിങ്ങൾ ആട്രിബ്യൂട്ടുകളും ഉൾപ്പെടുത്തണം role="button".tabindex

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

ഉപയോഗം

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

$('#example').popover(options)

ഓപ്ഷനുകൾ

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

പേര് ടൈപ്പ് ചെയ്യുക സ്ഥിരസ്ഥിതി വിവരണം
ആനിമേഷൻ ബൂളിയൻ സത്യം പോപ്പോവറിലേക്ക് ഒരു CSS ഫേഡ് ട്രാൻസിഷൻ പ്രയോഗിക്കുക
കണ്ടെയ്നർ ചരട് | തെറ്റായ തെറ്റായ

ഒരു നിർദ്ദിഷ്ട ഘടകത്തിലേക്ക് പോപോവർ കൂട്ടിച്ചേർക്കുന്നു. ഉദാഹരണം: container: 'body'. ട്രിഗറിംഗ് എലമെന്റിന് സമീപം ഡോക്യുമെന്റിന്റെ ഒഴുക്കിൽ പോപോവർ സ്ഥാപിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നതിനാൽ ഈ ഓപ്ഷൻ പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ് - ഇത് വിൻഡോ വലുപ്പം മാറ്റുമ്പോൾ ട്രിഗറിംഗ് എലമെന്റിൽ നിന്ന് പൊപ്പോവറിനെ തടയും.

ഉള്ളടക്കം ചരട് | പ്രവർത്തനം ''

data-contentആട്രിബ്യൂട്ട് ഇല്ലെങ്കിൽ ഡിഫോൾട്ട് ഉള്ളടക്ക മൂല്യം .

ഒരു ഫംഗ്‌ഷൻ നൽകിയാൽ, thisപോപ്പോവർ ഘടിപ്പിച്ചിരിക്കുന്ന ഘടകത്തിലേക്ക് അതിന്റെ റഫറൻസ് സജ്ജീകരിച്ച് അതിനെ വിളിക്കും.

കാലതാമസം നമ്പർ | വസ്തു 0

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

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

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

html ബൂളിയൻ തെറ്റായ പോപോവറിൽ HTML ചേർക്കുക. തെറ്റാണെങ്കിൽ, textDOM-ൽ ഉള്ളടക്കം ചേർക്കാൻ jQuery-യുടെ രീതി ഉപയോഗിക്കും. XSS ആക്രമണങ്ങളെക്കുറിച്ച് നിങ്ങൾക്ക് ആശങ്കയുണ്ടെങ്കിൽ ടെക്സ്റ്റ് ഉപയോഗിക്കുക.
പ്ലേസ്മെന്റ് ചരട് | പ്രവർത്തനം 'ശരി'

പോപോവർ എങ്ങനെ സ്ഥാപിക്കാം - മുകളിൽ | താഴെ | വിട്ടു | വലത് | ഓട്ടോ.
"ഓട്ടോ" വ്യക്തമാക്കുമ്പോൾ, അത് പോപ്പോവറിനെ ചലനാത്മകമായി പുനഃക്രമീകരിക്കും. ഉദാഹരണത്തിന്, പ്ലെയ്‌സ്‌മെന്റ് "ഓട്ടോ ലെഫ്റ്റ്" ആണെങ്കിൽ, പോപോവർ സാധ്യമാകുമ്പോൾ ഇടത്തേക്ക് പ്രദർശിപ്പിക്കും, അല്ലാത്തപക്ഷം അത് വലത് വശത്ത് പ്രദർശിപ്പിക്കും.

പ്ലെയ്‌സ്‌മെന്റ് നിർണ്ണയിക്കാൻ ഒരു ഫംഗ്‌ഷൻ ഉപയോഗിക്കുമ്പോൾ, അതിനെ പോപ്പോവർ DOM നോഡ് അതിന്റെ ആദ്യ ആർഗ്യുമെന്റായും ട്രിഗറിംഗ് എലമെന്റ് DOM നോഡ് അതിന്റെ രണ്ടാമത്തേയും ആയി വിളിക്കുന്നു. സന്ദർഭം പോപോവർ thisസംഭവത്തിലേക്ക് സജ്ജീകരിച്ചിരിക്കുന്നു.

സെലക്ടർ സ്ട്രിംഗ് തെറ്റായ ഒരു സെലക്ടർ നൽകിയിട്ടുണ്ടെങ്കിൽ, നിർദ്ദിഷ്ട ടാർഗെറ്റുകളിലേക്ക് പോപ്പോവർ ഒബ്‌ജക്റ്റുകൾ ഡെലിഗേറ്റ് ചെയ്യപ്പെടും. പ്രായോഗികമായി, പോപ്പോവറുകൾ ചേർക്കുന്നതിന് ഡൈനാമിക് HTML ഉള്ളടക്കം പ്രവർത്തനക്ഷമമാക്കാൻ ഇത് ഉപയോഗിക്കുന്നു. ഇതും വിജ്ഞാനപ്രദമായ ഒരു ഉദാഹരണവും കാണുക .
ടെംപ്ലേറ്റ് സ്ട്രിംഗ് '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

പോപ്പോവർ സൃഷ്ടിക്കുമ്പോൾ ഉപയോഗിക്കേണ്ട അടിസ്ഥാന HTML.

പോപ്പോവറുകൾ titleഎന്നതിലേക്ക് കുത്തിവയ്ക്കും .popover-title.

പോപ്പോവറുകൾ contentഎന്നതിലേക്ക് കുത്തിവയ്ക്കും .popover-content.

.arrowപോപോവറിന്റെ അസ്ത്രമായി മാറും.

ഏറ്റവും പുറത്തെ റാപ്പർ ഘടകത്തിന് .popoverക്ലാസ് ഉണ്ടായിരിക്കണം.

തലക്കെട്ട് ചരട് | പ്രവർത്തനം ''

titleആട്രിബ്യൂട്ട് ഇല്ലെങ്കിൽ ഡിഫോൾട്ട് ശീർഷക മൂല്യം .

ഒരു ഫംഗ്‌ഷൻ നൽകിയാൽ, thisപോപ്പോവർ ഘടിപ്പിച്ചിരിക്കുന്ന ഘടകത്തിലേക്ക് അതിന്റെ റഫറൻസ് സജ്ജീകരിച്ച് അതിനെ വിളിക്കും.

ട്രിഗർ സ്ട്രിംഗ് 'ക്ലിക്ക്' പോപോവർ എങ്ങനെയാണ് ട്രിഗർ ചെയ്യുന്നത് - ക്ലിക്ക് | ഹോവർ | ഫോക്കസ് | മാനുവൽ. നിങ്ങൾക്ക് ഒന്നിലധികം ട്രിഗറുകൾ കടന്നുപോകാം; ഒരു സ്പേസ് ഉപയോഗിച്ച് അവയെ വേർതിരിക്കുക. manualമറ്റേതെങ്കിലും ട്രിഗറുമായി സംയോജിപ്പിക്കാൻ കഴിയില്ല.
വ്യൂപോർട്ട് ചരട് | വസ്തു | പ്രവർത്തനം { സെലക്ടർ: 'ബോഡി', പാഡിംഗ്: 0 }

ഈ മൂലകത്തിന്റെ പരിധിക്കുള്ളിൽ പോപോവർ നിലനിർത്തുന്നു. ഉദാഹരണം: viewport: '#viewport'അല്ലെങ്കിൽ{ "selector": "#viewport", "padding": 0 }

ഒരു ഫംഗ്‌ഷൻ നൽകിയിട്ടുണ്ടെങ്കിൽ, ട്രിഗറിംഗ് എലമെന്റ് DOM നോഡ് അതിന്റെ ഏക ആർഗ്യുമെന്റായി അതിനെ വിളിക്കുന്നു. സന്ദർഭം പോപോവർ thisസംഭവത്തിലേക്ക് സജ്ജീകരിച്ചിരിക്കുന്നു.

വ്യക്തിഗത പോപോവറുകൾക്കുള്ള ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ

മുകളിൽ വിശദീകരിച്ചത് പോലെ, വ്യക്തിഗത പോപ്പോവറുകൾക്കുള്ള ഓപ്ഷനുകൾ ഡാറ്റ ആട്രിബ്യൂട്ടുകളുടെ ഉപയോഗത്തിലൂടെ പകരമായി വ്യക്തമാക്കാം.

രീതികൾ

$().popover(options)

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

.popover('show')

ഒരു മൂലകത്തിന്റെ പോപോവർ വെളിപ്പെടുത്തുന്നു. പോപോവർ യഥാർത്ഥത്തിൽ കാണിക്കുന്നതിന് മുമ്പ് (അതായത് shown.bs.popoverഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) വിളിക്കുന്നയാളിലേക്ക് മടങ്ങുന്നു. ഇത് പോപോവറിന്റെ "മാനുവൽ" ട്രിഗറിംഗ് ആയി കണക്കാക്കപ്പെടുന്നു. ശീർഷകവും ഉള്ളടക്കവും പൂജ്യം നീളമുള്ള പോപോവറുകൾ ഒരിക്കലും പ്രദർശിപ്പിക്കില്ല.

$('#element').popover('show')

.popover('hide')

ഒരു മൂലകത്തിന്റെ പോപോവർ മറയ്ക്കുന്നു. പോപോവർ യഥാർത്ഥത്തിൽ മറയ്ക്കുന്നതിന് മുമ്പ് (അതായത് hidden.bs.popoverഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) വിളിക്കുന്നയാളിലേക്ക് മടങ്ങുന്നു. ഇത് പോപോവറിന്റെ "മാനുവൽ" ട്രിഗറിംഗ് ആയി കണക്കാക്കപ്പെടുന്നു.

$('#element').popover('hide')

.popover('toggle')

ഒരു മൂലകത്തിന്റെ പോപോവർ ടോഗിൾ ചെയ്യുന്നു. പോപോവർ യഥാർത്ഥത്തിൽ കാണിക്കുകയോ മറയ്ക്കുകയോ ചെയ്യുന്നതിനുമുമ്പ് (അതായത് shown.bs.popoverഅല്ലെങ്കിൽ hidden.bs.popoverഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) വിളിക്കുന്നയാളിലേക്ക് മടങ്ങുന്നു. ഇത് പോപോവറിന്റെ "മാനുവൽ" ട്രിഗറിംഗ് ആയി കണക്കാക്കപ്പെടുന്നു.

$('#element').popover('toggle')

.popover('destroy')

ഒരു മൂലകത്തിന്റെ പോപോവർ മറയ്ക്കുകയും നശിപ്പിക്കുകയും ചെയ്യുന്നു. ഡെലിഗേഷൻ ഉപയോഗിക്കുന്ന പോപോവറുകൾ ( ഓപ്‌ഷൻ ഉപയോഗിച്ച് സൃഷ്‌ടിച്ചവ )selector ഡിസെൻഡന്റ് ട്രിഗർ ഘടകങ്ങളിൽ വ്യക്തിഗതമായി നശിപ്പിക്കാൻ കഴിയില്ല.

$('#element').popover('destroy')

ഇവന്റുകൾ

ഇവന്റ് തരം വിവരണം
show.bs.popover showഇൻസ്‌റ്റൻസ് മെത്തേഡ് എന്ന് വിളിക്കുമ്പോൾ ഈ സംഭവം ഉടനടി തീപിടിക്കുന്നു .
കാണിച്ചിരിക്കുന്നു.bs.popover പോപോവർ ഉപയോക്താവിന് ദൃശ്യമാകുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (സിഎസ്എസ് സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
hide.bs.popover hideഇൻസ്‌റ്റൻസ് മെത്തേഡ് വിളിച്ചാൽ ഉടൻ തന്നെ ഈ ഇവന്റ് ഫയർ ചെയ്യപ്പെടും.
മറഞ്ഞിരിക്കുന്നു.bs.popover പോപോവർ ഉപയോക്താവിൽ നിന്ന് മറച്ചത് പൂർത്തിയാകുമ്പോൾ ഈ ഇവന്റ് ആരംഭിക്കുന്നു (സിഎസ്എസ് സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
insert.bs.popover show.bs.popoverDOM-ലേക്ക് പോപോവർ ടെംപ്ലേറ്റ് ചേർത്തപ്പോൾ ഇവന്റിന് ശേഷം ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

മുന്നറിയിപ്പ് സന്ദേശങ്ങൾ alert.js

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

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

ഒരു .closeബട്ടൺ ഉപയോഗിക്കുമ്പോൾ, അത് ആദ്യത്തെ കുട്ടിയായിരിക്കണം കൂടാതെ .alert-dismissibleമാർക്ക്അപ്പിൽ ടെക്‌സ്‌റ്റ് ഉള്ളടക്കമൊന്നും വരാൻ പാടില്ല.

ഉപയോഗം

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

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

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

രീതികൾ

$().alert()

data-dismiss="alert"ആട്രിബ്യൂട്ട് ഉള്ള ഡിസെൻഡന്റ് എലമെന്റുകളിൽ ക്ലിക്ക് ഇവന്റുകൾ കേൾക്കാൻ ഒരു അലേർട്ട് ഉണ്ടാക്കുന്നു . (ഡാറ്റാ-എപിഐയുടെ ഓട്ടോ-ഇനീഷ്യലൈസേഷൻ ഉപയോഗിക്കുമ്പോൾ ആവശ്യമില്ല.)

$().alert('close')

DOM-ൽ നിന്ന് നീക്കം ചെയ്തുകൊണ്ട് ഒരു അലേർട്ട് അടയ്‌ക്കുന്നു. എലമെന്റിൽ ക്ലാസുകളും ഉണ്ടെങ്കിൽ, .fadeഅത് .inനീക്കം ചെയ്യുന്നതിനുമുമ്പ് അലേർട്ട് മങ്ങിപ്പോകും.

ഇവന്റുകൾ

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

ഇവന്റ് തരം വിവരണം
close.bs.alert closeഇൻസ്‌റ്റൻസ് മെത്തേഡ് എന്ന് വിളിക്കുമ്പോൾ ഈ സംഭവം ഉടനടി തീപിടിക്കുന്നു .
അടച്ചു.bs.അലേർട്ട് അലേർട്ട് അടച്ചുകഴിഞ്ഞാൽ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (സിഎസ്എസ് സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

ബട്ടണുകൾ button.js

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

ക്രോസ് ബ്രൗസർ അനുയോജ്യത

പേജ് ലോഡുകളിലുടനീളം ഫയർഫോക്സ് ഫോം കൺട്രോൾ സ്റ്റേറ്റുകൾ (വൈകല്യവും പരിശോധനയും) തുടരുന്നു . ഇതിനുള്ള ഒരു പരിഹാരമാർഗ്ഗം ഉപയോഗിക്കുക എന്നതാണ് autocomplete="off". മോസില്ല ബഗ് #654072 കാണുക .

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

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

ഈ ഫീച്ചർ v3.3.5 മുതൽ ഒഴിവാക്കുകയും v4-ൽ നീക്കം ചെയ്യുകയും ചെയ്തു.

നിങ്ങൾ ഇഷ്ടപ്പെടുന്ന സംസ്ഥാനം ഉപയോഗിക്കുക!

ഈ പ്രകടനത്തിന് വേണ്ടി, ഞങ്ങൾ ഉപയോഗിക്കുന്നത് data-loading-textകൂടാതെ $().button('loading'), എന്നാൽ അത് നിങ്ങൾക്ക് ഉപയോഗിക്കാനാകുന്ന ഒരേയൊരു അവസ്ഥയല്ല. ഡോക്യുമെന്റേഷനിൽ ഇതിനെക്കുറിച്ച് കൂടുതൽ കാണുക$().button(string) .

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

ഒറ്റ ടോഗിൾ

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

മുൻകൂട്ടി ടോഗിൾ ചെയ്‌ത ബട്ടണുകൾ ആവശ്യമാണ്.active ആവശ്യമാണ്aria-pressed="true"

.activeമുൻകൂട്ടി ടോഗിൾ ചെയ്‌ത ബട്ടണുകൾക്കായി, നിങ്ങൾ ക്ലാസും aria-pressed="true"ആട്രിബ്യൂട്ടും ചേർക്കണം button.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

ചെക്ക്ബോക്സ് / റേഡിയോ

അതത് ശൈലികളിൽ ടോഗിൾ ചെയ്യുന്നത് പ്രവർത്തനക്ഷമമാക്കാൻ അടങ്ങുന്ന ചെക്ക്ബോക്സിലേക്കോ റേഡിയോ ഇൻപുട്ടുകളിലേക്കോ ചേർക്കുക data-toggle="buttons"..btn-group

മുൻകൂട്ടി തിരഞ്ഞെടുത്ത ഓപ്ഷനുകൾ ആവശ്യമാണ്.active

.activeമുൻകൂട്ടി തിരഞ്ഞെടുത്ത ഓപ്ഷനുകൾക്കായി, നിങ്ങൾ തന്നെ ഇൻപുട്ടിലേക്ക് ക്ലാസ് ചേർക്കണം label.

വിഷ്വൽ ചെക്ക്ഡ് സ്റ്റേറ്റ് ക്ലിക്കിൽ മാത്രം അപ്ഡേറ്റ് ചെയ്യുന്നു

ഒരു ചെക്ക്ബോക്‌സ് ബട്ടണിന്റെ ചെക്ക് ചെയ്‌ത നില ബട്ടണിൽ ഒരു clickഇവന്റ് ഫയർ ചെയ്യാതെ അപ്‌ഡേറ്റ് ചെയ്‌തിട്ടുണ്ടെങ്കിൽ (ഉദാ: ഇൻപുട്ടിന്റെ പ്രോപ്പർട്ടി <input type="reset">സജ്ജീകരിക്കുന്നതിലൂടെയോ വഴിയോ ), നിങ്ങൾ ഇൻപുട്ടിലെ ക്ലാസ് സ്വയം checkedടോഗിൾ ചെയ്യേണ്ടതുണ്ട് ..activelabel

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

രീതികൾ

$().button('toggle')

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

$().button('reset')

ബട്ടൺ നില പുനഃസജ്ജമാക്കുന്നു - വാചകം യഥാർത്ഥ വാചകത്തിലേക്ക് മാറ്റുന്നു. ഈ രീതി അസമന്വിതമാണ്, പുനഃസജ്ജീകരണം യഥാർത്ഥത്തിൽ പൂർത്തിയാകുന്നതിന് മുമ്പായി മടങ്ങുന്നു.

$().button(string)

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

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

ചുരുക്കുക. js

എളുപ്പത്തിലുള്ള ടോഗിൾ പെരുമാറ്റത്തിനായി ഒരുപിടി ക്ലാസുകൾ ഉപയോഗിക്കുന്ന ഫ്ലെക്സിബിൾ പ്ലഗിൻ.

പ്ലഗിൻ ഡിപൻഡൻസി

ചുരുക്കുന്നതിന് നിങ്ങളുടെ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പതിപ്പിൽ സംക്രമണ പ്ലഗിൻ ഉൾപ്പെടുത്തേണ്ടതുണ്ട്.

ഉദാഹരണം

ക്ലാസ് മാറ്റങ്ങളിലൂടെ മറ്റൊരു ഘടകം കാണിക്കാനും മറയ്ക്കാനും താഴെയുള്ള ബട്ടണുകളിൽ ക്ലിക്ക് ചെയ്യുക:

  • .collapseഉള്ളടക്കം മറയ്ക്കുന്നു
  • .collapsingപരിവർത്തന സമയത്ത് പ്രയോഗിക്കുന്നു
  • .collapse.inഉള്ളടക്കം കാണിക്കുന്നു

നിങ്ങൾക്ക് ആട്രിബ്യൂട്ട് ഉള്ള ഒരു ലിങ്ക് hrefഅല്ലെങ്കിൽ ആട്രിബ്യൂട്ട് ഉള്ള ഒരു ബട്ടൺ ഉപയോഗിക്കാം data-target. രണ്ട് സാഹചര്യങ്ങളിലും, data-toggle="collapse"അത് ആവശ്യമാണ്.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

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

പാനൽ ഘടകത്തിനൊപ്പം ഒരു അക്കോഡിയൻ സൃഷ്‌ടിക്കാൻ ഡിഫോൾട്ട് ചുരുക്കൽ സ്വഭാവം വിപുലീകരിക്കുക.

അനിം പരിയാതുർ ക്ലീഷെ റിപ്രെഹെൻഡറിറ്റ്, എനിം ഐയുസ്‌മോഡ് ഹൈ ലൈഫ് അക്‌സാമസ് ടെറി റിച്ചാർഡ്‌സൺ ആഡ് സ്ക്വിഡ്. 3 വുൾഫ് മൂൺ ഒഫീഷ്യ ഓട്ട്, നോൺ കുപിഡാറ്ററ്റ് സ്കേറ്റ്ബോർഡ് ഡോളർ ബ്രഞ്ച്. ഫുഡ് ട്രക്ക് quinoa nesciunt labour eiusmod. ബ്രഞ്ച് 3 വുൾഫ് മൂൺ ടെമ്പർ, സൺറ്റ് അലിക്വ അതിൽ ഒരു പക്ഷിയെ ഇട്ടു കണവ സിംഗിൾ ഒറിജിൻ കോഫി നുള്ള അസ്സുമെൻഡ ഷോർഡിച്ച് എറ്റ്. നിഹിൽ ആനിം കെഫിയെ ഹെൽവെറ്റിക്ക, ക്രാഫ്റ്റ് ബിയർ ലേബർ വെസ് ആൻഡേഴ്സൺ ക്രെഡ് നെസ്സിയന്റ് സാപിയന്റ് ഇഎ പ്രൊഡന്റ്. പരസ്യ സസ്യാഹാരം ഒഴിവാക്കുന്ന കശാപ്പ് വൈസ് ലോമോ. ലെഗ്ഗിംഗ്‌സ് ഒക്കേകാറ്റ് ക്രാഫ്റ്റ് ബിയർ ഫാം-ടു-ടേബിൾ, റോ ഡെനിം സൗന്ദര്യാത്മക സിന്ത് നെസ്‌സിയന്റ് നിങ്ങൾ അവയെക്കുറിച്ച് കേട്ടിരിക്കാനിടയില്ല.
അനിം പരിയാതുർ ക്ലീഷെ റിപ്രെഹെൻഡറിറ്റ്, എനിം ഐയുസ്‌മോഡ് ഹൈ ലൈഫ് അക്‌സാമസ് ടെറി റിച്ചാർഡ്‌സൺ ആഡ് സ്ക്വിഡ്. 3 വുൾഫ് മൂൺ ഒഫീഷ്യ ഓട്ട്, നോൺ കുപിഡാറ്ററ്റ് സ്കേറ്റ്ബോർഡ് ഡോളർ ബ്രഞ്ച്. ഫുഡ് ട്രക്ക് quinoa nesciunt labour eiusmod. ബ്രഞ്ച് 3 വുൾഫ് മൂൺ ടെമ്പർ, സൺറ്റ് അലിക്വ അതിൽ ഒരു പക്ഷിയെ ഇട്ടു കണവ സിംഗിൾ ഒറിജിൻ കോഫി നുള്ള അസ്സുമെൻഡ ഷോർഡിച്ച് എറ്റ്. നിഹിൽ ആനിം കെഫിയെ ഹെൽവെറ്റിക്ക, ക്രാഫ്റ്റ് ബിയർ ലേബർ വെസ് ആൻഡേഴ്സൺ ക്രെഡ് നെസ്സിയന്റ് സാപിയന്റ് ഇഎ പ്രൊഡന്റ്. പരസ്യ സസ്യാഹാരം ഒഴിവാക്കുന്ന കശാപ്പ് വൈസ് ലോമോ. ലെഗ്ഗിംഗ്‌സ് ഒക്കേകാറ്റ് ക്രാഫ്റ്റ് ബിയർ ഫാം-ടു-ടേബിൾ, റോ ഡെനിം സൗന്ദര്യാത്മക സിന്ത് നെസ്‌സിയന്റ് നിങ്ങൾ അവയെക്കുറിച്ച് കേട്ടിരിക്കാനിടയില്ല.
അനിം പരിയാതുർ ക്ലീഷെ റിപ്രെഹെൻഡറിറ്റ്, എനിം ഐയുസ്‌മോഡ് ഹൈ ലൈഫ് അക്‌സാമസ് ടെറി റിച്ചാർഡ്‌സൺ ആഡ് സ്ക്വിഡ്. 3 വുൾഫ് മൂൺ ഒഫീഷ്യ ഓട്ട്, നോൺ കുപിഡാറ്ററ്റ് സ്കേറ്റ്ബോർഡ് ഡോളർ ബ്രഞ്ച്. ഫുഡ് ട്രക്ക് quinoa nesciunt labour eiusmod. ബ്രഞ്ച് 3 വുൾഫ് മൂൺ ടെമ്പർ, സൺറ്റ് അലിക്വ അതിൽ ഒരു പക്ഷിയെ ഇട്ടു കണവ സിംഗിൾ ഒറിജിൻ കോഫി നുള്ള അസ്സുമെൻഡ ഷോർഡിച്ച് എറ്റ്. നിഹിൽ ആനിം കെഫിയെ ഹെൽവെറ്റിക്ക, ക്രാഫ്റ്റ് ബിയർ ലേബർ വെസ് ആൻഡേഴ്സൺ ക്രെഡ് നെസ്സിയന്റ് സാപിയന്റ് ഇഎ പ്രൊഡന്റ്. പരസ്യ സസ്യാഹാരം ഒഴിവാക്കുന്ന കശാപ്പ് വൈസ് ലോമോ. ലെഗ്ഗിംഗ്‌സ് ഒക്കേകാറ്റ് ക്രാഫ്റ്റ് ബിയർ ഫാം-ടു-ടേബിൾ, റോ ഡെനിം സൗന്ദര്യാത്മക സിന്ത് നെസ്‌സിയന്റ് നിങ്ങൾ അവയെക്കുറിച്ച് കേട്ടിരിക്കാനിടയില്ല.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

.panel-bodys ഉപയോഗിച്ച് s മാറ്റാനും സാധിക്കും .list-group.

  • ബൂട്ട്പ്ലൈ
  • ഒരു ഇറ്റ്മസ് എസി ഫാസിലിൻ
  • രണ്ടാം എറോസ്

വിപുലീകരിക്കുക/ചുരുക്കുക നിയന്ത്രണങ്ങൾ ആക്സസ് ചെയ്യാവുന്നതാക്കുക

aria-expandedനിയന്ത്രണ ഘടകത്തിലേക്ക് ചേർക്കുന്നത് ഉറപ്പാക്കുക . ഈ ആട്രിബ്യൂട്ട് സ്‌ക്രീൻ റീഡറുകളിലേക്കും സമാനമായ അസിസ്റ്റീവ് സാങ്കേതികവിദ്യകളിലേക്കും പൊളിക്കാവുന്ന ഘടകത്തിന്റെ നിലവിലെ അവസ്ഥയെ വ്യക്തമായി നിർവചിക്കുന്നു. പൊളിക്കാവുന്ന ഘടകം സ്ഥിരസ്ഥിതിയായി അടച്ചിട്ടുണ്ടെങ്കിൽ, അതിന് ഒരു മൂല്യം ഉണ്ടായിരിക്കണം aria-expanded="false". inക്ലാസ് ഉപയോഗിച്ച് ഡിഫോൾട്ടായി തുറക്കാവുന്ന തരത്തിൽ പൊളിക്കാവുന്ന ഘടകം നിങ്ങൾ സജ്ജീകരിച്ചിട്ടുണ്ടെങ്കിൽ, aria-expanded="true"പകരം നിയന്ത്രണത്തിൽ സജ്ജീകരിക്കുക. പൊളിക്കാവുന്ന ഘടകം തുറന്നോ അടച്ചോ എന്നതിനെ അടിസ്ഥാനമാക്കി പ്ലഗിൻ ഈ ആട്രിബ്യൂട്ട് സ്വയമേവ ടോഗിൾ ചെയ്യും.

കൂടാതെ, നിങ്ങളുടെ നിയന്ത്രണ ഘടകം ലക്ഷ്യമിടുന്നത് ഒരു പൊളിക്കാവുന്ന ഘടകത്തെയാണ് - അതായത്, data-targetആട്രിബ്യൂട്ട് ഒരു സെലക്ടറിലേക്കാണ് വിരൽ ചൂണ്ടുന്നതെങ്കിൽ - നിങ്ങൾക്ക് നിയന്ത്രണ ഘടകത്തിലേക്ക് idഒരു അധിക ആട്രിബ്യൂട്ട് ചേർക്കാവുന്നതാണ് , അതിൽ പൊളിക്കാവുന്ന ഘടകം അടങ്ങിയിരിക്കുന്നു. ആധുനിക സ്‌ക്രീൻ റീഡറുകളും സമാനമായ അസിസ്റ്റീവ് ടെക്‌നോളജികളും ഈ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് ഉപയോക്താക്കൾക്ക് തകരാവുന്ന ഘടകത്തിലേക്ക് നേരിട്ട് നാവിഗേറ്റ് ചെയ്യുന്നതിനുള്ള അധിക കുറുക്കുവഴികൾ നൽകുന്നു.aria-controlsid

ഉപയോഗം

ഭാരോദ്വഹനം കൈകാര്യം ചെയ്യാൻ തകർച്ച പ്ലഗിൻ കുറച്ച് ക്ലാസുകൾ ഉപയോഗിക്കുന്നു:

  • .collapseഉള്ളടക്കം മറയ്ക്കുന്നു
  • .collapse.inഉള്ളടക്കം കാണിക്കുന്നു
  • .collapsingപരിവർത്തനം ആരംഭിക്കുമ്പോൾ ചേർക്കുന്നു, അത് പൂർത്തിയാകുമ്പോൾ നീക്കംചെയ്യുന്നു

ഈ ക്ലാസുകൾ കാണാവുന്നതാണ് component-animations.less.

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

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

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

JavaScript വഴി

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

$('.collapse').collapse()

ഓപ്ഷനുകൾ

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

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

രീതികൾ

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

കാണിക്കുന്നതോ മറച്ചതോ ആയ ഒരു പൊളിക്കാവുന്ന ഘടകം ടോഗിൾ ചെയ്യുന്നു. പൊളിക്കാവുന്ന ഘടകം യഥാർത്ഥത്തിൽ കാണിക്കുകയോ മറയ്ക്കുകയോ ചെയ്യുന്നതിനുമുമ്പ് (അതായത് shown.bs.collapseഅല്ലെങ്കിൽ hidden.bs.collapseഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) വിളിക്കുന്നയാളിലേക്ക് മടങ്ങുന്നു.

.collapse('show')

തകർക്കാവുന്ന ഒരു ഘടകം കാണിക്കുന്നു. പൊളിക്കാവുന്ന ഘടകം യഥാർത്ഥത്തിൽ കാണിക്കുന്നതിന് മുമ്പ് (അതായത് shown.bs.collapseഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) കോളറിലേക്ക് മടങ്ങുന്നു.

.collapse('hide')

പൊളിക്കാവുന്ന ഘടകം മറയ്ക്കുന്നു. പൊളിക്കാവുന്ന ഘടകം യഥാർത്ഥത്തിൽ മറയ്ക്കുന്നതിന് മുമ്പ് (അതായത് hidden.bs.collapseഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) കോളറിലേക്ക് മടങ്ങുന്നു.

ഇവന്റുകൾ

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

ഇവന്റ് തരം വിവരണം
show.bs.collapse showഇൻസ്‌റ്റൻസ് മെത്തേഡ് എന്ന് വിളിക്കുമ്പോൾ ഈ സംഭവം ഉടനടി തീപിടിക്കുന്നു .
കാണിച്ചിരിക്കുന്നു.bs.തകർച്ച ഒരു തകർച്ച ഘടകം ഉപയോക്താവിന് ദൃശ്യമാകുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (CSS സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
hide.bs.collapse hideരീതി വിളിച്ചപ്പോൾ ഈ സംഭവം ഉടനടി വെടിവയ്ക്കുന്നു .
മറഞ്ഞിരിക്കുന്നു.bs.തകർച്ച ഉപയോക്താവിൽ നിന്ന് ഒരു തകർച്ച ഘടകം മറച്ചിരിക്കുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (CSS സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

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

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ഓപ്ഷണൽ അടിക്കുറിപ്പുകൾ

.carousel-captionഏതെങ്കിലുമൊരു ഘടകം ഉപയോഗിച്ച് നിങ്ങളുടെ സ്ലൈഡുകളിലേക്ക് അടിക്കുറിപ്പുകൾ ചേർക്കുക .item. ഏതെങ്കിലും ഓപ്ഷണൽ HTML അവിടെ സ്ഥാപിക്കുക, അത് സ്വയമേവ വിന്യസിക്കുകയും ഫോർമാറ്റ് ചെയ്യുകയും ചെയ്യും.

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

ഒന്നിലധികം കറൗസലുകൾ

കറൗസൽ നിയന്ത്രണങ്ങൾ ശരിയായി പ്രവർത്തിക്കുന്നതിന്, കറൗസലുകൾക്ക് idപുറത്തെ കണ്ടെയ്നർ (ദി ) ഉപയോഗിക്കേണ്ടതുണ്ട്. .carouselഒന്നിലധികം കറൗസലുകൾ ചേർക്കുമ്പോൾ, അല്ലെങ്കിൽ ഒരു കറൗസൽ മാറ്റുമ്പോൾ id, പ്രസക്തമായ നിയന്ത്രണങ്ങൾ അപ്‌ഡേറ്റ് ചെയ്യുന്നത് ഉറപ്പാക്കുക.

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

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

പേജ് ലോഡ് മുതൽ ആനിമേറ്റിംഗ് ആയി ഒരു കറൗസൽ data-ride="carousel"അടയാളപ്പെടുത്താൻ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു. ഒരേ കറൗസലിന്റെ (അനാവശ്യവും അനാവശ്യവും) സ്പഷ്ടമായ JavaScript ഇനീഷ്യലൈസേഷനുമായി സംയോജിച്ച് ഇത് ഉപയോഗിക്കാൻ കഴിയില്ല.

JavaScript വഴി

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

$('.carousel').carousel()

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

പേര് തരം സ്ഥിരസ്ഥിതി വിവരണം
ഇടവേള നമ്പർ 5000 ഒരു ഇനം സ്വയമേവ സൈക്കിൾ ചവിട്ടുന്നതിന് ഇടയിലുള്ള കാലതാമസം. തെറ്റാണെങ്കിൽ, കറൗസൽ സ്വയമേവ സൈക്കിൾ ചെയ്യില്ല.
താൽക്കാലികമായി നിർത്തുക ചരട് | ശൂന്യം "ഹോവർ" ആയി സജ്ജമാക്കിയാൽ "hover", കറൗസലിന്റെ സൈക്ലിംഗ് താൽക്കാലികമായി നിർത്തുകയും കറൗസലിന്റെ സൈക്ലിംഗ് ഓൺ mouseenterപുനരാരംഭിക്കുകയും ചെയ്യുന്നു mouseleave. എന്ന് സജ്ജീകരിച്ചാൽ null, കറൗസലിന് മുകളിലൂടെ ഹോവർ ചെയ്യുന്നത് താൽക്കാലികമായി നിർത്തില്ല.
പൊതിയുക ബൂളിയൻ സത്യം കറൗസൽ തുടർച്ചയായി സൈക്കിൾ വേണോ അതോ ഹാർഡ് സ്റ്റോപ്പുകൾ വേണോ എന്ന്.
കീബോർഡ് ബൂളിയൻ സത്യം കീബോർഡ് ഇവന്റുകളോട് കറൗസൽ പ്രതികരിക്കണമോ എന്ന്.

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

$('.carousel').carousel({
  interval: 2000
})

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

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

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

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

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

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

രണ്ട് ഇവന്റുകൾക്കും ഇനിപ്പറയുന്ന അധിക ഗുണങ്ങളുണ്ട്:

  • direction: കറൗസൽ സ്ലൈഡുചെയ്യുന്ന ദിശ (ഒന്നുകിൽ "left"അല്ലെങ്കിൽ "right").
  • relatedTarget: സജീവ ഇനമായി സ്ലൈഡ് ചെയ്യുന്ന DOM ഘടകം.

എല്ലാ കറൗസൽ പരിപാടികളും കറൗസലിൽ തന്നെ (അതായത് ) വെടിവയ്ക്കുന്നു <div class="carousel">.

ഇവന്റ് തരം വിവരണം
slide.bs.carousel slideഇൻസ്‌റ്റൻസ് മെത്തേഡ് ഉപയോഗിക്കുമ്പോൾ ഈ ഇവന്റ് ഉടനടി തീപിടിക്കുന്നു .
slid.bs.carousel കറൗസൽ അതിന്റെ സ്ലൈഡ് ട്രാൻസിഷൻ പൂർത്തിയാകുമ്പോൾ ഈ ഇവന്റ് ഫയർ ചെയ്യുന്നു.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

അഫിക്സ് affix.js

ഉദാഹരണം

ഉപയോഗിച്ച് കണ്ടെത്തിയ ഇഫക്റ്റ് അനുകരിച്ചുകൊണ്ട് affix പ്ലഗിൻ position: fixed;ഓണും ഓഫും ടോഗിൾ ചെയ്യുന്നു position: sticky;. വലതുവശത്തുള്ള ഉപനാവിഗേഷൻ അഫിക്സ് പ്ലഗിന്റെ ഒരു തത്സമയ ഡെമോയാണ്.


ഉപയോഗം

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴിയോ നിങ്ങളുടെ സ്വന്തം ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് സ്വമേധയാ അഫിക്സ് പ്ലഗിൻ ഉപയോഗിക്കുക. രണ്ട് സാഹചര്യങ്ങളിലും, നിങ്ങളുടെ ഒട്ടിച്ചിരിക്കുന്ന ഉള്ളടക്കത്തിന്റെ സ്ഥാനനിർണ്ണയത്തിനും വീതിക്കും നിങ്ങൾ CSS നൽകണം.

ശ്രദ്ധിക്കുക: Safari റെൻഡറിംഗ് ബഗ് കാരണം, വലിച്ചിട്ടതോ തള്ളിയിട്ടതോ ആയ കോളം പോലെയുള്ള താരതമ്യേന സ്ഥാനമുള്ള ഘടകത്തിൽ അടങ്ങിയിരിക്കുന്ന ഒരു ഘടകത്തിൽ അഫിക്സ് പ്ലഗിൻ ഉപയോഗിക്കരുത് .

CSS വഴി സ്ഥാനനിർണ്ണയം

അഫിക്സ് പ്ലഗിൻ മൂന്ന് ക്ലാസുകൾക്കിടയിൽ ടോഗിൾ ചെയ്യുന്നു, ഓരോന്നും ഒരു പ്രത്യേക അവസ്ഥയെ പ്രതിനിധീകരിക്കുന്നു: .affix, .affix-top, കൂടാതെ .affix-bottom. യഥാർത്ഥ സ്ഥാനങ്ങൾ കൈകാര്യം ചെയ്യുന്നതിനായി നിങ്ങൾ ഈ ക്ലാസുകൾക്ക് (ഈ പ്ലഗിൻ സ്വതന്ത്രമായി) position: fixed;ഓൺ ഒഴികെയുള്ള ശൈലികൾ നൽകണം ..affix

അഫിക്സ് പ്ലഗിൻ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് ഇതാ:

  1. ആരംഭിക്കുന്നതിന്, .affix-topഘടകം അതിന്റെ ഏറ്റവും ഉയർന്ന സ്ഥാനത്താണെന്ന് സൂചിപ്പിക്കാൻ പ്ലഗിൻ ചേർക്കുന്നു. ഈ ഘട്ടത്തിൽ CSS സ്ഥാനനിർണ്ണയം ആവശ്യമില്ല.
  2. നിങ്ങൾ ഘടിപ്പിക്കാൻ ആഗ്രഹിക്കുന്ന ഘടകത്തിന് മുകളിലൂടെ സ്ക്രോൾ ചെയ്യുന്നത് യഥാർത്ഥ അഫിക്സിംഗ് പ്രവർത്തനക്ഷമമാക്കും. ഇവിടെയാണ് .affixമാറ്റിസ്ഥാപിക്കുകയും .affix-topസജ്ജീകരിക്കുകയും position: fixed;ചെയ്യുന്നത് (ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS നൽകുന്നത്).
  3. താഴെയുള്ള ഒരു ഓഫ്‌സെറ്റ് നിർവചിച്ചിട്ടുണ്ടെങ്കിൽ, അതിനെ സ്ക്രോൾ ചെയ്യുമ്പോൾ അത് .affixമാറ്റിസ്ഥാപിക്കേണ്ടതാണ് .affix-bottom. ഓഫ്‌സെറ്റുകൾ ഓപ്‌ഷണൽ ആയതിനാൽ, ഒന്ന് സജ്ജീകരിക്കുന്നതിന് നിങ്ങൾ ഉചിതമായ CSS സജ്ജീകരിക്കേണ്ടതുണ്ട്. ഈ സാഹചര്യത്തിൽ, position: absolute;ആവശ്യമുള്ളപ്പോൾ ചേർക്കുക. പ്ലഗിൻ ഡാറ്റ ആട്രിബ്യൂട്ട് അല്ലെങ്കിൽ JavaScript ഓപ്ഷൻ ഉപയോഗിക്കുന്നു, അവിടെ നിന്ന് എലമെന്റ് എവിടെ സ്ഥാപിക്കണമെന്ന് നിർണ്ണയിക്കുന്നു.

ചുവടെയുള്ള ഏതെങ്കിലും ഉപയോഗ ഓപ്‌ഷനുകൾക്കായി നിങ്ങളുടെ CSS സജ്ജീകരിക്കുന്നതിന് മുകളിലുള്ള ഘട്ടങ്ങൾ പാലിക്കുക.

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

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

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

JavaScript വഴി

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

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

ഓപ്ഷനുകൾ

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

പേര് തരം സ്ഥിരസ്ഥിതി വിവരണം
ഓഫ്സെറ്റ് നമ്പർ | പ്രവർത്തനം | വസ്തു 10 സ്ക്രോളിന്റെ സ്ഥാനം കണക്കാക്കുമ്പോൾ സ്ക്രീനിൽ നിന്ന് ഓഫ്സെറ്റ് ചെയ്യാനുള്ള പിക്സലുകൾ. ഒരൊറ്റ നമ്പർ നൽകിയാൽ, മുകളിലേക്കും താഴേക്കും രണ്ട് ദിശകളിലും ഓഫ്‌സെറ്റ് പ്രയോഗിക്കും. അദ്വിതീയമായ, താഴെയും മുകളിലും ഓഫ്‌സെറ്റ് നൽകാൻ ഒരു ഒബ്‌ജക്റ്റ് നൽകുക offset: { top: 10 }അല്ലെങ്കിൽ offset: { top: 10, bottom: 5 }. നിങ്ങൾക്ക് ഒരു ഓഫ്‌സെറ്റ് ചലനാത്മകമായി കണക്കാക്കേണ്ടിവരുമ്പോൾ ഒരു ഫംഗ്ഷൻ ഉപയോഗിക്കുക.
ലക്ഷ്യം സെലക്ടർ | നോഡ് | jQuery ഘടകം windowവസ്തു _ അഫിക്സിൻറെ ടാർഗെറ്റ് ഘടകം വ്യക്തമാക്കുന്നു.

രീതികൾ

.affix(options)

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

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

പ്രസക്തമായ ഘടകങ്ങളുടെ അളവുകൾ, സ്ഥാനം, സ്ക്രോൾ സ്ഥാനം എന്നിവ അടിസ്ഥാനമാക്കി അഫിക്സിന്റെ അവസ്ഥ വീണ്ടും കണക്കാക്കുന്നു. , .affix, ക്ലാസുകൾ എന്നിവ പുതിയ അവസ്ഥയ്ക്ക് അനുസൃതമായി ഒട്ടിച്ചിരിക്കുന്ന ഉള്ളടക്കത്തിലേക്ക് ചേർക്കുകയോ നീക്കം ചെയ്യുകയോ ചെയ്യുന്നു .affix-top. .affix-bottomഒട്ടിച്ച ഉള്ളടക്കത്തിന്റെ ശരിയായ സ്ഥാനനിർണ്ണയം ഉറപ്പാക്കാൻ, ഒട്ടിച്ച ഉള്ളടക്കത്തിന്റെ അളവുകൾ അല്ലെങ്കിൽ ടാർഗെറ്റ് ഘടകത്തിന്റെ അളവുകൾ മാറ്റുമ്പോഴെല്ലാം ഈ രീതി വിളിക്കേണ്ടതുണ്ട്.

$('#myAffix').affix('checkPosition')

ഇവന്റുകൾ

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

ഇവന്റ് തരം വിവരണം
affix.bs.affix ഘടകം ഘടിപ്പിക്കുന്നതിന് തൊട്ടുമുമ്പ് ഈ ഇവന്റ് ഫയർ ചെയ്യുന്നു.
affixed.bs.affix മൂലകം ഒട്ടിച്ചതിന് ശേഷം ഈ ഇവന്റ് വെടിവയ്ക്കുന്നു.
affix-top.bs.affix മൂലകം ഒട്ടിക്കുന്നതിന് തൊട്ടുമുമ്പ് ഈ ഇവന്റ് ഫയർ ചെയ്യുന്നു.
affixed-top.bs.affix എലമെന്റ് ടോപ്പ് ഒട്ടിച്ചതിന് ശേഷം ഈ ഇവന്റ് തീർക്കുന്നു.
affix-bottom.bs.affix മൂലകം അടിയിൽ ഒട്ടിക്കുന്നതിന് തൊട്ടുമുമ്പ് ഈ ഇവന്റ് ഫയർ ചെയ്യുന്നു.
affixed-bottom.bs.affix എലമെന്റ് അടിയിൽ ഒട്ടിച്ചതിന് ശേഷമാണ് ഈ സംഭവം നടക്കുന്നത്.