கண்ணோட்டம்

தனிப்பட்ட அல்லது தொகுக்கப்பட்ட

செருகுநிரல்கள் தனித்தனியாக சேர்க்கப்படலாம் (பூட்ஸ்டார்ப்பின் தனிப்பட்ட *.jsகோப்புகளைப் பயன்படுத்தி), அல்லது அனைத்தையும் ஒரே நேரத்தில் (பயன்படுத்துதல் bootstrap.jsஅல்லது minified bootstrap.min.js).

தொகுக்கப்பட்ட ஜாவாஸ்கிரிப்டைப் பயன்படுத்துதல்

இரண்டும் bootstrap.jsஒரே bootstrap.min.jsகோப்பில் அனைத்து செருகுநிரல்களையும் கொண்டிருக்கும். ஒன்றை மட்டும் சேர்க்கவும்.

செருகுநிரல் சார்புகள்

சில செருகுநிரல்கள் மற்றும் CSS கூறுகள் மற்ற செருகுநிரல்களைப் பொறுத்தது. நீங்கள் தனித்தனியாக செருகுநிரல்களைச் சேர்த்தால், ஆவணத்தில் இந்த சார்புகளை சரிபார்க்கவும். அனைத்து செருகுநிரல்களும் jQuery சார்ந்து இருப்பதையும் கவனத்தில் கொள்ளவும் (இதன் பொருள் சொருகி கோப்புகளுக்கு முன் jQuery சேர்க்கப்பட வேண்டும்). jQuery இன் எந்த பதிப்புகள் ஆதரிக்கப்படுகின்றன என்பதைப் பார்க்க, எங்களைப் பார்க்கவும்.bower.json

தரவு பண்புக்கூறுகள்

ஜாவாஸ்கிரிப்ட்டின் ஒரு வரி கூட எழுதாமல் மார்க்அப் ஏபிஐ மூலம் அனைத்து பூட்ஸ்டார்ப் செருகுநிரல்களையும் நீங்கள் பயன்படுத்தலாம். இது பூட்ஸ்டார்ப்பின் முதல்-வகுப்பு API ஆகும், மேலும் செருகுநிரலைப் பயன்படுத்தும் போது உங்கள் முதல் கருத்தில் இருக்க வேண்டும்.

சில சூழ்நிலைகளில் இந்த செயல்பாட்டை முடக்குவது விரும்பத்தக்கதாக இருக்கலாம். எனவே, உடன் பெயரிடப்பட்ட ஆவணத்தில் உள்ள அனைத்து நிகழ்வுகளையும் பிணைப்பதன் மூலம் தரவு பண்புக்கூறு API ஐ முடக்கும் திறனையும் நாங்கள் வழங்குகிறோம் data-api. இது போல் தெரிகிறது:

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

மாற்றாக, ஒரு குறிப்பிட்ட செருகுநிரலை குறிவைக்க, இது போன்ற தரவு-ஏபிஐ பெயர்வெளியுடன் சொருகியின் பெயரை ஒரு பெயர்வெளியாகச் சேர்க்கவும்:

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

தரவு பண்புக்கூறுகள் வழியாக ஒரு உறுப்புக்கு ஒரு செருகுநிரல் மட்டுமே

ஒரே உறுப்பில் பல செருகுநிரல்களிலிருந்து தரவு பண்புக்கூறுகளைப் பயன்படுத்த வேண்டாம். எடுத்துக்காட்டாக, ஒரு பொத்தானில் உதவிக்குறிப்பு மற்றும் மாதிரியை மாற்ற முடியாது. இதைச் செய்ய, ஒரு மடக்கு உறுப்பைப் பயன்படுத்தவும்.

நிரல் API

ஜாவாஸ்கிரிப்ட் 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

மோதல் இல்லை

சில நேரங்களில் மற்ற UI கட்டமைப்புகளுடன் பூட்ஸ்டார்ப் செருகுநிரல்களைப் பயன்படுத்துவது அவசியம். இந்த சூழ்நிலைகளில், பெயர்வெளி மோதல்கள் அவ்வப்போது நிகழலாம். .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
})

பதிப்பு எண்கள்

VERSIONபூட்ஸ்டார்ப்பின் ஒவ்வொரு jQuery செருகுநிரல்களின் பதிப்பையும் செருகுநிரல் கட்டமைப்பாளரின் சொத்து வழியாக அணுகலாம் . எடுத்துக்காட்டாக, உதவிக்குறிப்பு செருகுநிரலுக்கு:

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

ஜாவாஸ்கிரிப்ட் முடக்கப்பட்டிருக்கும் போது சிறப்பு குறைப்புக்கள் இல்லை

ஜாவாஸ்கிரிப்ட் முடக்கப்பட்டிருக்கும் போது பூட்ஸ்டார்ப்பின் செருகுநிரல்கள் குறிப்பாக அழகாக பின்வாங்குவதில்லை. இந்தச் சந்தர்ப்பத்தில் பயனர் அனுபவத்தைப் பற்றி நீங்கள் அக்கறை கொண்டால் <noscript>, உங்கள் பயனர்களுக்கு நிலைமையை (மற்றும் JavaScript ஐ எவ்வாறு மீண்டும் இயக்குவது) என்பதை விளக்கவும், மற்றும்/அல்லது உங்கள் சொந்த தனிப்பயன் ஃபால்பேக்குகளைச் சேர்க்கவும்.

மூன்றாம் தரப்பு நூலகங்கள்

முன்மாதிரி அல்லது jQuery UI போன்ற மூன்றாம் தரப்பு ஜாவாஸ்கிரிப்ட் நூலகங்களை பூட்ஸ்டார்ப் அதிகாரப்பூர்வமாக ஆதரிக்காது . இருந்தாலும் .noConflict, பெயரிடப்பட்ட நிகழ்வுகள், நீங்கள் சொந்தமாக சரிசெய்ய வேண்டிய இணக்கத்தன்மை சிக்கல்கள் இருக்கலாம்.

மாற்றங்கள் transition.js

மாற்றங்கள் பற்றி

எளிய மாறுதல் விளைவுகளுக்கு, transition.jsமற்ற JS கோப்புகளுடன் ஒருமுறை சேர்க்கவும். நீங்கள் தொகுக்கப்பட்ட (அல்லது சிறியதாக) பயன்படுத்தினால் bootstrap.js, இதை சேர்க்க வேண்டிய அவசியமில்லை - இது ஏற்கனவே உள்ளது.

உள்ளே என்ன இருக்கிறது

Transition.js என்பது transitionEndநிகழ்வுகளுக்கான அடிப்படை உதவியாளர் மற்றும் CSS மாற்றம் முன்மாதிரி ஆகும். இது மற்ற செருகுநிரல்களால் CSS மாற்றத்திற்கான ஆதரவைச் சரிபார்க்கவும் மற்றும் தொங்கும் மாற்றங்களைப் பிடிக்கவும் பயன்படுத்தப்படுகிறது.

மாற்றங்களை முடக்குகிறது

பின்வரும் ஜாவாஸ்கிரிப்ட் துணுக்கைப் பயன்படுத்தி மாற்றங்களை உலகளவில் முடக்கலாம், இது ஏற்றப்பட்ட பிறகு transition.js(அல்லது bootstrap.js, அல்லது ) வர வேண்டும்:bootstrap.min.js

$.support.transition = false

மாதிரிகள் modal.js

மாதிரிகள் நெறிப்படுத்தப்பட்ட, ஆனால் நெகிழ்வான, குறைந்தபட்ச தேவையான செயல்பாடுகள் மற்றும் ஸ்மார்ட் இயல்புநிலைகளுடன் உரையாடல் கேட்கும்.

பல திறந்த மாதிரிகள் ஆதரிக்கப்படவில்லை

மற்றொன்று இன்னும் தெரியும் போது ஒரு மாதிரியைத் திறக்க வேண்டாம். ஒரே நேரத்தில் ஒன்றுக்கும் மேற்பட்ட மாதிரிகளைக் காட்ட தனிப்பயன் குறியீடு தேவை.

மாதிரி மார்க்அப் இடம்

மாதிரியின் தோற்றம் மற்றும்/அல்லது செயல்பாட்டைப் பாதிக்கும் பிற கூறுகளைத் தவிர்க்க உங்கள் ஆவணத்தில் ஒரு மாதிரியின் HTML குறியீட்டை எப்போதும் உயர்நிலை நிலையில் வைக்க முயற்சிக்கவும்.

மொபைல் சாதன எச்சரிக்கைகள்

மொபைல் சாதனங்களில் மாடல்களைப் பயன்படுத்துவதில் சில எச்சரிக்கைகள் உள்ளன. விவரங்களுக்கு எங்கள் உலாவி ஆதரவு ஆவணத்தைப் பார்க்கவும்.

HTML5 அதன் சொற்பொருளை எவ்வாறு வரையறுக்கிறது என்பதன் காரணமாக, autofocusHTML பண்புக்கூறு பூட்ஸ்டார்ப் மாதிரிகளில் எந்த விளைவையும் ஏற்படுத்தாது. அதே விளைவை அடைய, சில தனிப்பயன் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தவும்:

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

நேரடி டெமோ

கீழே உள்ள பொத்தானைக் கிளிக் செய்வதன் மூலம் ஜாவாஸ்கிரிப்ட் வழியாக ஒரு மாதிரியை மாற்றவும். அது கீழே சரிந்து பக்கத்தின் மேலிருந்து மங்கிவிடும்.

<!-- 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="...", மாடல் தலைப்பைக் குறிப்பிடுவது, க்கு .modal, மற்றும் அதனுடன் சேர்க்க role="document"வேண்டும் .modal-dialog.

கூடுதலாக, உங்கள் மாதிரி உரையாடலின் விளக்கத்தை on உடன் aria-describedbyகொடுக்கலாம் .modal.

YouTube வீடியோக்களை உட்பொதித்தல்

யூடியூப் வீடியோக்களை மாடல்களில் உட்பொதிக்க, பிளேபேக் மற்றும் பலவற்றை தானாகவே நிறுத்த, பூட்ஸ்டார்ப்பில் இல்லாத ஜாவாஸ்கிரிப்ட் தேவை. மேலும் தகவலுக்கு இந்த பயனுள்ள ஸ்டாக் ஓவர்ஃப்ளோ இடுகையைப் பார்க்கவும்.

விருப்ப அளவுகள்

மாதிரிகள் இரண்டு விருப்ப அளவுகளைக் கொண்டுள்ளன, அவை மாற்றியமைக்கும் வகுப்புகள் மூலம் கிடைக்கின்றன .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 -->

சற்று வித்தியாசமான உள்ளடக்கங்களுடன், ஒரே மாதிரியைத் தூண்டும் பொத்தான்களின் கொத்து உள்ளதா? எந்த பொத்தான் கிளிக் செய்யப்பட்டது என்பதைப் பொறுத்து மாதிரியின் உள்ளடக்கங்களை மாற்ற event.relatedTarget, HTML data-*பண்புக்கூறுகள் (ஒருவேளை jQuery வழியாக இருக்கலாம்) பயன்படுத்தவும். விவரங்களுக்கு மாதிரி நிகழ்வுகள் ஆவணத்தைப் பார்க்கவும் 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)
})

பயன்பாடு

மாதிரி சொருகி, தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் உங்கள் மறைக்கப்பட்ட உள்ளடக்கத்தை தேவைக்கேற்ப மாற்றுகிறது. இது இயல்புநிலை ஸ்க்ரோலிங் நடத்தையை மேலெழுதச் சேர்க்கிறது மற்றும் .modal-openமாதிரிக்கு வெளியே கிளிக் செய்யும் போது காட்டப்படும் மாடல்களை நிராகரிப்பதற்கான ஒரு கிளிக் பகுதியை உருவாக்குகிறது.<body>.modal-backdrop

தரவு பண்புக்கூறுகள் மூலம்

ஜாவாஸ்கிரிப்ட் எழுதாமல் ஒரு மாதிரியை இயக்கவும். data-toggle="modal"ஒரு பொத்தான் போன்ற ஒரு கட்டுப்படுத்தி உறுப்பை அமைக்கவும் data-target="#foo"அல்லது href="#foo"ஒரு குறிப்பிட்ட மாதிரியை குறிவைத்து மாற்றவும்.

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

ஜாவாஸ்கிரிப்ட் வழியாக

myModalஜாவாஸ்கிரிப்ட்டின் ஒற்றை வரியுடன் ஐடியுடன் ஒரு மாதிரியை அழைக்கவும் :

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

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். 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நிகழ்வின் சொத்தாகக் கிடைக்கும்.
காட்டப்பட்டுள்ளது.பிஎஸ்.மாதிரி மாடல் பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்). ஒரு கிளிக் காரணமாக ஏற்பட்டால், கிளிக் செய்யப்பட்ட உறுப்பு relatedTargetநிகழ்வின் சொத்தாகக் கிடைக்கும்.
hide.bs.modal hideநிகழ்வு முறை அழைக்கப்பட்டவுடன் இந்த நிகழ்வு உடனடியாக நீக்கப்படும் .
மறைக்கப்பட்ட.bs.மாதிரி மாடல் பயனரிடமிருந்து மறைத்து முடிந்ததும் இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
loaded.bs.modal remoteவிருப்பத்தைப் பயன்படுத்தி மாடல் உள்ளடக்கத்தை ஏற்றும்போது இந்த நிகழ்வு நீக்கப்படும் .
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

கீழிறங்கும் dropdown.js

navbar, தாவல்கள் மற்றும் மாத்திரைகள் உட்பட, இந்த எளிய செருகுநிரல் மூலம் ஏறக்குறைய எதையும் கீழ்தோன்றும் மெனுக்களைச் சேர்க்கவும்.

ஒரு நவ்பாருக்குள்

மாத்திரைகளுக்குள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் வழியாக, கீழ்தோன்றும் செருகுநிரல் .openபெற்றோர் பட்டியல் உருப்படியில் வகுப்பை மாற்றுவதன் மூலம் மறைக்கப்பட்ட உள்ளடக்கத்தை (கீழே கீழிறங்கும் மெனுக்கள்) மாற்றுகிறது.

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

ஜாவாஸ்கிரிப்ட் வழியாக

ஜாவாஸ்கிரிப்ட் வழியாக கீழ்தோன்றல்களை அழைக்கவும்:

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

data-toggle="dropdown"இன்னும் தேவை

ஜாவாஸ்கிரிப்ட் வழியாக உங்கள் கீழ்தோன்றும் அழைப்பு அல்லது அதற்குப் பதிலாக டேட்டா-ஏபிஐப் பயன்படுத்தினாலும், டிராப் data-toggle="dropdown"டவுன் தூண்டுதல் உறுப்பில் எப்போதும் இருக்க வேண்டும்.

இல்லை

கொடுக்கப்பட்ட navbar அல்லது டேப் செய்யப்பட்ட வழிசெலுத்தலின் கீழ்தோன்றும் மெனுவை நிலைமாற்றுகிறது.

கீழ்தோன்றும் நிகழ்வுகள் அனைத்தும் .dropdown-menu'இன் பெற்றோர் உறுப்பின் மீது செலுத்தப்படுகின்றன.

அனைத்து கீழ்தோன்றும் நிகழ்வுகளுக்கும் ஒரு relatedTargetசொத்து உள்ளது, அதன் மதிப்பு நிலைமாற்ற ஆங்கர் உறுப்பு ஆகும்.

நிகழ்வு வகை விளக்கம்
show.bs. கீழிறக்கம் நிகழ்ச்சி நிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாகத் தொடங்குகிறது.
காட்டப்பட்டுள்ளது.பி.எஸ்.கீழே கீழ்தோன்றும் பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (சிஎஸ்எஸ் மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
hide.bs.கீழே மறை நிகழ்வு முறை அழைக்கப்பட்டவுடன் இந்த நிகழ்வு உடனடியாக நீக்கப்படும்.
மறைக்கப்பட்ட.பி.எஸ்.கீழே கீழ்தோன்றும் பயனரிடமிருந்து மறைத்து முடிந்ததும் இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடியும் வரை காத்திருக்கும்).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

navbar இல் உதாரணம்

ஸ்க்ரோல்ஸ்பை செருகுநிரல் ஸ்க்ரோல் பொசிஷனின் அடிப்படையில் நாவ் இலக்குகளை தானாக புதுப்பிப்பதற்கானது. navbarக்கு கீழே உள்ள பகுதியை ஸ்க்ரோல் செய்து செயலில் உள்ள வகுப்பு மாற்றத்தைப் பார்க்கவும். கீழ்தோன்றும் துணை உருப்படிகளும் முன்னிலைப்படுத்தப்படும்.

@கொழுப்பு

விளம்பர லெகிங்ஸ் கீதார், புருன்ச் ஐடி ஆர்ட் பார்ட்டி டோலர் லேபர். Pitchfork yr enim lo-fi அவர்கள் qui விற்கப்படுவதற்கு முன்பு. Tumblr பண்ணை-டேபிள் சைக்கிள் உரிமை எதுவாக இருந்தாலும். அனிம் கெஃபியே கார்லஸ் கார்டிகன். வெலிட் சீடன் மெக்ஸ்வீனியின் புகைப்படச் சாவடி 3 ஓநாய் சந்திரன் இருரே. காஸ்பி ஸ்வெட்டர் லோமோ ஜீன் ஷார்ட்ஸ், வில்லியம்ஸ்பர்க் ஹூடி மினிம் க்யூ நீங்கள் அவற்றைப் பற்றி கேள்விப்பட்டிருக்க மாட்டீர்கள் மற்றும் கார்டிகன் டிரஸ்ட் ஃபண்ட் கல்பா பயோடீசல் வெஸ் ஆண்டர்சன் அழகியல். நிஹில் பச்சை குத்தப்பட்ட குற்றச்சாட்டு, க்ரெட் ஐரனி பயோடீசல் கெஃபியே கைவினைஞர் உள்ளம்கோ விளைவு.

@mdo

வேனியம் மார்ஃபா மீசை ஸ்கேட்போர்டு, அடிபிசிசிங் ஃபுஜியாட் வேலிட் பிட்ச்போர்க் தாடி. ஃப்ரீகன் தாடி அலிக்வா குபிடாடட் மெக்ஸ்வீனியின் வெரோ. க்யூபிடாடட் ஃபோர் லோகோ நிசி, ஈ ஹெல்வெடிகா நுல்லா கார்ல்ஸ். பச்சை குத்தப்பட்ட காஸ்பி ஸ்வெட்டர் உணவு டிரக், mcsweeney's quis non freegan vinyl. லோ-ஃபை வெஸ் ஆண்டர்சன் +1 சார்டோரியல். கார்ல்ஸ் அழகியல் அல்லாத உடற்பயிற்சிகளை ஜென்ட்ரிஃபை செய்கிறார். புரூக்ளின் அடிபிசிசிங் கிராஃப்ட் பீர் வைஸ் கீட்டர் டெஸரண்ட்.

ஒன்று

ஒக்கேகேட் கொமோடோ அலிக்வா டெக்டஸ். ஃபேப் கிராஃப்ட் பீர் டெஸரண்ட் ஸ்கேட்போர்டு ஈ.ஏ. லோமோ சைக்கிள் உரிமைகள் அடிபிசிசிங் பான் மை, வெலிட் ஈ சன்ட் நெக்ஸ்ட் லெவல் லோகாவோர் சிங்கிள் ஆரிஜின் காபி இன் மேக்னா வேனியம். ஹை லைஃப் ஐடி வினைல், எக்கோ பார்க் கான்செக்வாட் க்விஸ் அலிகிப் பான் மை பிட்ச்ஃபோர்க். வெரோ விஎச்எஸ் ஆடிபிசிசிங். 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. Locavore sed helvetica cliche Irony, thundercats அவர்களைப் பற்றி நீங்கள் கேள்விப்பட்டிருக்க வாய்ப்பில்லை, ஹூடி க்ளூட்டன்-ஃப்ரீ லோ-ஃபை ஃபாப் அலிகிப். லேபர் எலிட் ப்ளேஸ்அட் அவர்கள் விற்றுத் தீரும் முன், டெர்ரி ரிச்சர்ட்சன் ப்ரோடென்ட் புருஞ்ச் நெஸ்சியன்ட் க்விஸ் காஸ்பி ஸ்வெட்டர் பாரியடுர் கெஃபியே அட் ஹெல்வெடிகா ஆர்டிசன். கார்டிகன் கிராஃப்ட் பீர் சீடன் ரெடிமேட் வெலிட். VHS சாம்ப்ரே லேபரிஸ் டெம்பர் வெனியம். அனிம் மோலிட் மினிம் கொமோடோ உள்ளம்கோ இடிமுழக்கம்.

பயன்பாடு

பூட்ஸ்டார்ப் nav தேவை

ஸ்க்ரோல்ஸ்பிக்கு தற்போது பூட்ஸ்டார்ப் நேவ் கூறுகளை பயன்படுத்தி செயலில் உள்ள இணைப்புகளை சரியான முறையில் முன்னிலைப்படுத்த வேண்டும்.

தீர்க்கக்கூடிய அடையாள இலக்குகள் தேவை

Navbar இணைப்புகள் தீர்க்கக்கூடிய ஐடி இலக்குகளைக் கொண்டிருக்க வேண்டும். எடுத்துக்காட்டாக, <a href="#home">home</a>DOM இல் உள்ள ஒன்றைப் போன்றவற்றுடன் ஒத்திருக்க வேண்டும் <div id="home"></div>.

இலக்கு அல்லாத :visibleகூறுகள் புறக்கணிக்கப்பட்டது

:visiblejQuery இன் படி இல்லாத இலக்கு கூறுகள் புறக்கணிக்கப்படும் மற்றும் அவற்றின் தொடர்புடைய nav உருப்படிகள் ஒருபோதும் முன்னிலைப்படுத்தப்படாது.

தொடர்புடைய நிலைப்பாடு தேவை

செயல்படுத்தும் முறை எதுவாக இருந்தாலும், position: relative;நீங்கள் உளவு பார்க்கும் உறுப்பை ஸ்க்ரோல்ஸ்பை பயன்படுத்த வேண்டும். பெரும்பாலான சந்தர்ப்பங்களில் இது <body>. தவிர மற்ற உறுப்புகளை ஸ்க்ரோல்ஸ்பை செய்யும் போது <body>, ​​ஒரு heightசெட் மற்றும் overflow-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>

ஜாவாஸ்கிரிப்ட் வழியாக

உங்கள் CSS இல் சேர்த்த பிறகு position: relative;, JavaScript வழியாக scrollspy ஐ அழைக்கவும்:

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

முறைகள்

.scrollspy('refresh')

DOM இலிருந்து உறுப்புகளைச் சேர்ப்பது அல்லது அகற்றுவதுடன் இணைந்து ஸ்க்ரோல்ஸ்பையைப் பயன்படுத்தும் போது, ​​நீங்கள் புதுப்பிப்பு முறையை இப்படி அழைக்க வேண்டும்:

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

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். data-தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-offset="".

பெயர் வகை இயல்புநிலை விளக்கம்
ஆஃப்செட் எண் 10 ஸ்க்ரோலின் நிலையைக் கணக்கிடும்போது மேலே இருந்து ஆஃப்செட் செய்ய வேண்டிய பிக்சல்கள்.

நிகழ்வுகள்

நிகழ்வு வகை விளக்கம்
activate.bs.scrollspy ஸ்க்ரோல்ஸ்பை மூலம் ஒரு புதிய உருப்படி செயல்படுத்தப்படும் போதெல்லாம் இந்த நிகழ்வு சுடுகிறது.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

மாற்றக்கூடிய தாவல்கள் tab.js

எடுத்துக்காட்டு தாவல்கள்

கீழ்தோன்றும் மெனுக்கள் வழியாகவும், உள்ளூர் உள்ளடக்கத்தின் பலகங்கள் வழியாக மாறுவதற்கு விரைவான, மாறும் தாவல் செயல்பாட்டைச் சேர்க்கவும். உள்ளமைக்கப்பட்ட தாவல்கள் ஆதரிக்கப்படவில்லை.

ரா டெனிம் ஜீன் ஷார்ட்ஸ் ஆஸ்டின் பற்றி நீங்கள் கேள்விப்பட்டிருக்க மாட்டீர்கள். Nesciunt டோஃபு ஸ்டம்ப்டவுன் அலிக்கா, ரெட்ரோ சின்த் மாஸ்டர் க்ளென்ஸ். மீசை கிளிச் டெம்பர், வில்லியம்ஸ்பர்க் கார்ல்ஸ் சைவ ஹெல்வெடிகா. கசாப்புக் கடை ரெட்ரோ கெஃபியே ட்ரீம்கேட்சர் சின்தைக் கண்டறிதல். காஸ்பி ஸ்வெட்டர் eu banh mi, qui irure Terry Richardson ex squid. சால்வியா சிலம் ஐபோனை அலிகிப் பிளேஸ். Seitan aliquip quis கார்டிகன் அமெரிக்கன் ஆடை, கசாப்பு voluptate nisi qui.

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.

தாவல் வழிசெலுத்தலை நீட்டிக்கிறது

இந்த சொருகி, டேப் செய்யக்கூடிய பகுதிகளைச் சேர்க்க , தாவலாக்கப்பட்ட வழிசெலுத்தல் கூறுகளை நீட்டிக்கிறது.

பயன்பாடு

ஜாவாஸ்கிரிப்ட் வழியாக டேப் செய்யக்கூடிய தாவல்களை இயக்கவும் (ஒவ்வொரு தாவலும் தனித்தனியாக செயல்படுத்தப்பட வேண்டும்):

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

உதவிக்குறிப்புகள் உதவிக்குறிப்பு .js

ஜேசன் ஃப்ரேம் எழுதிய சிறந்த jQuery.tipsy சொருகி மூலம் ஈர்க்கப்பட்டது; உதவிக்குறிப்புகள் புதுப்பிக்கப்பட்ட பதிப்பாகும், இது படங்களை நம்பாது, அனிமேஷன்களுக்கு CSS3 மற்றும் உள்ளூர் தலைப்பு சேமிப்பகத்திற்கான தரவு பண்புக்கூறுகளைப் பயன்படுத்துகிறது.

பூஜ்ஜிய நீள தலைப்புகள் கொண்ட உதவிக்குறிப்புகள் ஒருபோதும் காட்டப்படாது.

எடுத்துக்காட்டுகள்

உதவிக்குறிப்புகளைப் பார்க்க கீழே உள்ள இணைப்புகளின் மீது வட்டமிடுங்கள்:

இறுக்கமான பேன்ட் அடுத்த நிலை கெஃபியே நீங்கள் அவற்றைப் பற்றி கேள்விப்பட்டிருக்க வாய்ப்பில்லை. ஃபோட்டோ பூத் தாடி ரா டெனிம் லெட்டர்பிரஸ் சைவ தூதர் பை ஸ்டம்ப்டவுன். ஃபார்ம்-டு-டேபிள் சீடன், mcsweeney's fixie sustainable quinoa 8-bit அமெரிக்கன் ஆடைகளில் டெர்ரி ரிச்சர்ட்சன் வினைல் சாம்ப்ரே உள்ளது. தாடி ஸ்டம்ப்டவுன், கார்டிகன்ஸ் பான் மை லோமோ இடி கேட்ஸ். டோஃபு பயோடீசல் வில்லியம்ஸ்பர்க் மார்ஃபா, ஃபோர் லோகோ மெக்ஸ்வீனியின் கிளீன்ஸ் சைவ சாம்ப்ரே. ஒரு உண்மையில் முரண்பாடான கைவினைஞர் என்ன கீதார் , சீன்ஸ்டர் ஃபார்ம்-டு-டேபிள் பேங்க்ஸி ஆஸ்டின் ட்விட்டர் ஹேண்டில் ஃப்ரீகன் க்ரெட் ரா டெனிம் ஒற்றை-ஆரிஜின் காபி வைரல்.

நிலையான உதவிக்குறிப்பு

நான்கு விருப்பங்கள் உள்ளன: மேல், வலது, கீழ் மற்றும் இடது சீரமைக்கப்பட்டது.

நான்கு திசைகள்

<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()
})

பயன்பாடு

உதவிக்குறிப்பு செருகுநிரல் உள்ளடக்கம் மற்றும் தேவைக்கேற்ப மார்க்அப்பை உருவாக்குகிறது, மேலும் முன்னிருப்பாக உதவிக்குறிப்புகளை அவற்றின் தூண்டுதல் உறுப்புக்குப் பிறகு வைக்கிறது.

ஜாவாஸ்கிரிப்ட் வழியாக உதவிக்குறிப்பைத் தூண்டவும்:

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

மார்க்அப்

உதவிக்குறிப்புக்கு தேவையான மார்க்அப் என்பது ஒரு dataபண்புக்கூறு மட்டுமே மற்றும் titleHTML உறுப்பில் நீங்கள் ஒரு உதவிக்குறிப்பை வைத்திருக்க விரும்புகிறீர்கள். டூல்டிப்பின் உருவாக்கப்பட்ட மார்க்அப் மிகவும் எளிமையானது, இருப்பினும் அதற்கு ஒரு நிலை தேவைப்படுகிறது (இயல்பாக, 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-groupஒரு அல்லது ஒரு உள்ள உறுப்புகள் .input-groupஅல்லது அட்டவணை தொடர்பான உறுப்புகளில் ( <td>, <th>, <tr>, <thead>, ) உதவிக்குறிப்புகளைப் பயன்படுத்தும் போது <tbody>, ​​தேவையற்ற பக்க விளைவுகளைத் தவிர்க்க <tfoot>விருப்பத்தை container: 'body'(கீழே ஆவணப்படுத்தப்பட்டுள்ளது) குறிப்பிட வேண்டும் (உறுப்பு அகலமாக வளரும் மற்றும்/ அல்லது உதவிக்குறிப்பு தூண்டப்படும்போது அதன் வட்டமான மூலைகளை இழக்கிறது).

மறைக்கப்பட்ட உறுப்புகளில் உதவிக்குறிப்புகளைக் காட்ட முயற்சிக்காதீர்கள்

இலக்கு $(...).tooltip('show')உறுப்பு இருக்கும் போது, display: none;​​உதவிக்குறிப்பு தவறாக நிலைநிறுத்தப்படும்.

விசைப்பலகை மற்றும் உதவி தொழில்நுட்ப பயனர்களுக்கான அணுகக்கூடிய உதவிக்குறிப்புகள்

விசைப்பலகை மூலம் வழிசெலுத்தும் பயனர்கள் மற்றும் குறிப்பாக உதவிகரமான தொழில்நுட்பங்களைப் பயன்படுத்துபவர்களுக்கு, இணைப்புகள், படிவக் கட்டுப்பாடுகள் அல்லது tabindex="0"பண்புக்கூறுடன் கூடிய தன்னிச்சையான உறுப்பு போன்ற விசைப்பலகை-ஃபோகஸ் செய்யக்கூடிய கூறுகளுக்கு மட்டுமே நீங்கள் உதவிக்குறிப்புகளைச் சேர்க்க வேண்டும்.

முடக்கப்பட்ட உறுப்புகளின் உதவிக்குறிப்புகளுக்கு ரேப்பர் கூறுகள் தேவை

disabledஒரு அல்லது உறுப்புக்கு ஒரு உதவிக்குறிப்பைச் சேர்க்க, ஒரு .disabledஉறுப்பை உள்ளே வைத்து, அதற்குப் பதிலாக <div>உதவிக்குறிப்பைப் <div>பயன்படுத்தவும்.

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். data-தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-animation="".

பெயர் வகை இயல்புநிலை விளக்கம்
இயங்குபடம் பூலியன் உண்மை உதவிக்குறிப்பில் CSS மங்கல் மாற்றத்தைப் பயன்படுத்தவும்
கொள்கலன் சரம் | பொய் பொய்

ஒரு குறிப்பிட்ட உறுப்புடன் உதவிக்குறிப்பைச் சேர்க்கிறது. உதாரணம்: container: 'body'. இந்த விருப்பம் குறிப்பாக பயனுள்ளதாக இருக்கும், இது ஆவணத்தின் ஓட்டத்தில் டூல்டிப்பை தூண்டும் உறுப்புக்கு அருகில் நிலைநிறுத்த அனுமதிக்கிறது - இது சாளரத்தின் மறுஅளவின் போது தூண்டுதல் உறுப்பிலிருந்து டூல்டிப் மிதப்பதைத் தடுக்கும்.

தாமதம் எண் | பொருள் 0

உதவிக்குறிப்பை (மிஎஸ்) காட்டுவது மற்றும் மறைப்பது தாமதம் - கையேடு தூண்டுதல் வகைக்கு பொருந்தாது

எண் வழங்கப்பட்டால், மறை/காட்சி இரண்டிற்கும் தாமதம் பயன்படுத்தப்படும்

பொருளின் அமைப்பு:delay: { "show": 500, "hide": 100 }

html பூலியன் பொய் உதவிக்குறிப்பில் HTML ஐச் செருகவும். textதவறு எனில் , DOM இல் உள்ளடக்கத்தைச் செருக 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நிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது .
காட்டப்பட்டுள்ளது.பி.எஸ்.உதவிக்குறிப்பு உதவிக்குறிப்பு பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
hide.bs.tooltip hideநிகழ்வு முறை அழைக்கப்பட்டவுடன் இந்த நிகழ்வு உடனடியாக நீக்கப்படும் .
மறைக்கப்பட்ட.பி.எஸ்.உதவிக்குறிப்பு உதவிக்குறிப்பு பயனரிடமிருந்து மறைக்கப்பட்டு முடிந்ததும் இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
செருகப்பட்டது.bs.tooltip show.bs.tooltipDOM இல் டூல்டிப் டெம்ப்ளேட் சேர்க்கப்படும் போது, ​​நிகழ்வுக்குப் பிறகு இந்த நிகழ்வு நீக்கப்படும் .
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

ஐபாடில் உள்ளதைப் போன்ற உள்ளடக்கத்தின் சிறிய மேலடுக்குகளை வீட்டு இரண்டாம் நிலைத் தகவலுக்கான எந்த உறுப்புக்கும் சேர்க்கவும்.

தலைப்பு மற்றும் உள்ளடக்கம் பூஜ்ஜிய நீளம் கொண்ட Popovers ஒருபோதும் காட்டப்படாது.

செருகுநிரல் சார்பு

Popovers உங்கள் பூட்ஸ்டார்ப்பின் பதிப்பில் டூல்டிப் செருகுநிரலைச் சேர்க்க வேண்டும்.

தேர்வு செயல்பாடு

செயல்திறன் காரணங்களுக்காக, டூல்டிப் மற்றும் பாப்ஓவர் டேட்டா-ஆபிஸ் ஆகியவை தேர்வு செய்யப்பட்டுள்ளன, அதாவது அவற்றை நீங்களே துவக்க வேண்டும் .

data-toggleஒரு பக்கத்தில் அனைத்து பாபோவர்களையும் துவக்குவதற்கான ஒரு வழி, அவற்றின் பண்புக்கூறு மூலம் அவற்றைத் தேர்ந்தெடுப்பதாகும் :

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

பொத்தான் குழுக்கள், உள்ளீட்டு குழுக்கள் மற்றும் அட்டவணைகளில் உள்ள பாப் ஓவர்களுக்கு சிறப்பு அமைப்பு தேவை

.btn-groupஒரு அல்லது ஒரு உள்ள உறுப்புகளில் .input-groupஅல்லது அட்டவணை தொடர்பான உறுப்புகளில் ( <td>, <th>, <tr>, <thead>, ) popovers ஐப் பயன்படுத்தும் போது <tbody>, ​​தேவையற்ற பக்க விளைவுகளைத் தவிர்க்க <tfoot>விருப்பத்தை container: 'body'(கீழே ஆவணப்படுத்தப்பட்டுள்ளது) குறிப்பிட வேண்டும் (உறுப்பு அகலமாக வளரும் மற்றும்/ போன்றவை அல்லது பாப்ஓவர் தூண்டப்படும் போது அதன் வட்டமான மூலைகளை இழக்கிறது).

மறைக்கப்பட்ட கூறுகளில் பாபோவர்களைக் காட்ட முயற்சிக்காதீர்கள்

$(...).popover('show')இலக்கு உறுப்பு இருக்கும் போது அழைப்பது பாப்ஓவரை display: none;தவறாக நிலைநிறுத்துவதற்கு காரணமாகும்.

செயலிழந்த உறுப்புகளில் உள்ள பாபோவர்களுக்கு ரேப்பர் கூறுகள் தேவை

ஒரு disabledஅல்லது உறுப்புக்கு பாப்ஓவரைச் சேர்க்க .disabled, உறுப்பை a இன் உள்ளே வைத்து, அதற்குப் பதிலாக <div>பாப்ஓவரைப் <div>பயன்படுத்தவும்.

பல வரி இணைப்புகள்

சில நேரங்களில் நீங்கள் பல வரிகளை உள்ளடக்கிய ஹைப்பர்லிங்கில் பாப்ஓவரைச் சேர்க்க விரும்புகிறீர்கள். பாப்ஓவர் செருகுநிரலின் இயல்புநிலை அதை கிடைமட்டமாகவும் செங்குத்தாகவும் மையப்படுத்துவதாகும். white-space: nowrap;இதைத் தவிர்க்க உங்கள் ஆங்கர்களில் சேர்க்கவும் .

எடுத்துக்காட்டுகள்

நிலையான பாப்ஓவர்

நான்கு விருப்பங்கள் உள்ளன: மேல், வலது, கீழ் மற்றும் இடது சீரமைக்கப்பட்டது.

பாப்ஓவர் டாப்

இது லோபோர்டிஸில் உள்ளது. ஏனியன் யூ லியோ குவாம். Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover வலது

இது லோபோர்டிஸில் உள்ளது. ஏனியன் யூ லியோ குவாம். Pellentesque ornare sem lacinia quam venenatis vestibulum.

பாப்ஓவர் கீழே

இது லோபோர்டிஸில் உள்ளது. ஏனியன் யூ லியோ குவாம். Pellentesque ornare sem lacinia quam venenatis vestibulum.

பாப்ஓவர் விட்டு

இது லோபோர்டிஸில் உள்ளது. ஏனியன் யூ லியோ குவாம். Pellentesque ornare sem lacinia quam venenatis vestibulum.

நேரடி டெமோ

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

பயன்பாடு

ஜாவாஸ்கிரிப்ட் வழியாக பாப்ஓவர்களை இயக்கவும்:

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

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். data-தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-animation="".

பெயர் வகை இயல்புநிலை விளக்கம்
இயங்குபடம் பூலியன் உண்மை பாப்ஓவருக்கு CSS ஃபேட் மாற்றத்தைப் பயன்படுத்தவும்
கொள்கலன் சரம் | பொய் பொய்

ஒரு குறிப்பிட்ட உறுப்புடன் பாப்ஓவரைச் சேர்க்கிறது. உதாரணம்: container: 'body'. இந்த விருப்பம் குறிப்பாக பயனுள்ளதாக இருக்கும், இது ஆவணத்தின் ஓட்டத்தில் தூண்டுதல் உறுப்புக்கு அருகில் பாப்ஓவரை நிலைநிறுத்த உங்களை அனுமதிக்கிறது - இது சாளரத்தின் அளவை மாற்றும் போது தூண்டும் உறுப்பிலிருந்து பாப்ஓவர் மிதப்பதைத் தடுக்கும்.

உள்ளடக்கம் சரம் | செயல்பாடு ''

data-contentபண்புக்கூறு இல்லை என்றால் இயல்புநிலை உள்ளடக்க மதிப்பு .

ஒரு செயல்பாடு கொடுக்கப்பட்டால், அது thisபாப்ஓவர் இணைக்கப்பட்டுள்ள உறுப்புடன் அதன் குறிப்புடன் அழைக்கப்படும்.

தாமதம் எண் | பொருள் 0

பாப்ஓவரை (எம்எஸ்) காட்டுவது மற்றும் மறைப்பது தாமதம் - கைமுறை தூண்டுதல் வகைக்கு பொருந்தாது

எண் வழங்கப்பட்டால், மறை/காட்சி இரண்டிற்கும் தாமதம் பயன்படுத்தப்படும்

பொருளின் அமைப்பு:delay: { "show": 500, "hide": 100 }

html பூலியன் பொய் பாப்ஓவரில் HTML ஐச் செருகவும். textதவறு எனில் , DOM இல் உள்ளடக்கத்தைச் செருக 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நிகழ்வு நிகழும் முன்) அழைப்பாளருக்குத் திரும்புகிறது. இது பாப்ஓவரின் "கையேடு" தூண்டுதலாகக் கருதப்படுகிறது. தலைப்பு மற்றும் உள்ளடக்கம் பூஜ்ஜிய நீளம் கொண்ட Popovers ஒருபோதும் காட்டப்படாது.

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

.popover('hide')

ஒரு தனிமத்தின் பாப்ஓவரை மறைக்கிறது. பாப்ஓவர் உண்மையில் மறைக்கப்படுவதற்கு முன்பு (அதாவது hidden.bs.popoverநிகழ்வு நிகழும் முன்) அழைப்பாளரிடம் திரும்பும். இது பாப்ஓவரின் "கையேடு" தூண்டுதலாகக் கருதப்படுகிறது.

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

.popover('toggle')

ஒரு உறுப்பின் பாப்ஓவரை மாற்றுகிறது. பாப்ஓவர் உண்மையில் காட்டப்படுவதற்கு அல்லது மறைக்கப்படுவதற்கு முன்பு (அதாவது நிகழ்வு shown.bs.popoverஅல்லது hidden.bs.popoverநிகழ்வு நிகழும் முன்) அழைப்பாளருக்குத் திரும்புகிறது. இது பாப்ஓவரின் "கையேடு" தூண்டுதலாகக் கருதப்படுகிறது.

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

.popover('destroy')

ஒரு தனிமத்தின் பாப்ஓவரை மறைத்து அழிக்கிறது. பிரதிநிதித்துவத்தைப் பயன்படுத்தும் Popovers ( selectorவிருப்பத்தைப் பயன்படுத்தி உருவாக்கப்பட்டவை ) சந்ததி தூண்டுதல் கூறுகளில் தனித்தனியாக அழிக்கப்பட முடியாது.

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

நிகழ்வுகள்

நிகழ்வு வகை விளக்கம்
show.bs.popover showநிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது .
காட்டப்பட்டுள்ளது.bs.popover பாப்ஓவர் பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
hide.bs.popover hideநிகழ்வு முறை அழைக்கப்பட்டவுடன் இந்த நிகழ்வு உடனடியாக நீக்கப்படும் .
மறைக்கப்பட்ட.bs.popover பாப்ஓவர் பயனரிடமிருந்து மறைக்கப்பட்டு முடிந்ததும் இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
செருகப்பட்டது.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"பண்புக்கூறு கொண்ட சந்ததி கூறுகளில் கிளிக் நிகழ்வுகளுக்கு விழிப்பூட்டலைக் கேட்க வைக்கிறது. (data-api இன் தானியங்கு-தொடக்கத்தைப் பயன்படுத்தும் போது அவசியமில்லை.)

$().alert('close')

DOM இலிருந்து அகற்றுவதன் மூலம் எச்சரிக்கையை மூடுகிறது. .fadeஉறுப்பில் மற்றும் வகுப்புகள் இருந்தால், .inஅது அகற்றப்படுவதற்கு முன்பு எச்சரிக்கை மறைந்துவிடும்.

நிகழ்வுகள்

பூட்ஸ்டார்ப்பின் விழிப்பூட்டல் செருகுநிரலானது, எச்சரிக்கை செயல்பாட்டில் இணைக்கும் சில நிகழ்வுகளை வெளிப்படுத்துகிறது.

நிகழ்வு வகை விளக்கம்
close.bs.எச்சரிக்கை closeநிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது .
மூடப்பட்டது.பிஎஸ்.எச்சரிக்கை விழிப்பூட்டல் மூடப்பட்டவுடன் இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடியும் வரை காத்திருக்கும்).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

பொத்தான்கள் button.js

பொத்தான்கள் மூலம் மேலும் செய்யவும். டூல்பார்கள் போன்ற கூடுதல் கூறுகளுக்கு கட்டுப்பாட்டு பொத்தான் கூறுகிறது அல்லது பொத்தான்களின் குழுக்களை உருவாக்கவும்.

குறுக்கு உலாவி இணக்கத்தன்மை

ஃபயர்பாக்ஸ் பக்க சுமைகள் முழுவதும் படிவக் கட்டுப்பாட்டு நிலைகளை (இயலாமை மற்றும் சரிபார்ப்பு) தொடர்கிறது . இதற்கு ஒரு தீர்வு பயன்படுத்த வேண்டும் autocomplete="off". Mozilla பிழை #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 தொழிலாளர் eiusmod. புருஞ்ச் 3 ஓநாய் மூன் டெம்பர், சன்ட் அலிக்வா அதன் மீது ஒரு பறவையை வைத்தது ஸ்க்விட் சிங்கிள்-ஆரிஜின் காபி நுல்லா அசுமெண்டா ஷோரெடிச் மற்றும். நிஹில் அனிம் கெஃபியே ஹெல்வெடிகா, கிராஃப்ட் பீர் லேபர் வெஸ் ஆண்டர்சன் க்ரெட் நெஸ்சியுன்ட் சாபியென்டே ஈ. விளம்பர வேகன் விதிவிலக்கு கசாப்பு கடை வைஸ் லோமோ. Leggings occaecat கிராஃப்ட் பீர் ஃபார்ம்-டு-டேபிள், ரா டெனிம் அழகியல் சின்த் nesciunt நீங்கள் ஒருவேளை அவர்கள் குற்றச்சாட்டுக்கு தொழிலாளர் நிலையான VHS பற்றி கேள்விப்பட்டிருக்க முடியாது.
அனிம் பாரியடுர் கிளீச் ரெப்ரெஹெண்டரிட், எனிம் ஐயுஸ்மோட் ஹை லைஃப் ஆக்ஸமஸ் டெர்ரி ரிச்சர்ட்சன் அட் ஸ்க்விட். 3 ஓநாய் மூன் ஆஃபிசியா ஆட், குபிடாடட் அல்லாத ஸ்கேட்போர்டு டோலர் புருன்ச். உணவு டிரக் quinoa nesciunt தொழிலாளர் eiusmod. புருஞ்ச் 3 ஓநாய் மூன் டெம்பர், சன்ட் அலிக்வா அதன் மீது ஒரு பறவையை வைத்தது ஸ்க்விட் சிங்கிள்-ஆரிஜின் காபி நுல்லா அசுமெண்டா ஷோரெடிச் மற்றும். நிஹில் அனிம் கெஃபியே ஹெல்வெடிகா, கிராஃப்ட் பீர் லேபர் வெஸ் ஆண்டர்சன் க்ரெட் நெஸ்சியுன்ட் சாபியென்டே ஈ. விளம்பர வேகன் விதிவிலக்கு கசாப்பு கடை வைஸ் லோமோ. Leggings occaecat கிராஃப்ட் பீர் ஃபார்ம்-டு-டேபிள், ரா டெனிம் அழகியல் சின்த் nesciunt நீங்கள் ஒருவேளை அவர்கள் குற்றச்சாட்டுக்கு தொழிலாளர் நிலையான VHS பற்றி கேள்விப்பட்டிருக்க முடியாது.
அனிம் பாரியடுர் கிளீச் ரெப்ரெஹெண்டரிட், எனிம் ஐயுஸ்மோட் ஹை லைஃப் ஆக்ஸமஸ் டெர்ரி ரிச்சர்ட்சன் அட் ஸ்க்விட். 3 ஓநாய் மூன் ஆஃபிசியா ஆட், குபிடாடட் அல்லாத ஸ்கேட்போர்டு டோலர் புருன்ச். உணவு டிரக் quinoa nesciunt தொழிலாளர் eiusmod. புருஞ்ச் 3 ஓநாய் மூன் டெம்பர், சன்ட் அலிக்வா அதன் மீது ஒரு பறவையை வைத்தது ஸ்க்விட் சிங்கிள்-ஆரிஜின் காபி நுல்லா அசுமெண்டா ஷோரெடிச் மற்றும். நிஹில் அனிம் கெஃபியே ஹெல்வெடிகா, கிராஃப்ட் பீர் லேபர் வெஸ் ஆண்டர்சன் க்ரெட் நெஸ்சியுன்ட் சாபியென்டே ஈ. விளம்பர வேகன் விதிவிலக்கு கசாப்பு கடை வைஸ் லோமோ. Leggings occaecat கிராஃப்ட் பீர் ஃபார்ம்-டு-டேபிள், ரா டெனிம் அழகியல் சின்த் nesciunt நீங்கள் ஒருவேளை அவர்கள் குற்றச்சாட்டுக்கு தொழிலாளர் நிலையான VHS பற்றி கேள்விப்பட்டிருக்க முடியாது.
<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-targetபயன்படுத்த CSS தேர்வியை ஏற்றுக்கொள்கிறது. collapseமடிக்கக்கூடிய உறுப்புடன் வகுப்பைச் சேர்க்க மறக்காதீர்கள் . இது இயல்புநிலையாகத் திறக்கப்பட வேண்டுமெனில், கூடுதல் வகுப்பைச் சேர்க்கவும்in .

மடிக்கக்கூடிய கட்டுப்பாட்டில் துருத்தி போன்ற குழு நிர்வாகத்தைச் சேர்க்க, தரவுப் பண்புக்கூறைச் சேர்க்கவும் data-parent="#selector". இதை செயலில் காண டெமோவைப் பார்க்கவும்.

ஜாவாஸ்கிரிப்ட் வழியாக

இதனுடன் கைமுறையாக இயக்கு:

$('.collapse').collapse()

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். 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. சரிவு showநிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது .
காட்டப்பட்டுள்ளது.bs.சரிவு ஒரு சரிவு உறுப்பு பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
hide.bs. சரிவு hideமுறை அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக நீக்கப்பட்டது .
மறைக்கப்பட்ட.bs.சரிவு ஒரு சரிவு உறுப்பு பயனரிடமிருந்து மறைக்கப்படும்போது இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

கொணர்வி கொணர்வி .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"பக்க ஏற்றத்தில் தொடங்கி ஒரு கொணர்வியை அனிமேட் செய்வதாகக் குறிக்க பண்புக்கூறு பயன்படுத்தப்படுகிறது . அதே கொணர்வியின் (தேவையற்ற மற்றும் தேவையற்ற) வெளிப்படையான ஜாவாஸ்கிரிப்ட் துவக்கத்துடன் இதைப் பயன்படுத்த முடியாது.

ஜாவாஸ்கிரிப்ட் வழியாக

கொணர்வியை கைமுறையாக அழைக்கவும்:

$('.carousel').carousel()

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். data-தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-interval="".

பெயர் வகை இயல்புநிலை விளக்கம்
இடைவெளி எண் 5000 ஒரு பொருளை தானாக சைக்கிள் ஓட்டுவதற்கு இடையில் தாமதமாகும் நேரம். தவறு எனில், கொணர்வி தானாக சுழற்சி செய்யாது.
இடைநிறுத்தம் சரம் | ஏதுமில்லை "பயணம்" என அமைக்கப்பட்டால் "hover", கொணர்வியின் சைக்கிள் ஓட்டத்தை இடைநிறுத்தி, கொணர்வியின் mouseenterசைக்கிள் ஓட்டத்தை மீண்டும் தொடங்கும் mouseleave. என அமைக்கப்பட்டால் null, கொணர்வியின் மேல் வட்டமிடுவது இடைநிறுத்தப்படாது.
மடக்கு பூலியன் உண்மை கொணர்வி தொடர்ந்து சுழற்சி செய்யப்பட வேண்டுமா அல்லது கடினமாக நிறுத்தப்பட வேண்டுமா.
விசைப்பலகை பூலியன் உண்மை விசைப்பலகை நிகழ்வுகளுக்கு கொணர்வி எதிர்வினையாற்ற வேண்டுமா.

விருப்பத்தேர்வுகளுடன் கொணர்வியைத் objectதொடங்கி உருப்படிகள் மூலம் சைக்கிள் ஓட்டத் தொடங்குகிறது.

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

இடமிருந்து வலமாக கொணர்வி உருப்படிகள் மூலம் சுழற்சிகள்.

பொருட்கள் வழியாக சைக்கிள் ஓட்டுவதை கொணர்வி நிறுத்துகிறது.

கொணர்வியை ஒரு குறிப்பிட்ட சட்டகத்திற்குச் சுழற்றுகிறது (0 அடிப்படையிலானது, வரிசையைப் போன்றது).

முந்தைய உருப்படிக்கான சுழற்சிகள்.

அடுத்த உருப்படிக்கான சுழற்சிகள்.

பூட்ஸ்டார்ப்பின் கொணர்வி வகுப்பு, கொணர்வி செயல்பாட்டில் இணைக்கும் இரண்டு நிகழ்வுகளை வெளிப்படுத்துகிறது.

இரண்டு நிகழ்வுகளும் பின்வரும் கூடுதல் பண்புகளைக் கொண்டுள்ளன:

  • direction: கொணர்வி சறுக்கும் திசையில் (ஒன்று "left"அல்லது "right").
  • relatedTarget: செயலில் உள்ள பொருளாக மாற்றப்படும் DOM உறுப்பு.

அனைத்து கொணர்வி நிகழ்வுகளும் கொணர்வியிலேயே சுடப்படுகின்றன (அதாவது இல் <div class="carousel">).

நிகழ்வு வகை விளக்கம்
slide.bs.கொணர்வி slideநிகழ்வு முறை செயல்படுத்தப்படும் போது இந்த நிகழ்வு உடனடியாக எரிகிறது.
slid.bs.கொணர்வி கொணர்வி அதன் ஸ்லைடு மாற்றத்தை முடித்தவுடன் இந்த நிகழ்வு நீக்கப்பட்டது.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

இணைப்பு affix.js

உதாரணமாக

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;தேவைப்படும்போது சேர்க்கவும். செருகுநிரல் தரவு பண்புக்கூறு அல்லது ஜாவாஸ்கிரிப்ட் விருப்பத்தைப் பயன்படுத்தி அங்கிருந்து உறுப்பை எங்கு நிலைநிறுத்துவது என்பதைத் தீர்மானிக்கிறது.

கீழே உள்ள பயன்பாட்டு விருப்பங்களில் ஒன்றுக்கு உங்கள் CSS ஐ அமைக்க மேலே உள்ள படிகளைப் பின்பற்றவும்.

தரவு பண்புக்கூறுகள் மூலம்

எந்த உறுப்பிலும் அஃபிக்ஸ் நடத்தையை எளிதாகச் சேர்க்க, data-spy="affix"நீங்கள் உளவு பார்க்க விரும்பும் உறுப்பில் சேர்க்கவும். ஒரு உறுப்பின் பின்னிங்கை எப்போது மாற்றுவது என்பதை வரையறுக்க ஆஃப்செட்களைப் பயன்படுத்தவும்.

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

ஜாவாஸ்கிரிப்ட் வழியாக

ஜாவாஸ்கிரிப்ட் வழியாக இணைப்பு செருகுநிரலை அழைக்கவும்:

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

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். 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 உறுப்பு பொருத்தப்படுவதற்கு முன்பே இந்த நிகழ்வு சுடுகிறது.
ஒட்டப்பட்ட.பி.எஸ்.அஃபிக்ஸ் உறுப்பு பொருத்தப்பட்ட பிறகு இந்த நிகழ்வு நீக்கப்பட்டது.
affix-top.bs.affix உறுப்பு மேலே பொருத்தப்படுவதற்கு முன்பே இந்த நிகழ்வு உடனடியாகத் தொடங்குகிறது.
ஒட்டப்பட்ட-மேல்.பி.எஸ்.அஃபிக்ஸ் உறுப்பு மேலே பொருத்தப்பட்ட பிறகு இந்த நிகழ்வு நீக்கப்பட்டது.
affix-bottom.bs.affix உறுப்பு கீழே இணைக்கப்படுவதற்கு முன்பே இந்த நிகழ்வு சுடுகிறது.
ஒட்டப்பட்ட-கீழே.பி.எஸ்.அஃபிக்ஸ் உறுப்பு கீழே இணைக்கப்பட்ட பிறகு இந்த நிகழ்வு நீக்கப்பட்டது.