ป๊อปโอเวอร์
เอกสารประกอบและตัวอย่างสำหรับการเพิ่ม Bootstrap popovers เช่นที่พบใน iOS ไปยังองค์ประกอบใดๆ บนไซต์ของคุณ
ภาพรวม
สิ่งที่ต้องรู้เมื่อใช้ปลั๊กอินป๊อปโอเวอร์:
- Popovers อาศัยPopper ห้องสมุดบุคคลที่สาม สำหรับการวางตำแหน่ง คุณต้องรวมpopper.min.jsก่อน bootstrap.js หรือใช้
bootstrap.bundle.min.js
/bootstrap.bundle.js
ซึ่งมี Popper เพื่อให้ popover ทำงานได้! - Popovers ต้องการปลั๊กอินคำแนะนำเครื่องมือเป็นการพึ่งพา
- หากคุณกำลังสร้าง JavaScript จากแหล่งที่มา มันต้องการ
util.js
. - Popovers เลือกใช้ด้วยเหตุผลด้านประสิทธิภาพ ดังนั้นคุณต้องเริ่มต้นมันเอง
- ความยาวเป็นศูนย์
title
และcontent
ค่าจะไม่แสดงป๊อปโอเวอร์ - ระบุ
container: 'body'
เพื่อหลีกเลี่ยงปัญหาการแสดงผลในองค์ประกอบที่ซับซ้อนมากขึ้น (เช่น กลุ่มอินพุต กลุ่มปุ่ม ฯลฯ) - ทริกเกอร์ป๊อปอัปในองค์ประกอบที่ซ่อนอยู่จะไม่ทำงาน
- ต้องทริกเกอร์ป๊อปโอเวอร์สำหรับ
.disabled
หรือ องค์ประกอบในองค์ประกอบแรปเปอร์disabled
- เมื่อทริกเกอร์จากจุดยึดที่พันด้วยเส้นหลายเส้น ป๊อปโอเวอร์จะอยู่กึ่งกลางระหว่างความกว้างโดยรวมของจุดยึด ใช้
.text-nowrap
กับของคุณ<a>
เพื่อหลีกเลี่ยงพฤติกรรมนี้ - ต้องซ่อนป๊อปโอเวอร์ก่อนที่องค์ประกอบที่เกี่ยวข้องจะถูกลบออกจาก DOM
- สามารถเรียกใช้ Popovers ได้ด้วยองค์ประกอบภายใน Shadow DOM
prefers-reduced-motion
คิวรีสื่อ ดู
ส่วนการเคลื่อนไหวที่ลดลงของเอกสารการช่วยสำหรับการเข้าถึงของเรา
อ่านต่อเพื่อดูว่าป๊อปอัปทำงานอย่างไรจากตัวอย่างบางส่วน
ตัวอย่าง: เปิดใช้งานป๊อปอัปทุกที่
วิธีหนึ่งในการเริ่มต้น popovers ทั้งหมดบนหน้าคือการเลือกตามdata-toggle
แอตทริบิวต์:
$(function () {
$('[data-toggle="popover"]').popover()
})
ตัวอย่าง: การใช้container
ตัวเลือก
เมื่อคุณมีสไตล์บางอย่างในองค์ประกอบหลักที่รบกวนป๊อปโอเวอร์ คุณจะต้องระบุกำหนดเองcontainer
เพื่อให้ HTML ของป๊อปโอเวอร์ปรากฏขึ้นภายในองค์ประกอบนั้นแทน
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
ตัวอย่าง
<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-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
Popover on left
</button>
ปิดในคลิกถัดไป
ใช้focus
ทริกเกอร์เพื่อปิดป๊อปอัปเมื่อผู้ใช้คลิกองค์ประกอบอื่นที่ไม่ใช่องค์ประกอบสลับในครั้งถัดไป
มาร์กอัปเฉพาะที่จำเป็นสำหรับการเลิกจ้างเมื่อคลิกถัดไป
สำหรับพฤติกรรมข้ามเบราว์เซอร์และข้ามแพลตฟอร์มที่เหมาะสม คุณต้องใช้<a>
แท็กไม่ใช่แท็<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>
$('.popover-dismiss').popover({
trigger: 'focus'
})
องค์ประกอบพิการ
องค์ประกอบที่มีdisabled
แอตทริบิวต์จะไม่โต้ตอบ หมายความว่าผู้ใช้ไม่สามารถวางเมาส์เหนือหรือคลิกเพื่อทริกเกอร์ป๊อปโอเวอร์ (หรือคำแนะนำเครื่องมือ) ในการแก้ปัญหาชั่วคราว คุณจะต้องทริกเกอร์ป๊อปโอเวอร์จากแรปเปอร์<div>
หรือ<span>
และแทนที่pointer-events
องค์ประกอบที่ปิดใช้งาน
สำหรับทริกเกอร์ป๊อปโอเวอร์ที่ปิดใช้งาน คุณอาจต้องการdata-trigger="hover"
ให้ป๊อปโอเวอร์ปรากฏเป็นการตอบกลับด้วยภาพทันทีสำหรับผู้ใช้ของคุณ เนื่องจากพวกเขาอาจไม่ได้คาดหวังว่าจะคลิกที่องค์ประกอบที่ถูกปิดใช้งาน
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
การใช้งาน
เปิดใช้งานป๊อปอัปผ่าน JavaScript:
$('#example').popover(options)
การเร่งความเร็ว GPU
บางครั้งป๊อปอัปอาจปรากฏไม่ชัดเจนบนอุปกรณ์ Windows 10 เนื่องจากการเร่งความเร็ว GPU และ DPI ของระบบที่แก้ไข วิธีแก้ปัญหาสำหรับสิ่งนี้ใน v4 คือการปิดใช้งานการเร่ง GPU ตามความจำเป็นในป๊อปอัปของคุณ
การแก้ไขที่แนะนำ:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
การทำให้ป๊อปอัปทำงานสำหรับผู้ใช้คีย์บอร์ดและเทคโนโลยีอำนวยความสะดวก
เพื่อให้ผู้ใช้แป้นพิมพ์เปิดใช้งานป๊อปอัปของคุณ คุณควรเพิ่มลงในองค์ประกอบ HTML ที่เน้นไปที่แป้นพิมพ์และโต้ตอบได้ตามปกติ (เช่น ลิงก์หรือตัวควบคุมฟอร์ม) แม้ว่าองค์ประกอบ HTML ตามอำเภอใจ (เช่น<span>
s) สามารถทำให้โฟกัสได้โดยการเพิ่มtabindex="0"
แอตทริบิวต์ สิ่งนี้จะเพิ่มการหยุดแท็บที่อาจน่ารำคาญและทำให้เกิดความสับสนในองค์ประกอบที่ไม่โต้ตอบสำหรับผู้ใช้แป้นพิมพ์ และเทคโนโลยีช่วยเหลือส่วนใหญ่ในปัจจุบันยังไม่ประกาศเนื้อหาของป๊อปโอเวอร์ในสถานการณ์นี้ . นอกจากนี้ อย่าพึ่งเพียงhover
เป็นทริกเกอร์สำหรับป๊อปโอเวอร์ของคุณ เนื่องจากจะทำให้ไม่สามารถทริกเกอร์สำหรับผู้ใช้คีย์บอร์ดได้
แม้ว่าคุณจะสามารถแทรก HTML ที่มีโครงสร้างและสมบูรณ์ในป๊อปโอเวอร์ด้วยhtml
ตัวเลือกได้ เราขอแนะนำให้คุณหลีกเลี่ยงการเพิ่มเนื้อหาจำนวนมากเกินไป วิธีการทำงานของป๊อปอัปในปัจจุบันคือ เมื่อแสดงแล้ว เนื้อหาของป๊อปอัปจะเชื่อมโยงกับองค์ประกอบทริกเกอร์ด้วยaria-describedby
แอตทริบิวต์ ด้วยเหตุนี้ เนื้อหาทั้งหมดของป๊อปโอเวอร์จะถูกประกาศให้ผู้ใช้เทคโนโลยีอำนวยความสะดวกทราบเป็นสตรีมที่ยาวและไม่ขาดตอน
นอกจากนี้ คุณยังสามารถรวมการควบคุมแบบโต้ตอบได้ (เช่น องค์ประกอบของฟอร์มหรือลิงก์) ในป๊อปโอเวอร์ของคุณ (โดยการเพิ่มองค์ประกอบเหล่านี้ลงในwhiteList
แอตทริบิวต์และแท็กที่อนุญาต) โปรดทราบว่าขณะนี้ป๊อปโอเวอร์ไม่ได้จัดการลำดับโฟกัสของแป้นพิมพ์ เมื่อผู้ใช้คีย์บอร์ดเปิดป๊อปโอเวอร์ โฟกัสยังคงอยู่ที่องค์ประกอบทริกเกอร์ และเนื่องจากป๊อปโอเวอร์มักจะไม่ติดตามทริกเกอร์ในโครงสร้างของเอกสารทันที จึงไม่รับประกันว่าการเดินหน้า/การกดTABจะย้ายผู้ใช้คีย์บอร์ดไปที่ป๊อปโอเวอร์เอง กล่าวโดยย่อ การเพิ่มการควบคุมแบบโต้ตอบไปยังป๊อปโอเวอร์จะทำให้การควบคุมเหล่านี้ไม่สามารถเข้าถึงได้/ใช้ไม่ได้สำหรับผู้ใช้แป้นพิมพ์และผู้ใช้เทคโนโลยีอำนวยความสะดวก หรืออย่างน้อยที่สุดก็ทำให้ลำดับโฟกัสโดยรวมที่ไร้เหตุผล ในกรณีเหล่านี้ ให้ลองใช้กล่องโต้ตอบโมดอลแทน
ตัวเลือก
ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-
เช่นเดียวกับในdata-animation=""
.
sanitize
,
sanitizeFn
และ
whiteList
ตัวเลือกไม่สามารถระบุได้โดยใช้แอตทริบิวต์ข้อมูล
ชื่อ | พิมพ์ | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
แอนิเมชั่น | บูลีน | จริง | ใช้ CSS Fade Transition กับป๊อปโอเวอร์ |
คอนเทนเนอร์ | สตริง | องค์ประกอบ | เท็จ | เท็จ | ต่อท้ายป๊อปโอเวอร์กับองค์ประกอบเฉพาะ ตัวอย่าง: |
เนื้อหา | สตริง | องค์ประกอบ | การทำงาน | '' | ค่าเนื้อหาเริ่มต้นหากไม่มี หากมีการกำหนดฟังก์ชัน ฟังก์ชันนั้นจะถูกเรียกโดย |
ล่าช้า | หมายเลข | วัตถุ | 0 | ความล่าช้าในการแสดงและซ่อนป๊อปโอเวอร์ (ms) - ใช้ไม่ได้กับประเภททริกเกอร์ด้วยตนเอง หากมีการระบุตัวเลข การหน่วงเวลาจะใช้กับทั้งซ่อน/แสดง โครงสร้างวัตถุคือ: |
html | บูลีน | เท็จ | แทรก HTML ลงในป๊อปโอเวอร์ text หากเป็นเท็จ จะใช้วิธีของ jQuery เพื่อแทรกเนื้อหาลงใน DOM ใช้ข้อความหากคุณกังวลเกี่ยวกับการโจมตี XSS |
ตำแหน่ง | สตริง | การทำงาน | 'ขวา' | วิธีวางตำแหน่งป๊อปโอเวอร์ - auto | ด้านบน | ด้านล่าง | ซ้าย | ขวา. เมื่อใช้ฟังก์ชันเพื่อกำหนดตำแหน่ง ฟังก์ชันจะถูกเรียกโดยมีโหนด DOM แบบป๊อปโอเวอร์เป็นอาร์กิวเมนต์แรก และโหนด DOM ที่ทริกเกอร์องค์ประกอบเป็นโหนดที่สอง บริบทถูกตั้ง ค่า |
ตัวเลือก | สตริง | เท็จ | เท็จ | หากมีตัวเลือก ออบเจ็กต์ป๊อปโอเวอร์จะถูกส่งไปยังเป้าหมายที่ระบุ ในทางปฏิบัติ ใช้เพื่อเปิดใช้งานเนื้อหา HTML แบบไดนามิกเพื่อเพิ่มป๊อปอัป ดูสิ่งนี้และตัวอย่างข้อมูล |
แม่แบบ | สตริง | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
HTML พื้นฐานที่จะใช้เมื่อสร้างป๊อปโอเวอร์ ป๊อปโอเวอร์ ป๊อปโอเวอร์
องค์ประกอบ wrapper นอกสุดควรมี |
ชื่อ | สตริง | องค์ประกอบ | การทำงาน | '' | ค่าเริ่มต้นของชื่อหากไม่มี หากมีการกำหนดฟังก์ชัน ฟังก์ชันนั้นจะถูกเรียกโดย |
สิ่งกระตุ้น | สตริง | 'คลิก' | วิธีเรียกป๊อปโอเวอร์ - คลิก | โฉบ | โฟกัส | คู่มือ. คุณอาจส่งทริกเกอร์หลายตัว แยกพวกเขาด้วยช่องว่าง manual ไม่สามารถรวมกับทริกเกอร์อื่นได้ |
offset | หมายเลข | สตริง | 0 | ออฟเซ็ตของป๊อปโอเวอร์ที่สัมพันธ์กับเป้าหมาย สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารออฟเซ็ตของPopper |
fallbackPlacement | สตริง | อาร์เรย์ | 'พลิก' | อนุญาตให้ระบุตำแหน่งที่ Popper จะใช้กับทางเลือก สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารพฤติกรรมของ Popper |
customClass | สตริง | การทำงาน | '' | เพิ่มคลาสไปที่ป๊อปโอเวอร์เมื่อแสดง โปรดทราบว่าคลาสเหล่านี้จะถูกเพิ่มนอกเหนือจากคลาสที่ระบุในเทมเพลต หากต้องการเพิ่มหลายคลาส ให้คั่นด้วยช่องว่าง: คุณยังสามารถส่งฟังก์ชันที่ควรส่งคืนสตริงเดียวที่มีชื่อคลาสเพิ่มเติม |
เขตแดน | สตริง | ธาตุ | 'เลื่อนผู้ปกครอง' | ขอบเขตจำกัดล้นของป๊อปโอเวอร์ ยอมรับค่าของ'viewport' , 'window' , 'scrollParent' , หรือการอ้างอิง HTMLElement (JavaScript เท่านั้น) สำหรับข้อมูล เพิ่มเติม โปรดดู เอกสาร preventOverflowของ Popper |
ฆ่าเชื้อ | บูลีน | จริง | เปิดหรือปิดการฆ่าเชื้อ หากเปิดใช้งาน'template' และ'content' ตัว'title' เลือกต่างๆ จะถูกฆ่าเชื้อ ดูส่วนการฆ่าเชื้อในเอกสาร JavaScript ของเรา |
whiteList | วัตถุ | ค่าเริ่มต้น | ออบเจ็กต์ที่มีแอตทริบิวต์และแท็กที่อนุญาต |
ฆ่าเชื้อFn | null | การทำงาน | โมฆะ | ที่นี่คุณสามารถจัดหาฟังก์ชันฆ่าเชื้อของคุณเองได้ สิ่งนี้มีประโยชน์หากคุณต้องการใช้ห้องสมุดเฉพาะเพื่อทำการฆ่าเชื้อ |
popperConfig | null | วัตถุ | โมฆะ | หากต้องการเปลี่ยนการกำหนดค่า Popper เริ่มต้นของ Bootstrap โปรดดูการกำหนดค่าของ Popper |
แอตทริบิวต์ข้อมูลสำหรับป๊อปอัปแต่ละรายการ
ตัวเลือกสำหรับป๊อปอัปแต่ละรายการสามารถระบุได้โดยใช้แอตทริบิวต์ข้อมูล ตามที่อธิบายข้างต้น
วิธีการ
วิธีการและการเปลี่ยนแบบอะซิงโครนัส
เมธอด API ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น
$().popover(options)
เริ่มต้น popovers สำหรับคอลเล็กชันองค์ประกอบ
.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('dispose')
ซ่อนและทำลายป๊อปโอเวอร์ขององค์ประกอบ ป๊อปโอเวอร์ที่ใช้การมอบหมาย (ซึ่งสร้างขึ้นโดยใช้ตัวselector
เลือก ) ไม่สามารถทำลายทีละรายการในองค์ประกอบทริกเกอร์ที่สืบทอดได้
$('#element').popover('dispose')
.popover('enable')
ให้ความสามารถในการแสดงป๊อปโอเวอร์ขององค์ประกอบ Popovers ถูกเปิดใช้งานโดยค่าเริ่มต้น
$('#element').popover('enable')
.popover('disable')
ลบความสามารถในการแสดงป๊อปโอเวอร์ขององค์ประกอบ ป๊อปโอเวอร์จะแสดงได้ก็ต่อเมื่อเปิดใช้งานอีกครั้ง
$('#element').popover('disable')
.popover('toggleEnabled')
สลับความสามารถในการแสดงหรือซ่อนป๊อปโอเวอร์ขององค์ประกอบ
$('#element').popover('toggleEnabled')
.popover('update')
อัปเดตตำแหน่งของป๊อปโอเวอร์ขององค์ประกอบ
$('#element').popover('update')
เหตุการณ์
ประเภทงาน | คำอธิบาย |
---|---|
show.bs.popover | เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมีshow การเรียกเมธอดของอินสแตนซ์ |
แสดง.bs.popover | เหตุการณ์นี้เริ่มทำงานเมื่อผู้ใช้มองเห็นป๊อปโอเวอร์ (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์) |
hide.bs.popover | เหตุการณ์นี้เริ่มทำงานทันทีเมื่อhide มีการเรียกเมธอดของอินสแตนซ์ |
hidden.bs.popover | เหตุการณ์นี้เริ่มทำงานเมื่อป๊อปโอเวอร์ถูกซ่อนจากผู้ใช้เสร็จสิ้น (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์) |
แทรก.bs.popover | เหตุการณ์นี้เริ่มทำงานหลังจากshow.bs.popover เหตุการณ์เมื่อมีการเพิ่มเทมเพลตป๊อปโอเวอร์ใน DOM |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})