in English

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

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

მიმოხილვა

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

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

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

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

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

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

მაგალითები

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

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

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

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

გაითვალისწინეთ, რომ უსაფრთხოების მიზეზების გამო sanitize, sanitizeFnდა whiteListპარამეტრების მიწოდება შეუძლებელია მონაცემთა ატრიბუტების გამოყენებით.
სახელი ტიპი ნაგულისხმევი აღწერა
ანიმაცია ლოგიკური მართალია გამოიყენეთ CSS fade გადასვლა ინსტრუმენტზე
კონტეინერი სიმებიანი | ელემენტი | ყალბი ყალბი

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

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

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

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

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

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

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

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

როდესაც ფუნქცია გამოიყენება განლაგების დასადგენად, ის გამოიძახება ინსტრუმენტების რჩევით DOM კვანძით, როგორც მისი პირველი არგუმენტი და გამომწვევი ელემენტის DOM კვანძით, როგორც მეორე. thisკონტექსტი დაყენებულია ინსტრუმენტების მინიშნებაზე .
სელექტორი სიმებიანი | ყალბი ყალბი თუ სელექტორი არის მოწოდებული, ხელსაწყოს მინიშნების ობიექტები დელეგირებული იქნება მითითებულ სამიზნეებზე. პრაქტიკაში, ეს გამოიყენება აგრეთვე ინსტრუმენტთა რჩევების გამოსაყენებლად დინამიურად დამატებულ DOM ელემენტებზე ( jQuery.onმხარდაჭერა). იხილეთ ეს და ინფორმაციული მაგალითი .
შაბლონი სიმებიანი '<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

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

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

დამატებითი ინფორმაციისთვის იხილეთ პოპერის ოფსეტური დოკუმენტები .
ჩანაცვლების განთავსება სიმებიანი | მასივი "გადაბრუნება" ნება მიეცით მიუთითოთ რომელ პოზიციას გამოიყენებს პოპერი სარეზერვო. დამატებითი ინფორმაციისთვის იხილეთ პოპერის ქცევის დოკუმენტები
customClass სიმებიანი | ფუნქცია ''

დაამატეთ კლასები ხელსაწყოს მინიშნებაში, როდესაც ის გამოჩნდება. გაითვალისწინეთ, რომ ეს კლასები დაემატება შაბლონში მითითებულ კლასებს. რამდენიმე კლასის დასამატებლად გამოყავით ისინი ინტერვალით: 'a b'.

თქვენ ასევე შეგიძლიათ გადასცეთ ფუნქცია, რომელიც უნდა დააბრუნოს ერთი სტრიქონი, რომელიც შეიცავს დამატებით კლასის სახელებს.
საზღვარი სიმებიანი | ელემენტი 'scrollParent' ხელსაწყოს გვერდის გადინების შეზღუდვის საზღვარი. იღებს 'viewport', 'window', 'scrollParent', ან HTMLElement მითითების მნიშვნელობებს (მხოლოდ JavaScript). დამატებითი ინფორმაციისთვის იხილეთ Popper's preventOverflow docs .
გაწმენდა ლოგიკური მართალია ჩართეთ ან გამორთეთ სანიტარიზაცია. თუ გააქტიურებულია 'template'და 'title'ოფციები იქნება გაწმენდილი. იხილეთ სადეზინფექციო განყოფილება ჩვენს JavaScript დოკუმენტაციაში .
თეთრი სია ობიექტი ნაგულისხმევი მნიშვნელობა ობიექტი, რომელიც შეიცავს დაშვებულ ატრიბუტებსა და ტეგებს
sanitizeFn null | ფუნქცია null აქ შეგიძლიათ მიაწოდოთ თქვენი საკუთარი სადეზინფექციო ფუნქცია. ეს შეიძლება იყოს სასარგებლო, თუ გირჩევნიათ გამოიყენოთ გამოყოფილი ბიბლიოთეკა სანიტარიულობის შესასრულებლად.
popperConfig null | ობიექტი null Bootstrap-ის ნაგულისხმევი Popper კონფიგურაციის შესაცვლელად იხილეთ Popper-ის კონფიგურაცია

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

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

მეთოდები

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

ყველა 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...
})