അവലോകനം

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

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

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

ജാവാസ്ക്രിപ്റ്റിന്റെ ഒരു വരി പോലും എഴുതാതെ തന്നെ മാർക്ക്അപ്പ് 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
})

സാനിറ്റൈസർ

ടൂൾടിപ്പുകളും പോപ്പോവറുകളും HTML സ്വീകരിക്കുന്ന ഓപ്‌ഷനുകൾ സാനിറ്റൈസ് ചെയ്യാൻ ഞങ്ങളുടെ ബിൽറ്റ്-ഇൻ സാനിറ്റൈസർ ഉപയോഗിക്കുന്നു.

സ്ഥിരസ്ഥിതി whiteListമൂല്യം ഇനിപ്പറയുന്നതാണ്:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

whiteListഈ ഡിഫോൾട്ടിലേക്ക് നിങ്ങൾക്ക് പുതിയ മൂല്യങ്ങൾ ചേർക്കണമെങ്കിൽ ഇനിപ്പറയുന്നവ ചെയ്യാം:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

ഒരു സമർപ്പിത ലൈബ്രറി ഉപയോഗിക്കാൻ നിങ്ങൾ ഇഷ്ടപ്പെടുന്നതിനാൽ ഞങ്ങളുടെ സാനിറ്റൈസർ മറികടക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഉദാഹരണത്തിന് DOMPurify , നിങ്ങൾ ഇനിപ്പറയുന്നവ ചെയ്യണം:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

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

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

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

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

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

സംക്രമണങ്ങൾ 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

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

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>

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

മോഡലുകൾക്ക് രണ്ട് ഓപ്‌ഷണൽ വലുപ്പങ്ങളുണ്ട്, അവയിൽ സ്ഥാപിക്കാൻ മോഡിഫയർ ക്ലാസുകൾ വഴി ലഭ്യമാണ് .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" 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" 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=""

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

രീതികൾ

.modal(options)

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

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

.modal('toggle')

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

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

.modal('show')

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

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

.modal('hide')

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

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

.modal('handleUpdate')

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

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

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

ഇവന്റുകൾ

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

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

$('#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()

ഓപ്ഷനുകൾ

ഒന്നുമില്ല

രീതികൾ

$().dropdown('toggle')

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

ഇവന്റുകൾ

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

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

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

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

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

ഉപയോഗം

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

നടപ്പിലാക്കൽ രീതി എന്തുതന്നെയായാലും, 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=""

ഇവന്റുകൾ

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

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

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

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

ഉപയോഗം

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പ്രവർത്തനക്ഷമവുമാകില്ല.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

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

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

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

ഉദാഹരണങ്ങൾ

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

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

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

നാല് ദിശകൾ

<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>

$(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>

ഓപ്ഷനുകൾ

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

രീതികൾ

$().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')

ഇവന്റുകൾ

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

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

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

ഉദാഹരണങ്ങൾ

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

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

ലൈവ് ഡെമോ

<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 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=""

രീതികൾ

$().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')

ഇവന്റുകൾ

$('#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നീക്കം ചെയ്യുന്നതിനുമുമ്പ് അലേർട്ട് മങ്ങിപ്പോകും.

ഇവന്റുകൾ

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

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

ബട്ടണുകൾ button.js

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

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

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

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

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

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

ഒറ്റ ടോഗിൾ

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

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

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

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

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

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

രീതികൾ

$().button('toggle')

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

$().button('reset')

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

$().button(string)

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

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary">
  ...
</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"അത് ആവശ്യമാണ്.

<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>

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

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

<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.

ഉപയോഗം

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

• .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=""

രീതികൾ

.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ഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്) കോളറിലേക്ക് മടങ്ങുന്നു.

ഇവന്റുകൾ

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

$('#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 അവിടെ സ്ഥാപിക്കുക, അത് സ്വയമേവ വിന്യസിക്കുകയും ഫോർമാറ്റ് ചെയ്യുകയും ചെയ്യും.

ആദ്യ സ്ലൈഡ് ലേബൽ

Nulla vitae elit libero, a pharetra ague mollis interdum.

രണ്ടാമത്തെ സ്ലൈഡ് ലേബൽ

ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്.

മൂന്നാമത്തെ സ്ലൈഡ് ലേബൽ

പ്രെസെന്റ് കോമോഡോ കർസസ് മാഗ്ന, അല്ലെങ്കിൽ സ്കെലെറിസ്ക് നിസ്ൽ കൺസെക്റ്റേറ്റർ.

മുമ്പത്തെ അടുത്തത്

<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=""

രീതികൾ

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

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

.carousel('next')

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

ഇവന്റുകൾ

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

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

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

എല്ലാ കറൗസൽ പരിപാടികളും കറൗസലിൽ തന്നെ (അതായത് ) വെടിവയ്ക്കുന്നു <div class="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"

രീതികൾ

.affix(options)

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

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

.affix('checkPosition')

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

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

ഇവന്റുകൾ

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