Source

ინსტრუმენტების რჩევები

დოკუმენტაცია და მაგალითები პერსონალური Bootstrap-ის ინსტრუმენტების დასამატებლად CSS-ით და JavaScript-ით CSS3-ის გამოყენებით ანიმაციებისთვის და მონაცემთა ატრიბუტების ლოკალური სათაურის შესანახად.

მიმოხილვა

რა უნდა იცოდეთ ხელსაწყოების მოდულის გამოყენებისას:

  • ინსტრუმენტების რჩევები ეყრდნობა მე-3 მხარის ბიბლიოთეკას Popper.js- ს პოზიციონირებისთვის. თქვენ უნდა შეიტანოთ popper.min.js bootstrap.js-მდე ან გამოიყენოთ bootstrap.bundle.min.js/ bootstrap.bundle.jsრომელიც შეიცავს Popper.js-ს, რათა ინსტრუმენტების რჩევები იმუშაოს!
  • თუ თქვენ აშენებთ ჩვენს JavaScript-ს წყაროდან, ის მოითხოვსutil.js .
  • ინსტრუმენტების მინიშნებები დაშვებულია შესრულების მიზეზების გამო, ამიტომ თქვენ თავად უნდა მოაწყოთ ისინი .
  • ინსტრუმენტების რჩევები ნულოვანი სიგრძის სათაურებით არასოდეს არის ნაჩვენები.
  • მიუთითეთ container: 'body', რათა თავიდან აიცილოთ პრობლემები უფრო რთულ კომპონენტებში (როგორიცაა ჩვენი შეყვანის ჯგუფები, ღილაკების ჯგუფები და ა.შ.).
  • დამალულ ელემენტებზე ხელსაწყოების ჩართვა არ იმუშავებს.
  • ინსტრუმენტების რჩევები .disabledან disabledელემენტები უნდა იყოს ჩართული შეფუთვის ელემენტზე.
  • როდესაც ამოქმედდება ჰიპერბმულებიდან, რომლებიც მოიცავს მრავალ ხაზს, ინსტრუმენტების რჩევები იქნება ცენტრში. გამოიყენეთ white-space: nowrap;თქვენი <a>s, რათა თავიდან აიცილოთ ეს ქცევა.
  • ინსტრუმენტების მინიშნებები უნდა იყოს დამალული, სანამ მათი შესაბამისი ელემენტები DOM-დან წაიშლება.

მიიღე ეს ყველაფერი? კარგია, ვნახოთ, როგორ მუშაობენ ისინი რამდენიმე მაგალითით.

მაგალითი: ჩართეთ ინსტრუმენტების რჩევები ყველგან

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

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

მაგალითები

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

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

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

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

და მორგებული HTML-ით დამატებული:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

გამოყენება

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

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

$('#example').tooltip(options)
გადადინება autoდაscroll

Tooltip პოზიცია ცდილობს ავტომატურად შეიცვალოს, როდესაც მშობელი კონტეინერი აქვს overflow: autoან overflow: scrollმოსწონს ჩვენი .table-responsive, მაგრამ მაინც ინარჩუნებს თავდაპირველ განლაგებას. გადასაჭრელად დააყენეთ boundaryოფცია სხვა რამეზე, გარდა ნაგულისხმევი მნიშვნელობისა, 'scrollParent'როგორიცაა 'window':

$('#example').tooltip({ boundary: 'window' })

მარკირება

ინსტრუმენტის მითითებისთვის საჭირო მარკირება მხოლოდ dataატრიბუტია და titleHTML ელემენტზე გსურთ გქონდეთ ინსტრუმენტული მინიშნება. ინსტრუმენტთა რჩევის გენერირებული მარკირება საკმაოდ მარტივია, თუმცა ის მოითხოვს პოზიციას (ნაგულისხმევად, დაყენებულია topდანამატის მიერ).

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

თქვენ უნდა დაამატოთ მხოლოდ ინსტრუმენტების რჩევები HTML ელემენტებს, რომლებიც ტრადიციულად კლავიატურაზე ფოკუსირებული და ინტერაქტიულია (როგორიცაა ბმულები ან ფორმის კონტროლი). მიუხედავად იმისა, რომ თვითნებური HTML ელემენტები (როგორიცაა <span>s) შეიძლება ფოკუსირებადი გახდეს tabindex="0"ატრიბუტის დამატებით, ეს დაამატებს პოტენციურად შემაშფოთებელ და დამაბნეველ ჩანართებს არაინტერაქტიულ ელემენტებზე კლავიატურის მომხმარებლებისთვის. გარდა ამისა, დამხმარე ტექნოლოგიების უმეტესობა ამჟამად არ აცხადებს ინსტრუმენტს ამ სიტუაციაში.

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

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

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

გამორთული ელემენტები

ატრიბუტის მქონე ელემენტები disabledარ არის ინტერაქტიული, რაც იმას ნიშნავს, რომ მომხმარებლებს არ შეუძლიათ ფოკუსირება, მაუსის გადატანა ან დაწკაპუნება მათზე, რათა გამოიწვიონ ინსტრუმენტების მინიშნება (ან popover). გამოსავლის გამოსავალად, თქვენ მოგინდებათ ჩართოთ ხელსაწყოს მინიშნება შეფუთვიდან <div>ან <span>კლავიატურაზე ფოკუსირებადი იდეალურად შექმნილი კლავიატურის გამოყენებით tabindex="0"და გადააცილოთ pointer-eventsგამორთული ელემენტი.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Პარამეტრები

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

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

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

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

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

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

HTML-ის დაშვება ხელსაწყოს მინიშნებში.

თუ სიმართლეა, HTML ტეგები ინსტრუმენტების მინიშნებში titleიქნება გამოსახული ინსტრუმენტის მინიშნებაში. თუ არასწორია, jQuery-ის textმეთოდი გამოყენებული იქნება შინაარსის DOM-ში ჩასართავად.

გამოიყენეთ ტექსტი, თუ გაწუხებთ XSS შეტევები.
განთავსება სიმებიანი | ფუნქცია "ზედა"

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

როდესაც ფუნქცია გამოიყენება განლაგების დასადგენად, ის გამოიძახება ინსტრუმენტების რჩევით DOM კვანძით, როგორც მისი პირველი არგუმენტი და გამომწვევი ელემენტის DOM კვანძით, როგორც მეორე. thisკონტექსტი დაყენებულია ინსტრუმენტების მინიშნებაზე .
სელექტორი სიმებიანი | ყალბი ყალბი თუ სელექტორი არის მოწოდებული, ხელსაწყოს მინიშნების ობიექტები დელეგირებული იქნება მითითებულ სამიზნეებზე. პრაქტიკაში, ეს გამოიყენება დინამიური HTML შინაარსის დასამატებლად popovers. იხილეთ ეს და ინფორმაციული მაგალითი .
შაბლონი სიმებიანი '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

HTML-ის საბაზისო გამოყენება ინსტრუმენტთა რჩევის შექმნისას.

ხელსაწყოთი titleშეყვანილი იქნება .tooltip-inner.

.arrowგახდება ინსტრუმენტის ისარი.

ყველაზე გარე შეფუთვის ელემენტს უნდა ჰქონდეს .tooltipკლასი და role="tooltip".
სათაური სიმებიანი | ელემენტი | ფუნქცია ''

სათაურის ნაგულისხმევი მნიშვნელობა, თუ titleატრიბუტი არ არის.

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

როგორ ხდება ინსტრუმენტული მინიშნება - დააწკაპუნეთ | hover | ფოკუსირება | სახელმძღვანელო. თქვენ შეგიძლიათ გაიაროთ მრავალი ტრიგერი; გამოყავით ისინი სივრცეში.

'manual'მიუთითებს, რომ ინსტრუმენტული მინიშნება პროგრამულად გააქტიურდება .tooltip('show'), .tooltip('hide')და .tooltip('toggle')მეთოდების მეშვეობით; ეს მნიშვნელობა არ შეიძლება გაერთიანდეს სხვა ტრიგერთან.

'hover'დამოუკიდებლად გამოიწვევს ინსტრუმენტების რჩევებს, რომელთა გაშვება შეუძლებელია კლავიატურის საშუალებით და უნდა იქნას გამოყენებული მხოლოდ იმ შემთხვევაში, თუ არსებობს კლავიატურის მომხმარებლებისთვის იგივე ინფორმაციის გადაცემის ალტერნატიული მეთოდები.
ოფსეტური ნომერი | სიმებიანი 0 ინსტრუმენტული ინსტრუმენტების ოფსეტური მიზანთან შედარებით. დამატებითი ინფორმაციისთვის იხილეთ Popper.js-ის ოფსეტური დოკუმენტები .
ჩანაცვლების განთავსება სიმებიანი | მასივი "გადაბრუნება" ნება მიეცით მიუთითოთ რომელ პოზიციას გამოიყენებს პოპერი სარეზერვო. დამატებითი ინფორმაციისთვის იხილეთ Popper.js-ის ქცევის დოკუმენტები
საზღვარი სიმებიანი | ელემენტი 'scrollParent' ხელსაწყოს გვერდის გადინების შეზღუდვის საზღვარი. იღებს 'viewport', 'window', 'scrollParent', ან HTMLElement მითითების მნიშვნელობებს (მხოლოდ JavaScript). დამატებითი ინფორმაციისთვის იხილეთ Popper.js-ის preventOverflow docs .

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

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

მეთოდები

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

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

დამატებითი ინფორმაციისთვის იხილეთ ჩვენი JavaScript დოკუმენტაცია.

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

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

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

.tooltip('enable')

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

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

.tooltip('disable')

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

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

.tooltip('toggleEnabled')

ცვლის ელემენტის ხელსაწყოს მინიშნების ჩვენების ან დამალვის შესაძლებლობას.

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

.tooltip('update')

აახლებს ელემენტის ხელსაწყოს მინიშნების პოზიციას.

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

Ივენთი

ღონისძიების ტიპი აღწერა
show.bs.tooltip ეს მოვლენა მაშინვე ირთვება, როდესაც showგამოიძახება ეგზემპლარის მეთოდი.
ნაჩვენებია.ბს.ინსტრუმენტების მინიშნება ეს ღონისძიება გააქტიურებულია, როდესაც ინსტრუმენტების მინიშნება გახდება მომხმარებლისთვის ხილული (დაელოდება CSS გადასვლების დასრულებას).
დამალვა.ბს.ინსტრუმენტების მინიშნება ეს ღონისძიება გააქტიურებულია მაშინვე, როდესაც hideგამოიძახება ინსტანციის მეთოდი.
დამალული.bs.tooltip ეს ღონისძიება გააქტიურებულია, როდესაც ინსტრუმენტების მინიშნება დასრულდა მომხმარებლისგან დამალული (დაელოდება CSS გადასვლების დასრულებას).
ჩასმული.bs.tooltip ეს ღონისძიება გააქტიურებულია show.bs.tooltipღონისძიების შემდეგ, როდესაც ინსტრუმენტის მინიშნება შაბლონი დაემატება DOM-ს. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})