მიმოხილვა

ინდივიდუალური ან შედგენილი

დანამატები შეიძლება ჩაერთოს ინდივიდუალურად (Bootstrap-ის ინდივიდუალური *.jsფაილების გამოყენებით), ან ერთდროულად (გამოყენებით bootstrap.jsან შემცირებული bootstrap.min.js).

შედგენილი JavaScript-ის გამოყენებით

ორივე bootstrap.jsდა bootstrap.min.jsშეიცავს ყველა დანამატს ერთ ფაილში. ჩართეთ მხოლოდ ერთი.

დანამატის დამოკიდებულებები

ზოგიერთი დანამატი და CSS კომპონენტი დამოკიდებულია სხვა დანამატებზე. თუ ინდივიდუალურად ჩართავთ დანამატებს, დარწმუნდით, რომ შეამოწმეთ ეს დამოკიდებულებები დოკუმენტებში. ასევე გაითვალისწინეთ, რომ ყველა დანამატი დამოკიდებულია jQuery-ზე (ეს ნიშნავს, რომ jQuery უნდა იყოს ჩართული დანამატის ფაილებამდე) . გაიარეთ კონსულტაციაbower.json , რომ ნახოთ jQuery-ის რომელი ვერსიებია მხარდაჭერილი.

მონაცემთა ატრიბუტები

თქვენ შეგიძლიათ გამოიყენოთ Bootstrap-ის ყველა დანამატი მხოლოდ მარკირების API-ის საშუალებით JavaScript-ის ერთი ხაზის დაწერის გარეშე. ეს არის Bootstrap-ის პირველი კლასის API და უნდა იყოს თქვენი პირველი განხილვა მოდულის გამოყენებისას.

ამის თქმით, ზოგიერთ სიტუაციაში შეიძლება სასურველი იყოს ამ ფუნქციის გამორთვა. ამიტომ, ჩვენ ასევე გთავაზობთ მონაცემთა ატრიბუტის API-ს გამორთვის შესაძლებლობას დოკუმენტის სახელების სივრცის ყველა მოვლენის გაუქმებით data-api. ეს ასე გამოიყურება:

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

ალტერნატიულად, კონკრეტული დანამატის დასამიზნებლად, უბრალოდ ჩართეთ მოდულის სახელი, როგორც სახელთა სივრცე, მონაცემთა api სახელების სივრცესთან ერთად, როგორიცაა:

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

მხოლოდ ერთი დანამატი თითო ელემენტზე მონაცემთა ატრიბუტების მეშვეობით

ნუ გამოიყენებთ მონაცემთა ატრიბუტებს მრავალი დანამატიდან იმავე ელემენტზე. მაგალითად, ღილაკს არ შეიძლება ჰქონდეს ინსტრუმენტის მინიშნება და გადართვა მოდალი. ამის მისაღწევად გამოიყენეთ შესაფუთი ელემენტი.

პროგრამული API

ჩვენ ასევე გვჯერა, რომ თქვენ უნდა შეძლოთ Bootstrap-ის ყველა დანამატის გამოყენება მხოლოდ 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

არანაირი კონფლიქტი

ზოგჯერ საჭიროა Bootstrap დანამატების გამოყენება სხვა UI ჩარჩოებთან ერთად. ამ პირობებში, სახელთა სივრცის შეჯახება ზოგჯერ შეიძლება მოხდეს. თუ ეს მოხდება, შეგიძლიათ დაურეკოთ .noConflictდანამატს, რომლის მნიშვნელობის დაბრუნება გსურთ.

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

Ივენთი

Bootstrap უზრუნველყოფს მორგებულ მოვლენებს პლაგინების უნიკალურ ქმედებებისთვის. როგორც წესი, ესენი მოდის ინფინიტივი და წარსული ნაწილაკის სახით - სადაც ინფინიტივი (მაგ. show) ჩნდება მოვლენის დაწყებისას, ხოლო მისი წარსული ნაწილაკი (მაგ. shown) მოქმედების დასრულებისას.

3.0.0-ის მდგომარეობით, Bootstrap-ის ყველა მოვლენა არის სახელთა სივრცე.

ყველა უსასრულო მოვლენა უზრუნველყოფს preventDefaultფუნქციონირებას. ეს იძლევა შესაძლებლობას შეაჩეროს მოქმედების შესრულება მის დაწყებამდე.

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

ვერსიის ნომრები

Bootstrap-ის jQuery-ის თითოეული მოდულის ვერსიაზე წვდომა შესაძლებელია VERSIONმოდულის კონსტრუქტორის საკუთრების მეშვეობით. მაგალითად, ხელსაწყოების მოდულისთვის:

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

არ არის სპეციალური ჩანაცვლება, როდესაც JavaScript გამორთულია

Bootstrap-ის დანამატები არ იბრუნებს განსაკუთრებით მოხდენილად, როდესაც JavaScript გამორთულია. თუ თქვენ აინტერესებთ მომხმარებლის გამოცდილება ამ შემთხვევაში, გამოიყენეთ <noscript>სიტუაციის ახსნა (და როგორ ხელახლა ჩართოთ JavaScript) თქვენს მომხმარებლებს და/ან დაამატეთ თქვენი საკუთარი შენიშვნები.

მესამე მხარის ბიბლიოთეკები

Bootstrap ოფიციალურად არ უჭერს მხარს მესამე მხარის JavaScript ბიბლიოთეკებს , როგორიცაა Prototype ან jQuery UI. მიუხედავად .noConflictდა სახელთა სივრცის მოვლენებისა, შეიძლება არსებობდეს თავსებადობის პრობლემები, რომლებიც დამოუკიდებლად უნდა მოაგვაროთ.

გადასვლები transition.js

გადასვლების შესახებ

მარტივი გადასვლის ეფექტებისთვის, ჩართეთ transition.jsერთხელ სხვა JS ფაილებთან ერთად. თუ თქვენ იყენებთ შედგენილ (ან მინიფიცირებულ) bootstrap.js, არ არის საჭირო ამის ჩართვა — ის უკვე არსებობს.

Რა არის შიგნით

Transition.js არის ძირითადი დამხმარე transitionEndმოვლენებისთვის, ასევე CSS გადასვლის ემულატორი. მას სხვა დანამატები იყენებენ CSS გადასვლის მხარდაჭერის შესამოწმებლად და ჩამოკიდებული გადასვლების დასაჭერად.

გადასვლების გამორთვა

გადასვლები შეიძლება გლობალურად გამორთოთ შემდეგი JavaScript სნიპეტის გამოყენებით, რომელიც უნდა მოდიოდეს ჩატვირთვის შემდეგ transition.js(ან bootstrap.jsან bootstrap.min.js, როგორც შეიძლება იყოს):

$.support.transition = false

მოდალები modal.js

მოდალები არის გამარტივებული, მაგრამ მოქნილი, დიალოგის მოთხოვნა მინიმალური საჭირო ფუნქციონირებით და ჭკვიანი ნაგულისხმევი პარამეტრებით.

მრავალი ღია მოდალი არ არის მხარდაჭერილი

დარწმუნდით, რომ არ გახსნათ მოდალი, სანამ მეორე ჯერ კიდევ ჩანს. ერთზე მეტი მოდალის ჩვენება ერთდროულად მოითხოვს მორგებულ კოდს.

მოდალური მარკირების განთავსება

ყოველთვის შეეცადეთ მოათავსოთ მოდალის HTML კოდი თქვენს დოკუმენტში ზედა დონის პოზიციაზე, რათა თავიდან აიცილოთ სხვა კომპონენტები მოდალის გარეგნობაზე და/ან ფუნქციონირებაზე.

მობილური მოწყობილობის გაფრთხილებები

არსებობს გარკვეული გაფრთხილებები მოდალების გამოყენებასთან დაკავშირებით მობილურ მოწყობილობებზე. იხილეთ ჩვენი ბრაუზერის მხარდაჭერის დოკუმენტები დეტალებისთვის.

იმის გამო, თუ როგორ განსაზღვრავს HTML5 მის სემანტიკას, autofocusHTML ატრიბუტს არანაირი ეფექტი არ აქვს Bootstrap მოდალში. იგივე ეფექტის მისაღწევად გამოიყენეთ რამდენიმე მორგებული JavaScript:

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

მაგალითები

სტატიკური მაგალითი

გაფორმებული მოდალი სათაურით, ტექსტით და მოქმედებების კომპლექტით ქვედაბოლოში.

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

ცოცხალი დემო

გადართეთ მოდალი JavaScript-ის საშუალებით ქვემოთ მოცემულ ღილაკზე დაწკაპუნებით. ის ჩამოიწევს ქვემოთ და გაქრება გვერდის ზემოდან.

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

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

გახადეთ მოდალები ხელმისაწვდომი

დარწმუნდით, რომ დაამატეთ role="dialog"და aria-labelledby="...", მოდალური სათაურის მითითებით .modal, და role="document"თავად .modal-dialog.

გარდა ამისა, შეგიძლიათ მიუთითოთ თქვენი მოდალური დიალოგის aria-describedbyშესახებ .modal.

YouTube ვიდეოების ჩაშენება

YouTube ვიდეოების მოდალში ჩასმა მოითხოვს დამატებით JavaScript-ს, რომელიც არ არის Bootstrap-ში, რათა ავტომატურად შეწყვიტოს დაკვრა და სხვა. იხილეთ ეს სასარგებლო Stack Overflow პოსტი დამატებითი ინფორმაციისთვის.

სურვილისამებრ ზომები

მოდალებს აქვთ ორი სურვილისამებრ ზომა, რომლებიც ხელმისაწვდომია მოდიფიკატორის კლასების საშუალებით, რათა განთავსდეს .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>

ქსელის სისტემის გამოყენება

იმისათვის, რომ ისარგებლოთ Bootstrap ქსელის სისტემით მოდალში, უბრალოდ ჩადეთ ბუდე .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)
})

გამოყენება

მოდალური დანამატი ცვლის თქვენს ფარულ შინაარსს მოთხოვნისამებრ, მონაცემთა ატრიბუტების ან 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-ის საშუალებით

დარეკეთ მოდალს id- myModalით JavaScript-ის ერთი ხაზით:

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

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-backdrop="".

სახელი ტიპი ნაგულისხმევი აღწერა
ფონი ლოგიკური ან სტრიქონი'static' მართალია მოიცავს მოდალური ფონის ელემენტს. ალტერნატიულად, მიუთითეთ staticფონი, რომელიც არ ხურავს მოდალს დაწკაპუნებისას.
კლავიატურა ლოგიკური მართალია ხურავს მოდალს გაქცევის ღილაკის დაჭერისას
შოუ ლოგიკური მართალია აჩვენებს მოდალს ინიციალიზაციისას.
დისტანციური გზა ყალბი

ეს ვარიანტი მოძველებულია v3.3.0-დან და ამოღებულია v4-ში. ამის ნაცვლად, გირჩევთ გამოიყენოთ კლიენტის მხარის შაბლონი ან მონაცემთა დამაკავშირებელი ჩარჩო, ან თავად დარეკოთ jQuery.load .

თუ მოწოდებულია დისტანციური URL, კონტენტი ჩაიტვირთება ერთხელ jQuery-ის loadმეთოდით და ინექცია მოხდება .modal-contentdiv-ში. თუ იყენებთ data-api-ს, შეგიძლიათ ალტერნატიულად გამოიყენოთ 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')

Ივენთი

Bootstrap-ის მოდალური კლასი ავლენს რამდენიმე მოვლენას მოდალურ ფუნქციონირებაში ჩასართავად.

ყველა მოდალური მოვლენა ისროლება თავად მოდალზე (ანუ ზე <div class="modal">).

ღონისძიების ტიპი აღწერა
შოუ.ბს.მოდალური ეს მოვლენა მაშინვე ირთვება, როდესაც showგამოიძახება ეგზემპლარის მეთოდი. თუ დაწკაპუნებით არის გამოწვეული, დაწკაპუნებული ელემენტი ხელმისაწვდომია relatedTargetმოვლენის თვისებად.
ნაჩვენებია.ბს.მოდალური ეს ღონისძიება გააქტიურებულია, როდესაც მოდალი მომხმარებლისთვის ხილული გახდება (დაელოდება CSS გადასვლების დასრულებას). თუ დაწკაპუნებით არის გამოწვეული, დაწკაპუნებული ელემენტი ხელმისაწვდომია relatedTargetმოვლენის თვისებად.
დამალვა.ბს.მოდალური ეს ღონისძიება გააქტიურებულია მაშინვე, როდესაც hideგამოიძახება ინსტანციის მეთოდი.
დამალული.ბს.მოდალური ეს ღონისძიება გააქტიურებულია, როდესაც მოდალის დამალვა დასრულდება მომხმარებლისგან (დაელოდება CSS გადასვლების დასრულებას).
დატვირთული.ბს.მოდალური ეს ღონისძიება გააქტიურებულია, როდესაც მოდალი იტვირთება კონტენტი remoteოფციის გამოყენებით.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

ჩამოსაშლელი ჩამოსაშლელები. js

დაამატეთ ჩამოსაშლელი მენიუები თითქმის ყველაფერში ამ მარტივი მოდულით, მათ შორის ნავიგატორი, ჩანართები და აბები.

ნავიბარის ფარგლებში

აბების ფარგლებში

მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით, ჩამოსაშლელი დანამატი გადართავს ფარულ შინაარსს (ჩამოშლელ მენიუებს) .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>

JavaScript-ის საშუალებით

გამოიძახეთ ჩამოსაშლელები JavaScript-ით:

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

data-toggle="dropdown"ჯერ კიდევ საჭიროა

განურჩევლად იმისა, გამოიძახებთ თუ არა თქვენს ჩამოსაშლელს JavaScript-ის საშუალებით, თუ სანაცვლოდ იყენებთ data-api-ს, data-toggle="dropdown"ყოველთვის საჭიროა ჩამოსაშლელი ტრიგერის ელემენტზე ყოფნა.

არცერთი

გადართავს ჩამოსაშლელ მენიუს მოცემული ნავიგაციის ზოლის ან ჩანართებით ნავიგაციის.

ყველა ჩამოსაშლელი მოვლენა გააქტიურებულია .dropdown-menu's მშობლის ელემენტზე.

ყველა ჩამოსაშლელ მოვლენას აქვს relatedTargetთვისება, რომლის მნიშვნელობა არის გადართვის წამყვანი ელემენტი.

ღონისძიების ტიპი აღწერა
ჩვენება.ბს.ჩამოშლილი ეს მოვლენა მაშინვე ირთვება, როდესაც შოუს მაგალითის მეთოდი გამოიძახება.
ნაჩვენებია.ბს.ჩამოშლილი ეს ღონისძიება გააქტიურებულია, როდესაც ჩამოსაშლელი ფაილი მომხმარებლისთვის ხილული გახდება (დაელოდება CSS გადასვლების დასრულებას).
დამალვა.ბს.ჩამოშლილი ეს ღონისძიება გააქტიურებულია დაუყოვნებლივ, როდესაც გამოიძახება დამალვის მაგალითის მეთოდი.
დამალული.ბს.ჩამოშლილი ეს ღონისძიება გააქტიურებულია, როდესაც ჩამოსაშლელი ფაილი მომხმარებლისგან დამალულია (დაელოდება CSS გადასვლების დასრულებას).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

მაგალითი ნავიბარში

ScrollSpy მოდული განკუთვნილია ნავი მიზნების ავტომატურად განახლებისთვის, გადახვევის პოზიციიდან გამომდინარე. გადაახვიეთ ნავიგაციის ზოლის ქვემოთ და უყურეთ აქტიური კლასის ცვლილებას. ასევე მონიშნული იქნება ჩამოსაშლელი ქვეპუნქტები.

@ fat

სარეკლამო გამაშები keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi სანამ გაიყიდა qui. Tumblr ფერმა-მაგიდა ველოსიპედის უფლებები. Anim keffiyeh carles cardigan. Velit seitan Mcsweeney's Photo Booth 3 wolf moon irure. Cosby სვიტერი lomo jean შორტები, უილიამსბურგის hoodie მინიმ qui ალბათ არ გსმენიათ მათ შესახებ და კარდიგანის სატრასტო ფონდის culpa biodiesel wes anderson ესთეტიკური. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa ულვაში skateboard, adipisicing fugiat velit pitchfork წვერი. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat ოთხი ლოკო ნისი, ea helvetica nulla carles. Tattooed cosby სვიტერი კვების სატვირთო მანქანა, Mcsweeney's quis non freegan ვინილი. ლო-ფი ვეს ანდერსონი +1 სარტორიალი. კარლესი არა ესთეტიკური ვარჯიში quis gentrify. ბრუკლინის კრეფტ ლუდის ადიპისინგის ვიცე keytar deserunt.

ერთი

Occaecat commodo aliqua delectus. Fap craft ლუდი deserunt skateboard ea. ლომო ველოსიპედის უფლებების ადიპისინგ ბანი მი, ველით ეა მზის შემდეგი დონის ლოკავორი ერთი წარმოშობის ყავა მაგნა ვენიამ. მაღალი სიცოცხლის id ვინილის, ექო პარკის შედეგია quis aliquip banh mi pitchfork. Vero VHS არის დამამცირებელი. შეასრულეთ წვრილმანი წვრილმანი მესენჯერის ჩანთა. Cred ex in, მდგრადი დელექციური კონსექტტორი fanny პაკეტი iphone.

ორი

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 blog, culpa messenger bag marfa, რაც არ უნდა იყოს საკვები სატვირთო მანქანა. Sapiente synth id assumenda. Locavore sed helvetica კლიშე ირონია, ჭექა-ქუხილი, ალბათ არ გსმენიათ მათ შესახებ, რასაც თან ახლავს hoodie უგლუტენო lo-fi fap aliquip. Labore elit placeat სანამ გაიყიდებოდა, ტერი რიჩარდსონი proident brunch nesciunt quis cosby სვიტერი pariatur keffiyeh ut helvetica artisan. კარდიგანის ხელნაკეთი ლუდი სეიტანი მზა ველი. VHS chambray laboris tempor veniam. Anim mollit minim commodo ulamco thundercats.

გამოყენება

საჭიროებს Bootstrap Nav-ს

Scrollspy ამჟამად მოითხოვს Bootstrap nav კომპონენტის გამოყენებას აქტიური ბმულების სათანადო ხაზგასმისთვის.

საჭიროა მოგვარებადი ID სამიზნეები

Navbar-ის ბმულებს უნდა ჰქონდეთ ამოსაცნობი ID სამიზნეები. მაგალითად, <a href="#home">home</a>უნდა შეესაბამებოდეს რაღაც DOM-ში, როგორიცაა <div id="home"></div>.

არამიზნობრივი :visibleელემენტები იგნორირებულია

სამიზნე ელემენტები, რომლებიც არ :visibleშეესაბამება jQuery-ს, იგნორირებული იქნება და მათი შესაბამისი ნავი ელემენტები არასოდეს იქნება ხაზგასმული.

მოითხოვს შედარებით პოზიციონირებას

განხორციელების მეთოდის მიუხედავად, scrollspy მოითხოვს იმ position: relative;ელემენტის გამოყენებას, რომელსაც თქვენ ჯაშუშობთ. უმეტეს შემთხვევაში ეს არის <body>. როდესაც Scrollspying ელემენტების გარდა <body>, დარწმუნდით, რომ აქვს heightკომპლექტი და overflow-y: scroll;გამოიყენება.

მონაცემთა ატრიბუტების მეშვეობით

იმისათვის, რომ ადვილად დაამატოთ scrollspy ქცევა თქვენს ზედა ზოლის ნავიგაციაში, დაამატეთ data-spy="scroll"ელემენტი, რომელზეც გსურთ თვალთვალისთვის (ყველაზე ხშირად ეს იქნება <body>). შემდეგ დაამატეთ data-targetატრიბუტი ნებისმიერი Bootstrap .navკომპონენტის მშობელი ელემენტის ID-ით ან კლასით.

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;შემდეგ, დარეკეთ scrollspy-ს JavaScript-ით:

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

მეთოდები

.scrollspy('refresh')

როდესაც იყენებთ scrollspy-ს DOM-დან ელემენტების დამატებასთან ან ამოღებასთან ერთად, თქვენ უნდა გამოიძახოთ განახლების მეთოდი ასე:

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

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-offset="".

სახელი ტიპი ნაგულისხმევი აღწერა
ოფსეტური ნომერი 10 გადახვევის პოზიციის გამოთვლისას ზემოდან გადასატანი პიქსელები.

Ივენთი

ღონისძიების ტიპი აღწერა
activate.bs.scrollspy ეს ღონისძიება ირთვება, როდესაც ახალი ელემენტი გააქტიურდება scrollspy-ით.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

გადართვადი ჩანართები tab.js

ჩანართების მაგალითი

დაამატეთ სწრაფი, დინამიური ჩანართის ფუნქციონალობა ადგილობრივი შინაარსის პანელის გადასასვლელად, თუნდაც ჩამოსაშლელი მენიუს საშუალებით. ჩადგმული ჩანართები არ არის მხარდაჭერილი.

ნედლი ჯინსი, თქვენ ალბათ არ გსმენიათ მათ შესახებ ჯინსის შორტები Austin. Nesciunt tofu stumptown aliqua, retro synth master წმენდა. ულვაში კლიშე დრო, უილიამსბურგი კარლეს ვეგანური ჰელვეტიკა. Reprehenderit ჯალათიც retro keffiyeh Dreamcatcher synth. Cosby sweater eu banh mi, qui irure ტერი რიჩარდსონი ex squid. აიფონის აბსოლუტური ადგილი. Seitan aliquip quis cardigan ამერიკული სამოსი, ჯალათი 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.

აფართოებს ჩანართების ნავიგაციას

ეს მოდული აფართოებს ჩანართებით ნავიგაციის კომპონენტს , რათა დაამატოთ სანიშნეები.

გამოყენება

ჩანართის ჩანართების ჩართვა 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)

მარკირება

თქვენ შეგიძლიათ გაააქტიუროთ ჩანართების ან აბების ნავიგაცია JavaScript-ის დაწერის გარეშე უბრალოდ ელემენტის მითითებით data-toggle="tab"ან მასზე. და კლასების ჩანართზე data-toggle="pill"დამატება გამოიყენებს Bootstrap ჩანართის სტილს , ხოლო და კლასების დამატება გამოიყენებს აბების სტილს .navnav-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>ატრიბუტებით 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მიზნად აქტიური ჩანართი და წინა აქტიური ჩანართი (თუ შესაძლებელია) შესაბამისად.
ნაჩვენები.ბს.ჩანართი ეს ღონისძიება ჩართულია ჩანართის ჩვენებაში მას შემდეგ, რაც გამოჩნდება ჩანართი. გამოიყენეთ event.targetდა event.relatedTargetმიზნად აქტიური ჩანართი და წინა აქტიური ჩანართი (თუ შესაძლებელია) შესაბამისად.
დამალვა.ბს.ჩანართი ეს მოვლენა ირთვება, როდესაც უნდა იყოს ნაჩვენები ახალი ჩანართი (და ამით წინა აქტიური ჩანართი უნდა დაიმალოს). გამოიყენეთ 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
})

Tooltips tooltip.js

შთაგონებულია ჯეისონ ფრეიმის მიერ დაწერილი შესანიშნავი jQuery.tipsy მოდულით; Tooltips არის განახლებული ვერსია, რომელიც არ ეყრდნობა სურათებს, იყენებს CSS3 ანიმაციისთვის და მონაცემთა ატრიბუტებს ადგილობრივი სათაურის შესანახად.

ინსტრუმენტების რჩევები ნულოვანი სიგრძის სათაურებით არასოდეს არის ნაჩვენები.

მაგალითები

ინსტრუმენტების რჩევების სანახავად გადაიტანეთ მაუსი ქვემოთ მოცემულ ბმულებზე:

მჭიდრო შარვალი შემდეგი დონის keffiyeh თქვენ ალბათ არ გსმენიათ მათ შესახებ. ფოტო ჯიხურის წვერი ნედლი ჯინსის ვეგანური მესენჯერის ჩანთა stumptown. ფერმიდან მაგიდამდე სეიტანი, Mcsweeney's fixie მდგრადი quinoa 8-ბიტიანი ამერიკული ტანსაცმელი აქვს ტერი რიჩარდსონის ვინილის შამბრი. წვერის სტამპთაუნი, კარდიგანები ბან მი ლომო ჭექა-ქუხილი. ტოფუ ბიოდიზელი ვილიამსბურგის მარფა, ოთხი ლოკო მაკსვინის გამწმენდი ვეგანური შამბრი. მართლაც ირონიული ხელოსანი , რაც არ უნდა ქეითარი , სცენის სცენის ფერმა-მაგიდა ბანკსი ოსტინ ტვიტერის სახელური freegan cred ნედლეული denim ერთი წარმოშობის ყავა ვირუსული.

სტატიკური ხელსაწყოს მინიშნება

ოთხი ვარიანტია ხელმისაწვდომი: ზემოთ, მარჯვნივ, ქვედა და მარცხნივ გასწორებული.

ოთხი მიმართულება

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

ჩართვის ფუნქცია

შესრულების მიზეზების გამო, Tooltip და Popover data-apis არის დაშვებული, რაც ნიშნავს, რომ თქვენ თავად უნდა მოაწყოთ ისინი .

გვერდზე ყველა ინსტრუმენტების ინიციალიზაციის ერთ-ერთი გზა იქნება მათი data-toggleატრიბუტის მიხედვით შერჩევა:

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

გამოყენება

Tooltip დანამატი წარმოქმნის შინაარსს და მარკირებას მოთხოვნისამებრ, და ნაგულისხმევად ათავსებს ინსტრუმენტების რჩევებს მათი ტრიგერის ელემენტის შემდეგ.

ჩართეთ ინსტრუმენტული მინიშნება JavaScript-ის საშუალებით:

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

მრავალხაზიანი ბმულები

ზოგჯერ გსურთ დაამატოთ ინსტრუმენტების მინიშნება ჰიპერბმულზე, რომელიც ახვევს რამდენიმე ხაზს. Tooltip მოდულის ნაგულისხმევი ქცევა არის მისი ჰორიზონტალურად და ვერტიკალურად ცენტრირება. დაამატეთ white-space: nowrap;თქვენს წამყვანებს ამის თავიდან ასაცილებლად.

ხელსაწყოების რჩევები ღილაკების ჯგუფებში, შეყვანის ჯგუფებში და ცხრილებში საჭიროებს სპეციალურ პარამეტრებს

როდესაც იყენებთ ინსტრუმენტების ინსტრუმენტებს ელემენტებზე a .btn-groupან an .input-group, ან ცხრილთან დაკავშირებულ ელემენტებზე ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), თქვენ უნდა მიუთითოთ ვარიანტი container: 'body'(დოკუმენტირებული ქვემოთ) არასასურველი გვერდითი ეფექტების თავიდან ასაცილებლად (როგორიცაა ელემენტის გაფართოება და/ ან კარგავს მომრგვალებულ კუთხეებს, როდესაც ხელსაწყოს წვერი ამოქმედდება).

არ შეეცადოთ აჩვენოთ ინსტრუმენტების რჩევები ფარულ ელემენტებზე

სამიზნე $(...).tooltip('show')ელემენტის გამოძახება display: none;გამოიწვევს ხელსაწყოს არასწორად განლაგებას.

ხელმისაწვდომი ინსტრუმენტები კლავიატურისა და დამხმარე ტექნოლოგიების მომხმარებლებისთვის

კლავიატურით ნავიგაციური მომხმარებლებისთვის და განსაკუთრებით დამხმარე ტექნოლოგიების მომხმარებლებისთვის, თქვენ უნდა დაამატოთ მხოლოდ ინსტრუმენტების რჩევები კლავიატურაზე ფოკუსირებულ ელემენტებზე, როგორიცაა ბმულები, ფორმის მართვის საშუალებები ან რაიმე თვითნებური ელემენტი tabindex="0"ატრიბუტით.

გათიშულ ელემენტებზე ინსტრუმენტების რჩევები საჭიროებს შეფუთვის ელემენტებს

disableda-ს ან ელემენტზე მინიშნების დასამატებლად .disabled, ჩადეთ ელემენტი a-ს შიგნით და ამის ნაცვლად <div>გამოიყენეთ ინსტრუმენტების მინიშნება.<div>

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-animation="".

სახელი ტიპი ნაგულისხმევი აღწერა
ანიმაცია ლოგიკური მართალია გამოიყენეთ CSS fade გადასვლა ინსტრუმენტზე
კონტეინერი სიმებიანი | ყალბი ყალბი

ანიჭებს ხელსაწყოს მინიშნებას კონკრეტულ ელემენტს. მაგალითი container: 'body':. ეს ვარიანტი განსაკუთრებით სასარგებლოა იმით, რომ საშუალებას გაძლევთ მოათავსოთ ინსტრუმენტების მინიშნება დოკუმენტის ნაკადში გამომწვევ ელემენტთან ახლოს - რაც ხელს შეუშლის ხელსაწყოს მინიშნებას ტრიგერის ელემენტისგან მოშორებით ფანჯრის ზომის შეცვლისას.

დაგვიანებით ნომერი | ობიექტი 0

ინსტრუმენტების მითითების ჩვენება და დამალვის დაგვიანება (ms) - არ ვრცელდება ხელით ტრიგერის ტიპზე

თუ ნომერი მოწოდებულია, დაგვიანება გამოიყენება ორივე დამალვა/ჩვენებაზე

ობიექტის სტრუქტურა არის:delay: { "show": 500, "hide": 100 }

html ლოგიკური ყალბი ჩადეთ HTML ინსტრუმენტთა რჩევაში. თუ არასწორია, jQuery-ის textმეთოდი გამოყენებული იქნება შინაარსის DOM-ში ჩასართავად. გამოიყენეთ ტექსტი, თუ გაწუხებთ XSS შეტევები.
განთავსება სიმებიანი | ფუნქცია "ზედა"

როგორ განვათავსოთ ხელსაწყოს მინიშნება - ზედა | ქვედა | მარცხენა | მარჯვენა | ავტო.
როდესაც მითითებულია "auto", ის დინამიურად გადააბრუნებს ხელსაწყოს მინიშნებას. მაგალითად, თუ განთავსება არის "ავტომატური მარცხნივ", ხელსაწყოს მინიშნება გამოჩნდება მარცხნივ, როდესაც ეს შესაძლებელია, წინააღმდეგ შემთხვევაში ის გამოჩნდება მარჯვნივ.

როდესაც ფუნქცია გამოიყენება განლაგების დასადგენად, ის გამოიძახება ინსტრუმენტების რჩევით 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მითითების სიმრავლით იმ ელემენტთან, რომელზეც მიმაგრებულია ინსტრუმენტი.

გამომწვევი სიმებიანი "ფოკუსირება" როგორ ხდება ინსტრუმენტების მითითება - დააწკაპუნეთ | hover | ფოკუსირება | სახელმძღვანელო. თქვენ შეგიძლიათ გაიაროთ მრავალი ტრიგერი; გამოყავით ისინი სივრცეში. manualარ შეიძლება გაერთიანდეს სხვა ტრიგერთან.
ხედვის პორტი სიმებიანი | ობიექტი | ფუნქცია { ამომრჩევი: 'სხეული', padding: 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 ეს ღონისძიება გააქტიურებულია, როდესაც ინსტრუმენტების მინიშნება დასრულდა მომხმარებლისგან დამალული (დაელოდება CSS გადასვლების დასრულებას).
ჩასმული.bs.tooltip ეს ღონისძიება გააქტიურებულია show.bs.tooltipღონისძიების შემდეგ, როდესაც ინსტრუმენტის მინიშნება შაბლონი დაემატება DOM-ს.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

დაამატეთ შინაარსის მცირე გადაფარვები, როგორიცაა iPad-ზე, ნებისმიერ ელემენტს მეორადი ინფორმაციის განთავსებისთვის.

პოპოვერები, რომელთა სათაურიც და შინაარსიც ნულოვანი სიგრძისაა, არასდროს არ გამოჩნდება.

დანამატის დამოკიდებულება

Popovers მოითხოვს Tooltip მოდულის ჩართვას Bootstrap-ის თქვენს ვერსიაში.

ჩართვის ფუნქცია

შესრულების მიზეზების გამო, Tooltip და Popover data-apis არის დაშვებული, რაც ნიშნავს, რომ თქვენ თავად უნდა მოაწყოთ ისინი .

გვერდზე ყველა პოპოვერის ინიციალიზაციის ერთ-ერთი გზა იქნება მათი data-toggleატრიბუტის მიხედვით შერჩევა:

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

Popovers ღილაკების ჯგუფებში, შეყვანის ჯგუფებში და ცხრილებში საჭიროებს სპეციალურ პარამეტრებს

პოპოვერების გამოყენებისას ელემენტებზე a .btn-groupან an-ში .input-group, ან მაგიდასთან დაკავშირებულ ელემენტებზე ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), თქვენ უნდა მიუთითოთ ვარიანტი container: 'body'(დოკუმენტირებული ქვემოთ) არასასურველი გვერდითი ეფექტების თავიდან ასაცილებლად (როგორიცაა ელემენტის გაფართოება და/ ან კარგავს მომრგვალებულ კუთხეებს პოპოვერის გააქტიურებისას).

არ შეეცადოთ აჩვენოთ პოპოვერები ფარულ ელემენტებზე

$(...).popover('show')სამიზნე ელემენტის display: none;გამოძახება გამოიწვევს პოპოვერის არასწორ პოზიციონირებას .

გათიშულ ელემენტებზე პოპოვერები საჭიროებენ შეფუთვის ელემენტებს

disableda-ს ან ელემენტზე პოპოვერის დასამატებლად, ჩადეთ .disabledელემენტი a-ს შიგნით <div>და მის ნაცვლად გამოიყენეთ პოპოვერი <div>.

მრავალხაზიანი ბმულები

ზოგჯერ გსურთ დაამატოთ popover ჰიპერბმულზე, რომელიც ახვევს რამდენიმე ხაზს. Popover მოდულის ნაგულისხმევი ქცევა არის მისი ჰორიზონტალურად და ვერტიკალურად ცენტრირება. დაამატეთ white-space: nowrap;თქვენს წამყვანებს ამის თავიდან ასაცილებლად.

მაგალითები

სტატიკური პოპოვერი

ოთხი ვარიანტია ხელმისაწვდომი: ზემოთ, მარჯვნივ, ქვედა და მარცხნივ გასწორებული.

პოპოვერ ტოპი

Sed posuere consectetur est at lobortis. ენეან ეუ ლეო ქუამ. Pellentesque ornare sem lacinia quam venenatis vestibulum.

პოპოვერის უფლება

Sed posuere consectetur est at lobortis. ენეან ეუ ლეო ქუამ. Pellentesque ornare sem lacinia quam venenatis vestibulum.

პოპოვერის ქვედა ნაწილი

Sed posuere consectetur est at lobortis. ენეან ეუ ლეო ქუამ. Pellentesque ornare sem lacinia quam venenatis vestibulum.

პოპოვერი დატოვა

Sed posuere consectetur est at lobortis. ენეან ეუ ლეო ქუამ. 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>

გამოყენება

ჩართეთ პოპოვერები JavaScript-ით:

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

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-animation="".

სახელი ტიპი ნაგულისხმევი აღწერა
ანიმაცია ლოგიკური მართალია გამოიყენეთ CSS fade გადასვლა პოპოვერზე
კონტეინერი სიმებიანი | ყალბი ყალბი

ანიჭებს პოპოვერს კონკრეტულ ელემენტს. მაგალითი container: 'body':. ეს პარამეტრი განსაკუთრებით სასარგებლოა იმით, რომ საშუალებას გაძლევთ მოათავსოთ პოპოვერი დოკუმენტის ნაკადში გამომწვევ ელემენტთან ახლოს - რაც ხელს შეუშლის პოპოვერს ტრიგერის ელემენტისგან მოშორებას ფანჯრის ზომის შეცვლის დროს.

შინაარსი სიმებიანი | ფუნქცია ''

კონტენტის ნაგულისხმევი მნიშვნელობა, თუ data-contentატრიბუტი არ არის.

თუ ფუნქცია მოცემულია, ის გამოიძახება მისი thisმითითების ნაკრებით იმ ელემენტთან, რომელზეც არის მიმაგრებული popover.

დაგვიანებით ნომერი | ობიექტი 0

პოპოვერის (ms) ჩვენება და დამალვის დაგვიანება - არ ვრცელდება ხელით ტრიგერის ტიპზე

თუ ნომერი მოწოდებულია, დაგვიანება გამოიყენება ორივე დამალვა/ჩვენებაზე

ობიექტის სტრუქტურა არის:delay: { "show": 500, "hide": 100 }

html ლოგიკური ყალბი ჩადეთ HTML პოპოვერში. თუ არასწორია, jQuery-ის textმეთოდი გამოყენებული იქნება შინაარსის DOM-ში ჩასართავად. გამოიყენეთ ტექსტი, თუ გაწუხებთ XSS შეტევები.
განთავსება სიმებიანი | ფუნქცია "მართალი"

როგორ განვათავსოთ პოპოვერი - ტოპ | ქვედა | მარცხენა | მარჯვენა | ავტო.
როდესაც მითითებულია "auto", ის დინამიურად გადააბრუნებს პოპოვერს. მაგალითად, თუ განთავსება არის "ავტომატური მარცხნივ", popover გამოჩნდება მარცხნივ, როდესაც ეს შესაძლებელია, წინააღმდეგ შემთხვევაში ის გამოჩნდება მარჯვნივ.

როდესაც ფუნქცია გამოიყენება განლაგების დასადგენად, ის გამოიძახება popover DOM კვანძით, როგორც მისი პირველი არგუმენტი და გამომწვევი ელემენტის DOM კვანძი, როგორც მისი მეორე. thisკონტექსტი დაყენებულია პოპოვერის მაგალითზე .

სელექტორი სიმებიანი ყალბი თუ სელექტორი არის მოწოდებული, popover ობიექტები დელეგირებული იქნება მითითებულ სამიზნეებზე. პრაქტიკაში, ეს გამოიყენება დინამიური HTML შინაარსის დასამატებლად popovers. იხილეთ ეს და ინფორმაციული მაგალითი .
შაბლონი სიმებიანი '<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მითითების ნაკრებით იმ ელემენტთან, რომელზეც არის მიმაგრებული popover.

გამომწვევი სიმებიანი "დაწკაპუნება" როგორ ხდება პოპოვერის გააქტიურება - დააწკაპუნეთ | hover | ფოკუსირება | სახელმძღვანელო. თქვენ შეგიძლიათ გაიაროთ მრავალი ტრიგერი; გამოყავით ისინი სივრცეში. manualარ შეიძლება გაერთიანდეს სხვა ტრიგერთან.
ხედვის პორტი სიმებიანი | ობიექტი | ფუნქცია { ამომრჩევი: 'სხეული', padding: 0 }

ინარჩუნებს პოპოვერს ამ ელემენტის საზღვრებში. მაგალითი: viewport: '#viewport'ან{ "selector": "#viewport", "padding": 0 }

თუ ფუნქცია მოცემულია, ის გამოიძახება გამომწვევი ელემენტის DOM კვანძის ერთადერთ არგუმენტად. thisკონტექსტი დაყენებულია პოპოვერის მაგალითზე .

მონაცემთა ატრიბუტები ინდივიდუალური პოპოვერებისთვის

ცალკეული პოპოვერების ვარიანტები შეიძლება ალტერნატიულად განისაზღვროს მონაცემთა ატრიბუტების გამოყენებით, როგორც ეს ზემოთ იყო ახსნილი.

მეთოდები

$().popover(options)

ახორციელებს პოპოვერების ინიციალიზებას ელემენტების კოლექციისთვის.

.popover('show')

ავლენს ელემენტის პოპოვერს. უბრუნდება აბონენტს პოპოვერის რეალურად ჩვენებამდე (ანუ shown.bs.popoverმოვლენის დადგომამდე). ეს განიხილება პოპოვერის "სახელმძღვანელო" გამომწვევად. პოპოვერები, რომელთა სათაურიც და შინაარსიც ნულოვანი სიგრძისაა, არასდროს არ გამოჩნდება.

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

.popover('hide')

მალავს ელემენტის პოპოვერს. უბრუნდება აბონენტს პოპოვერის რეალურად დამალვამდე (ანუ hidden.bs.popoverმოვლენის დადგომამდე). ეს განიხილება პოპოვერის "სახელმძღვანელო" გამომწვევად.

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

.popover('toggle')

ცვლის ელემენტის პოპოვერს. უბრუნდება აბონენტს პოპოვერის რეალურად ჩვენებამდე ან დამალვამდე (ანუ, სანამ shown.bs.popoverან hidden.bs.popoverმოვლენა მოხდება). ეს განიხილება პოპოვერის "სახელმძღვანელო" გამომწვევად.

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

.popover('destroy')

მალავს და ანადგურებს ელემენტის პოპოვერს. პოპოვერები, რომლებიც იყენებენ დელეგირებას (რომლებიც იქმნება ოფციის გამოყენებით ) selectorარ შეიძლება ინდივიდუალურად განადგურდეს შთამომავლობის ტრიგერების ელემენტებზე.

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

Ივენთი

ღონისძიების ტიპი აღწერა
შოუ.ბს.პოპოვერი ეს მოვლენა მაშინვე ირთვება, როდესაც showგამოიძახება ეგზემპლარის მეთოდი.
ნაჩვენებია.ბს.პოპოვერი ეს ღონისძიება გააქტიურებულია, როდესაც პოპოვერი გახდება მომხმარებლისთვის ხილული (დაელოდება CSS გადასვლების დასრულებას).
დამალვა.ბს.პოპოვერი ეს ღონისძიება გააქტიურებულია მაშინვე, როდესაც hideგამოიძახება ინსტანციის მეთოდი.
დამალული.ბს.პოპოვერი ეს ღონისძიება გააქტიურებულია, როდესაც პოპოვერი დაასრულებს მომხმარებლისგან დამალვას (დაელოდება CSS გადასვლების დასრულებას).
ჩასმული.ბს.პოპოვერი ეს ღონისძიება show.bs.popoverგააქტიურებულია ღონისძიების შემდეგ, როდესაც popover-ის შაბლონი დაემატება DOM-ს.
$('#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კლასები, გაფრთხილება გაქრება მის წაშლამდე.

Ივენთი

Bootstrap-ის გაფრთხილების მოდული ავლენს რამდენიმე მოვლენას გაფრთხილების ფუნქციონირებაში ჩასართავად.

ღონისძიების ტიპი აღწერა
დახურვა.ბს.გაფრთხილება ეს მოვლენა მაშინვე ირთვება, როდესაც closeგამოიძახება ეგზემპლარის მეთოდი.
დახურულია.ბს.გაფრთხილება ეს ღონისძიება გააქტიურებულია, როდესაც გაფრთხილება დაიხურება (დაელოდება CSS გადასვლების დასრულებას).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

ღილაკების ღილაკი .js

გააკეთე მეტი ღილაკებით. აკონტროლეთ ღილაკის მდგომარეობა ან შექმენით ღილაკების ჯგუფები მეტი კომპონენტისთვის, როგორიცაა ხელსაწყოთა ზოლები.

ჯვარედინი ბრაუზერის თავსებადობა

Firefox აგრძელებს კონტროლის მდგომარეობებს (გათიშვა და შემოწმება) გვერდების ჩატვირთვისას . ამის გამოსავალი არის გამოყენება 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>

Collapse collapse.js

მოქნილი დანამატი, რომელიც იყენებს რამდენიმე კლასს ადვილად გადართვის ქცევისთვის.

დანამატის დამოკიდებულება

კოლაფსი მოითხოვს გადასვლების მოდულის ჩართვას Bootstrap-ის თქვენს ვერსიაში.

მაგალითი

დააწკაპუნეთ ქვემოთ მოცემულ ღილაკებზე, რათა ნახოთ და დამალოთ სხვა ელემენტი კლასის ცვლილებების მეშვეობით:

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

აკორდეონის მაგალითი

გააფართოვეთ ნაგულისხმევი კოლაფსის ქცევა პანელის კომპონენტთან აკორდეონის შესაქმნელად.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. კვების სატვირთო მანქანა quinoa nesciunt laborum eiusmod. ბრანჩი 3 მგლის მთვარე დრო, sunt aliqua დააყენა ჩიტი მასზე squid ერთი წარმოშობის ყავა nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. რეკლამა ვეგანის გარდა ჯალათი ვიცე ლომო. გამაშები occaecat ხელნაკეთი ლუდის ფერმა-მაგიდაზე, ნედლი ჯინსის ესთეტიკური სინთეზური ნესტიანი, თქვენ ალბათ არ გსმენიათ მათ შესახებ accusamus labore მდგრადი VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. კვების სატვირთო მანქანა quinoa nesciunt laborum eiusmod. ბრანჩი 3 მგლის მთვარე დრო, sunt aliqua დააყენა ჩიტი მასზე squid ერთი წარმოშობის ყავა nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. რეკლამა ვეგანის გარდა ჯალათი ვიცე ლომო. გამაშები occaecat ხელნაკეთი ლუდის ფერმა-მაგიდაზე, ნედლი ჯინსის ესთეტიკური სინთეზური ნესტიანი, თქვენ ალბათ არ გსმენიათ მათ შესახებ accusamus labore მდგრადი VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. კვების სატვირთო მანქანა quinoa nesciunt laborum eiusmod. ბრანჩი 3 მგლის მთვარე დრო, sunt aliqua დააყენა ჩიტი მასზე squid ერთი წარმოშობის ყავა nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. რეკლამა ვეგანის გარდა ჯალათი ვიცე ლომო. გამაშები occaecat ხელნაკეთი ლუდის ფერმა-მაგიდაზე, ნედლი ჯინსის ესთეტიკური სინთეზური ნესტიანი, თქვენ ალბათ არ გსმენიათ მათ შესახებ accusamus labore მდგრადი 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-ის შეცვლა .list-groups-ით.

  • Bootply
  • ერთი itmus ac facilin
  • მეორე ეროსი

გაფართოება/ჩაკეცვა მართვის საშუალებების ხელმისაწვდომობა

დარწმუნდით, რომ დაამატეთ aria-expandedსაკონტროლო ელემენტს. ეს ატრიბუტი ცალსახად განსაზღვრავს დასაკეცი ელემენტის ამჟამინდელ მდგომარეობას ეკრანის წამკითხველებისთვის და მსგავსი დამხმარე ტექნოლოგიებისთვის. თუ დასაკეცი ელემენტი ნაგულისხმევად დახურულია, მას უნდა ჰქონდეს მნიშვნელობა aria-expanded="false". თუ თქვენ დააყენეთ დასაკეცი ელემენტი ნაგულისხმევად ღიად inკლასის გამოყენებით, დააყენეთaria-expanded="true" სანაცვლოდ დააყენეთ კონტროლზე. დანამატი ავტომატურად გადართავს ამ ატრიბუტს იმის მიხედვით, არის თუ არა დასაკეცი ელემენტი გახსნილი ან დახურული.

გარდა ამისა, თუ თქვენი საკონტროლო ელემენტი მიზნად ისახავს ერთ დასაკეც ელემენტს - ანუ data-targetატრიბუტი მიუთითებს idამომრჩეველზე - შეგიძლიათ დაამატოთ დამატებითი aria-controlsატრიბუტი საკონტროლო ელემენტს, რომელიც შეიცავს idდასაკეც ელემენტს. თანამედროვე ეკრანის წამკითხველები და მსგავსი დამხმარე ტექნოლოგიები იყენებენ ამ ატრიბუტს, რათა მომხმარებლებს მიაწოდონ დამატებითი მალსახმობები, რათა ნავიგაციონ უშუალოდ თვით დასაკეც ელემენტზე.

გამოყენება

კოლაფსის დანამატი იყენებს რამდენიმე კლასს მძიმე აწევისთვის:

  • .collapseმალავს შინაარსს
  • .collapse.inაჩვენებს შინაარსს
  • .collapsingემატება გადასვლის დაწყებისას და ამოღებულია როცა დასრულდება

ამ კლასების ნახვა შეგიძლიათ component-animations.less.

მონაცემთა ატრიბუტების მეშვეობით

უბრალოდ დაამატეთ data-toggle="collapse"და a data-targetელემენტს, რათა ავტომატურად მიენიჭოს კონტროლი დასაკეც ელემენტს. ატრიბუტი იღებს CSS ამომრჩეველს data-targetკოლაფსის გამოსაყენებლად. დარწმუნდით, რომ დაამატეთ კლასი collapseდასაკეც ელემენტს. თუ გსურთ ნაგულისხმევად გახსნა, დაამატეთ დამატებითი კლასი in.

აკორდეონის მსგავსი ჯგუფის მართვის დასამატებლად დასაკეცი კონტროლში, დაამატეთ მონაცემთა ატრიბუტი data-parent="#selector". იხილეთ დემო ვერსია, რომ ნახოთ ეს მოქმედებაში.

JavaScript-ის საშუალებით

ხელით ჩართეთ:

$('.collapse').collapse()

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-parent="".

სახელი ტიპი ნაგულისხმევი აღწერა
მშობელი სელექტორი ყალბი თუ სელექტორი არის მოწოდებული, მაშინ ყველა დასაკეცი ელემენტი მითითებული მშობლის ქვეშ დაიხურება, როდესაც ეს დასაკეცი ელემენტი გამოჩნდება. (ტრადიციული აკორდეონის ქცევის მსგავსად - ეს დამოკიდებულია panelკლასზე)
გადართვა ლოგიკური მართალია რთავს დასაკეც ელემენტს გამოძახებისას

მეთოდები

.collapse(options)

ააქტიურებს თქვენს კონტენტს, როგორც დასაკეცი ელემენტს. იღებს არასავალდებულო ვარიანტებს object.

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

.collapse('toggle')

გადართავს დასაკეც ელემენტს ჩვენებაზე ან დამალვაზე. უბრუნდება აბონენტს მანამ, სანამ დასაკეცი ელემენტი რეალურად იქნება ნაჩვენები ან დამალული (ანუ, სანამ shown.bs.collapseან hidden.bs.collapseმოვლენა მოხდება).

.collapse('show')

აჩვენებს დასაკეც ელემენტს. უბრუნდება აბონენტს, სანამ დასაკეცი ელემენტი რეალურად გამოჩნდება (ანუ shown.bs.collapseმოვლენის დადგომამდე).

.collapse('hide')

მალავს დასაკეც ელემენტს. უბრუნდება აბონენტს, სანამ დასაკეცი ელემენტი რეალურად დამალული იქნება (ანუ hidden.bs.collapseმოვლენის დადგომამდე).

Ივენთი

Bootstrap-ის კოლაფსის კლასი ავლენს რამდენიმე მოვლენას კოლაფსის ფუნქციონირებაში ჩასართავად.

ღონისძიების ტიპი აღწერა
ჩვენება.ბს.ჩამოქცევა ეს მოვლენა მაშინვე ირთვება, როდესაც showგამოიძახება ეგზემპლარის მეთოდი.
ნაჩვენებია.ბს.ჩამოშლა ეს ღონისძიება გააქტიურებულია, როდესაც კოლაფსის ელემენტი მომხმარებლისთვის ხილული გახდება (დაელოდება CSS გადასვლების დასრულებას).
დამალვა.ბს.ჩამოქცევა ეს ღონისძიება ჩართულია მაშინვე, როდესაც hideმეთოდი გამოიძახება.
დამალული.ბს.ჩამოქცევა ეს ღონისძიება გააქტიურებულია, როდესაც მომხმარებლისგან დამალულია კოლაფსის ელემენტი (დაელოდება 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გარე კონტეინერზე (the .carousel) გამოყენებას კარუსელის კონტროლის სწორად ფუნქციონირებისთვის. რამდენიმე კარუსელის დამატებისას ან კარუსელის შეცვლისას idაუცილებლად განაახლეთ შესაბამისი კონტროლი.

მონაცემთა ატრიბუტების მეშვეობით

გამოიყენეთ მონაცემთა ატრიბუტები კარუსელის პოზიციის მარტივად გასაკონტროლებლად. data-slideიღებს საკვანძო სიტყვებს prevან next, რომელიც ცვლის სლაიდის პოზიციას მის ამჟამინდელ პოზიციასთან შედარებით. ალტერნატიულად, გამოიყენეთ data-slide-toნედლი სლაიდის ინდექსის კარუსელში გადასაცემად data-slide-to="2", რომელიც ცვლის სლაიდის პოზიციას კონკრეტულ ინდექსზე დაწყებული 0.

ატრიბუტი გამოიყენება კარუსელის აღსანიშნავად data-ride="carousel", როგორც ანიმაციური გვერდის ჩატვირთვისას. მისი გამოყენება შეუძლებელია იმავე კარუსელის (ზედმეტად და არასაჭირო) აშკარა JavaScript ინიციალიზაციასთან ერთად.

JavaScript-ის საშუალებით

კარუსელის ხელით გამოძახება:

$('.carousel').carousel()

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-interval="".

სახელი ტიპი ნაგულისხმევი აღწერა
ინტერვალი ნომერი 5000 დრო, რომელიც დაგვიანებულია ნივთის ავტომატურ ველოსიპედს შორის. თუ არასწორია, კარუსელი ავტომატურად არ დატრიალდება.
პაუზა სიმებიანი | null "ჰოვერ" თუ დაყენებულია "hover", აჩერებს კარუსელის mouseenterველოსიპედს და განაახლებს კარუსელის ველოსიპედის ჩართვას mouseleave. თუ დაყენებულია null-ზე, კარუსელზე გადახვევა არ შეაჩერებს მას.
გადახვევა ლოგიკური მართალია უნდა მოძრაობდეს თუ არა კარუსელი განუწყვეტლივ თუ რთული გაჩერებები.
კლავიატურა ლოგიკური მართალია უნდა რეაგირებდეს თუ არა კარუსელი კლავიატურის მოვლენებზე.

ახორციელებს კარუსელის ინიციალიზაციას არჩევითი ოფციებით objectდა იწყებს ველოსიპედით სვლას ნივთებზე.

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

მოძრაობს კარუსელის ელემენტებში მარცხნიდან მარჯვნივ.

აჩერებს კარუსელს ნივთების ველოსიპედით გადაადგილებას.

აბრუნებს კარუსელს კონკრეტულ ჩარჩოზე (0-ზე დაფუძნებული, მასივის მსგავსი).

ციკლები წინა პუნქტამდე.

ციკლები შემდეგ პუნქტზე.

Bootstrap-ის კარუსელის კლასი ავლენს ორ მოვლენას კარუსელის ფუნქციონალებში ჩასართავად.

ორივე მოვლენას აქვს შემდეგი დამატებითი თვისებები:

  • direction: მიმართულება, რომლითაც სრიალებს კარუსელი (ან "left"ან "right").
  • relatedTarget: DOM ელემენტი, რომელიც სრიალდება ადგილზე, როგორც აქტიური ელემენტი.

კარუსელის ყველა ღონისძიება ისროლება თავად კარუსელზე (ანუ ზე <div class="carousel">).

ღონისძიების ტიპი აღწერა
სლაიდი.ბს.კარუსელი ეს მოვლენა მაშინვე ირთვება, როდესაც slideინსტანციის მეთოდი გამოიძახება.
სრიალი.ბს.კარუსელი ეს ღონისძიება გააქტიურებულია, როდესაც კარუსელი დაასრულებს სლაიდზე გადასვლას.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

მიამაგრეთ affix.js

მაგალითი

აფიქსის დანამატი position: fixed;ჩართულია და გამორთულია, რაც ასახავს ეფექტს position: sticky;. ქვენავიგაცია მარჯვნივ არის affix მოდულის ცოცხალი დემო ვერსია.


გამოყენება

გამოიყენეთ აფიქსის დანამატი მონაცემთა ატრიბუტების საშუალებით ან ხელით თქვენი JavaScript-ით.ორივე შემთხვევაში, თქვენ უნდა მიაწოდოთ CSS თქვენი დამაგრებული შინაარსის პოზიციონირებისა და სიგანისთვის.

შენიშვნა: არ გამოიყენოთ აფიქსის დანამატი ელემენტზე, რომელიც შეიცავს შედარებით განლაგებულ ელემენტს, როგორიცაა გამოყვანილი ან აწეული სვეტი, Safari-ის რენდერის ხარვეზის გამო .

პოზიციონირება CSS-ის საშუალებით

აფიქსის დანამატი გადართავს სამ კლასს შორის, თითოეული წარმოადგენს კონკრეტულ მდგომარეობას: .affix, .affix-topდა .affix-bottom. თქვენ უნდა მიაწოდოთ სტილები, გარდა position: fixed;on-ისა .affix, ამ კლასებისთვის (ამ დანამატისგან დამოუკიდებლად), რათა გაუმკლავდეთ რეალურ პოზიციებს.

აი, როგორ მუშაობს აფიქსის მოდული:

  1. დასაწყებად, მოდული ამატებს .affix-topიმის მითითებას, რომ ელემენტი ყველაზე მაღალ პოზიციაზეა. ამ ეტაპზე არ არის საჭირო CSS პოზიციონირება.
  2. ელემენტის უკან გადახვევა, რომლის დამაგრებაც გსურთ, უნდა გამოიწვიოს ფაქტობრივი დამაგრება. ეს არის სადაც .affixჩანაცვლება .affix-topდა კომპლექტი position: fixed;(მოწოდებულია Bootstrap-ის CSS-ით).
  3. თუ ქვედა ოფსეტი არის განსაზღვრული, მის წინ გადახვევა უნდა .affixშეიცვალოს .affix-bottom. ვინაიდან ოფსეტები არჩევითია, ერთის დაყენება მოითხოვს, რომ დააყენოთ შესაბამისი CSS. ამ შემთხვევაში, საჭიროების შემთხვევაში დაამატეთ position: absolute;. დანამატი იყენებს მონაცემთა ატრიბუტს ან JavaScript ოფციას, რათა დადგინდეს, სად უნდა განთავსდეს ელემენტი იქიდან.

მიჰყევით ზემოთ მოცემულ ნაბიჯებს, რომ დააყენოთ თქვენი CSS ქვემოთ მოცემული გამოყენების რომელიმე ვარიანტისთვის.

მონაცემთა ატრიბუტების მეშვეობით

იმისათვის, რომ მარტივად დაამატოთ აფიქსის ქცევა ნებისმიერ ელემენტზე, უბრალოდ დაამატეთ ელემენტი, data-spy="affix"რომლის დაზვერვა გსურთ. გამოიყენეთ ოფსეტები, რათა განსაზღვროთ, როდის უნდა გადართოთ ელემენტის ჩამაგრება.

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

JavaScript-ის საშუალებით

დარეკეთ აფიქსის დანამატს JavaScript-ის საშუალებით:

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

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-offset-top="200".

სახელი ტიპი ნაგულისხმევი აღწერა
ოფსეტური ნომერი | ფუნქცია | ობიექტი 10 გადახვევის პოზიციის გაანგარიშებისას ეკრანიდან გადასატანი პიქსელები. თუ მოწოდებულია ერთი ნომერი, ოფსეტი გამოყენებული იქნება როგორც ზედა, ასევე ქვედა მიმართულებით. უნიკალური, ქვედა და ზედა ოფსეტის უზრუნველსაყოფად, უბრალოდ მიაწოდეთ ობიექტი offset: { top: 10 }ან offset: { top: 10, bottom: 5 }. გამოიყენეთ ფუნქცია, როდესაც საჭიროა დინამიურად გამოთვალოთ ოფსეტური.
სამიზნე სელექტორი | კვანძი | jQuery ელემენტი windowობიექტი _ განსაზღვრავს აფიქსის სამიზნე ელემენტს.

მეთოდები

.affix(options)

ააქტიურებს თქვენს შინაარსს, როგორც დამაგრებულ კონტენტს. იღებს არასავალდებულო ვარიანტებს object.

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

.affix('checkPosition')

ხელახლა ითვლის აფიქსის მდგომარეობას შესაბამისი ელემენტების ზომების, პოზიციისა და გადახვევის პოზიციის მიხედვით. , .affix, .affix-topდა .affix-bottomკლასები ემატება ან ამოღებულია დამაგრებულ კონტენტზე ახალი მდგომარეობის მიხედვით. ამ მეთოდის გამოძახებაა საჭირო, როდესაც შეიცვლება დამაგრებული შინაარსის ან სამიზნე ელემენტის ზომები, დამაგრებული შინაარსის სწორი პოზიციონირების უზრუნველსაყოფად.

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

Ივენთი

Bootstrap-ის აფიქსის დანამატი ავლენს რამდენიმე მოვლენას აფიქსის ფუნქციონირებაში ჩასართავად.

ღონისძიების ტიპი აღწერა
დამაგრება.ბს.აფიქსი ეს მოვლენა ირთვება ელემენტის დამაგრებამდე.
დამაგრებული.ბს.აფიქსი ეს ღონისძიება გააქტიურებულია ელემენტის დამაგრების შემდეგ.
affix-top.bs.affix ეს მოვლენა ირთვება უშუალოდ ელემენტის თავზე დამაგრებამდე.
დამაგრებული-ზედა.ბს.აფიქსი ეს ღონისძიება გააქტიურებულია მას შემდეგ, რაც ელემენტი დამაგრებულია ზემოთ.
აფიქს-ქვედა.ბს.აფიქსი ეს მოვლენა ირთვება ელემენტის ბოლოში დამაგრებამდე.
დამაგრებული-ქვედა.ბს.აფიქსი ეს ღონისძიება გააქტიურებულია ელემენტის ბოლოში დამაგრების შემდეგ.