Зөвлөмж
Хөдөлгөөнт дүрслэлд зориулсан CSS3 болон орон нутгийн гарчиг хадгалахад зориулсан өгөгдлийн шинж чанаруудыг ашиглан CSS болон JavaScript-ээр захиалгат Bootstrap хэрэгслийн зөвлөмжийг нэмэх баримт бичиг ба жишээнүүд.
Зөвлөмжийн залгаасыг ашиглахдаа мэдэх ёстой зүйлс:
- Зөвлөмжүүд нь байрлал тогтоохдоо гуравдагч талын Popper.js номын санд тулгуурладаг . Та bootstrap.js-ээс өмнө popper.min.js -г оруулах эсвэл зөвлөмжийг ажиллуулахын тулд Popper.js-г агуулсан
bootstrap.bundle.min.js
/ ашиглах ёстой!bootstrap.bundle.js
- Хэрэв та манай JavaScript-г эх сурвалжаас бүтээж байгаа бол энэ нь
util.js
. - Хэрэгслийн зөвлөмжүүд нь гүйцэтгэлийн шалтгаанаар сонгогддог тул та өөрөө эхлүүлэх хэрэгтэй .
- Тэг урттай гарчигтай зөвлөмжийг хэзээ ч харуулахгүй.
container: 'body'
Илүү төвөгтэй бүрэлдэхүүн хэсгүүдэд (манай оролтын бүлгүүд, товчлуурын бүлгүүд гэх мэт) асуудал гаргахгүйн тулд зааж өгнө үү .- Нуугдсан элементүүдийн зөвлөмжийг идэвхжүүлэх нь ажиллахгүй.
- Боодлын элемент дээр
.disabled
эсвэлdisabled
элементүүдийн зөвлөмжийг идэвхжүүлсэн байх ёстой. - Олон мөрийг хамарсан гипер линкүүдээс өдөөгдөх үед зөвлөмжийг голд нь байрлуулна. Энэ зан үйлээс зайлсхийхийн тулд
white-space: nowrap;
өөрийн s дээр ашиглаарай .<a>
- Харгалзах элементүүдийг DOM-ээс хасахаас өмнө зөвлөмжийг нуусан байх ёстой.
Энэ бүгдийг авсан уу? Гайхалтай, зарим жишээн дээр тэд хэрхэн ажилладагийг харцгаая.
Хуудасны бүх зөвлөмжийг эхлүүлэх нэг арга бол тэдгээрийг data-toggle
шинж чанараар нь сонгох явдал юм:
Доорх холбоосууд дээр хулганаа гүйлгэж, зөвлөмжийг харна уу:
Бариу өмд дараагийн түвшний keffiyeh та тэдний талаар сонсоогүй байх. Фото лангуу сахал түүхий жинсэн үсгийн веган мессенжер цүнх Stumptown. Фермээс ширээний сеитан, Максвинигийн 8 битийн америк хувцас нь Терри Ричардсоны винил камертай. Сахал хожуул, кардиган бан ми ломо аянга. Дүпү биодизель Виллиамсбург Марфа, дөрвөн Локо Максвинигийн цэвэршүүлэх веган Chambray. Үнэхээр инээдтэй гар урлаач ямар ч keytar , scenester farm-to-table banksy Остин twitter бариул freegan cred raw denim one-origin coffee virus.
Доорх товчлуурууд дээр хулганаа гүйлгэж, дээд, баруун, доод, зүүн гэсэн дөрвөн зөвлөмжийн чиглэлийг харна уу.
Мөн тусгай HTML нэмсэн:
Хэрэгслийн зөвлөмжийн залгаас нь хүсэлтийн дагуу контент болон тэмдэглэгээг үүсгэдэг бөгөөд анхдагч байдлаар зөвлөмжийг гох элементийн дараа байрлуулдаг.
JavaScript-ээр зааварчилгааг идэвхжүүлнэ үү:
Халих auto
баscroll
overflow: auto
Зөвлөмжийн байрлал нь эцэг эхийн контейнертэй эсвэл overflow: scroll
манай -тай адил байх үед автоматаар өөрчлөхийг оролддог .table-responsive
боловч анхны байршлын байршлыг хадгалсаар байна. Шийдвэрлэхийн тулд boundary
тохиргоог өгөгдмөл утгаас өөр зүйлд тохируулна уу 'scrollParent'
, жишээ нь 'window'
:
Зөвлөмжийн шаардлагатай тэмдэглэгээ нь зөвхөн data
шинж чанар бөгөөд title
таны HTML элемент дээр зөвлөмж өгөхийг хүсч байна. Зөвлөмжийн үүсгэсэн тэмдэглэгээ нь маш энгийн боловч байрлал шаарддаг (анхдагчаар, top
залгаасаар тохируулсан).
Хэрэгслийн зөвлөмжийг гар болон туслах технологийн хэрэглэгчид ашиглах боломжтой болгох
Та зөвхөн уламжлалт гар дээр төвлөрч, интерактив байдаг (холбоос эсвэл маягтын удирдлага гэх мэт) HTML элементүүдэд зөвлөмж нэмэх хэрэгтэй. Хэдийгээр дурын HTML элементүүдийг ( <span>
s гэх мэт) атрибут нэмснээр анхаарлаа tabindex="0"
төвлөрүүлэх боломжтой боловч энэ нь гар хэрэглэгчдийн хувьд интерактив бус элементүүд дээр ядаргаатай, төөрөгдүүлсэн табуудыг нэмж өгөх болно. Нэмж дурдахад, ихэнх туслах технологиуд одоогоор ийм нөхцөл байдалд зааварчилгааг зарладаггүй.
hover
Нэмж дурдахад, зөвхөн зааварчилгааг гох гэж бүү найд , учир нь энэ нь таны зөвлөмжийг гар хэрэглэгчдэд өдөөх боломжгүй болгоно.
Атрибуттай элементүүд нь disabled
интерактив биш тул хэрэглэгчид анхаарлаа төвлөрүүлэх, хулганаа аваачих эсвэл товшиж хэрэгслийн зөвлөмжийг (эсвэл попов) идэвхжүүлэх боломжгүй гэсэн үг юм. Үүнийг шийдвэрлэхийн тулд та гарын авлагыг ашиглахад тохиромжтой боодолоос <div>
эсвэл гар дээр төвлөрөх боломжтой болгож, идэвхгүй болсон элементийг дарж бичихийг хүсэх болно.<span>
tabindex="0"
pointer-events
Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-
хавсаргана data-animation=""
.
Нэр | Төрөл | Өгөгдмөл | Тодорхойлолт |
---|---|---|---|
хөдөлгөөнт дүрс | логик | үнэн | Хэрэгслийн зааварт CSS бүдгэрүүлэх шилжилтийг ашиглана уу |
сав | мөр | элемент | худлаа | худлаа | Тодорхой элементийн зөвлөмжийг хавсаргана. Жишээ нь: |
саатал | тоо | обьект | 0 | Зөвлөмжийг харуулах, нуухыг хойшлуулах (ms) - гарын авлагын гох төрөлд хамаарахгүй Хэрэв дугаар өгсөн бол нуух/шоулуулах хоёуланд нь саатал хэрэглэнэ Объектын бүтэц нь: |
html | логик | худлаа | Зөвлөгөөнд HTML-г зөвшөөрөх. Хэрэв үнэн бол хэрэглүүрийн зөвлөмж дэх HTML хаягууд нь мэдээллийн хэрэгслээр Хэрэв та XSS халдлагын талаар санаа зовж байгаа бол текстийг ашиглана уу. |
байрлуулах | мөр | функц | 'дээд' | Хэрэгслийн зөвлөмжийг хэрхэн байрлуулах вэ - auto | дээд | доод | зүүн | зөв. Байршлыг тодорхойлохын тулд функцийг ашиглах үед түүнийг эхний аргумент болгон багажийн зөвлөмжийн DOM зангилаа, хоёр дахь нь DOM зангилаагаар дууддаг. |
сонгогч | мөр | худлаа | худлаа | Хэрэв сонгогчийг өгсөн бол зөвлөмжийн объектуудыг заасан зорилтууд руу шилжүүлнэ. Практикт энэ нь динамик HTML контентыг поповер нэмэхэд ашигладаг. Үүнийг болон мэдээллийн жишээг үзнэ үү . |
загвар | мөр | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Зөвлөгөө үүсгэхэд ашиглах үндсэн HTML. Хэрэгслийн
Хамгийн гадна талын боодлын элемент нь |
гарчиг | мөр | элемент | функц | '' |
Хэрэв функц өгөгдсөн бол энэ нь |
гох | мөр | 'фокус дээр хулганаа чиглүүлэх' | Зөвлөмжийг хэрхэн идэвхжүүлдэг вэ - | дээр дарна уу хулганаа аваач | төвлөрөл | гарын авлага. Та олон өдөөгчийг дамжуулж болно; тэдгээрийг зайгаар тусгаарла.
|
офсет | тоо | мөр | 0 | Хэрэгслийн зөвлөмжийг зорилттой нь харьцуулсан офсет. Дэлгэрэнгүй мэдээллийг Popper.js-ийн офсет баримтаас үзнэ үү . |
backbackPlacement | мөр | массив | 'эргэх' | Поппер буцах үед ямар байрлалыг ашиглахыг зааж өгөхийг зөвшөөрнө үү. Дэлгэрэнгүй мэдээллийг Popper.js-ийн зан үйлийн баримт бичгүүдээс үзнэ үү |
хил хязгаар | мөр | элемент | 'scrollParent' | Хэрэгслийн зөвлөмжийн халих хязгаарлалтын хил. 'viewport' , 'window' , 'scrollParent' , эсвэл HTMLElement лавлагааны утгуудыг (зөвхөн JavaScript) хүлээн авна. Дэлгэрэнгүй мэдээллийг Popper.js-ийн preventOverflow баримтаас үзнэ үү . |
Тусдаа хэрэгслийн зөвлөмжийн өгөгдлийн шинж чанарууд
Дээр тайлбарласны дагуу өгөгдлийн шинж чанаруудыг ашиглан тус тусын зөвлөмжийн сонголтуудыг зааж өгч болно.
Асинхрон аргууд ба шилжилтүүд
Бүх API аргууд асинхрон бөгөөд шилжилтийг эхлүүлнэ . Шилжилт эхэлмэгц дуусаагүй байхад тэд залгагч руу буцаж ирдэг . Нэмж хэлэхэд, шилжилтийн бүрэлдэхүүн хэсэг дэх аргын дуудлагыг үл тоомсорлох болно.
Элементийн цуглуулгад хэрэгслийн зааварчилгааг хавсаргана.
Элементийн зөвлөмжийг харуулна. Зөвлөмжийг харуулахаас өмнө (өөрөөр хэлбэл shown.bs.tooltip
үйл явдал болохоос өмнө) дуудагч руу буцна. Энэ нь зөвлөмжийг "гараар" идэвхжүүлсэн гэж үздэг. Тэг урттай гарчигтай зөвлөмжийг хэзээ ч харуулахгүй.
Элементийн зөвлөмжийг нууна. Зөвлөмжийг нуухаас өмнө (өөрөөр хэлбэл hidden.bs.tooltip
үйл явдал болохоос өмнө) дуудагч руу буцна. Энэ нь зөвлөмжийг "гараар" идэвхжүүлсэн гэж үздэг.
Элементийн зөвлөмжийг сэлгэх. Зөвлөмжийг харуулах эсвэл нуухаас өмнө (өөрөөр хэлбэл shown.bs.tooltip
эсвэл hidden.bs.tooltip
үйл явдал болохоос өмнө) дуудагч руу буцна. Энэ нь зөвлөмжийг "гараар" идэвхжүүлсэн гэж үздэг.
Элементийн зөвлөмжийг нууж устгана. Төлөөлөгчийг ашигладаг зөвлөмжийг ( selector
сонголтыг ашиглан үүсгэсэн ) удамшлын триггер элементүүд дээр тус тусад нь устгах боломжгүй.
Элементийн зөвлөмжийг харуулах боломжийг олгоно. Зөвлөмжийг анхдагчаар идэвхжүүлсэн.
Элементийн зөвлөмжийг харуулах боломжийг арилгана. Зөвлөмжийг зөвхөн дахин идэвхжүүлсэн тохиолдолд л харуулах боломжтой.
Элементийн зөвлөмжийг харуулах эсвэл нуух боломжийг сэлгэдэг.
Элементийн зөвлөмжийн байрлалыг шинэчилнэ.
Үйл явдлын төрөл | Тодорхойлолт |
---|---|
show.bs.tooltip | show Инстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг . |
үзүүлсэн.bs.хэрэгслийн зөвлөгөө | Хэрэгслийн зөвлөмжийг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно). |
hide.bs.tooltip | hide Инстанцийн аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг . |
hidden.bs.tooltip | Хэрэгслийн зөвлөмжийг хэрэглэгчээс нууж дууссаны дараа энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно). |
оруулсан.bs.хэрэгслийн зөвлөгөө | Энэ үйл явдлыг үйл явдлын дараа show.bs.tooltip DOM-д хэрэгслийн зөвлөмжийн загвар нэмсэн үед идэвхгүй болгоно. |