Source

ป๊อปโอเวอร์

เอกสารประกอบและตัวอย่างสำหรับการเพิ่ม Bootstrap popovers เช่นที่พบใน iOS ไปยังองค์ประกอบใดๆ บนไซต์ของคุณ

ภาพรวม

สิ่งที่ต้องรู้เมื่อใช้ปลั๊กอินป๊อปโอเวอร์:

  • Popovers อาศัย Popper.jsห้องสมุดบุคคลที่สามสำหรับการวางตำแหน่ง คุณต้องรวมpopper.min.jsก่อน bootstrap.js หรือใช้bootstrap.bundle.min.js/ bootstrap.bundle.jsซึ่งมี Popper.js เพื่อให้ป๊อปอัปทำงาน!
  • Popovers ต้องการปลั๊กอินคำแนะนำเครื่องมือเป็นการพึ่งพา
  • หากคุณกำลังสร้าง JavaScript จากแหล่งที่มา มันต้องการutil.js .
  • Popovers เลือกใช้ด้วยเหตุผลด้านประสิทธิภาพ ดังนั้นคุณต้องเริ่มต้นมันเอง
  • ความยาวเป็นศูนย์titleและcontentค่าจะไม่แสดงป๊อปโอเวอร์
  • ระบุcontainer: 'body'เพื่อหลีกเลี่ยงปัญหาการแสดงผลในองค์ประกอบที่ซับซ้อนมากขึ้น (เช่น กลุ่มอินพุต กลุ่มปุ่ม ฯลฯ)
  • ทริกเกอร์ป๊อปอัปในองค์ประกอบที่ซ่อนอยู่จะไม่ทำงาน
  • ต้องทริกเกอร์ป๊อปโอเวอร์สำหรับ.disabledหรือ องค์ประกอบในองค์ประกอบแรปเปอร์disabled
  • เมื่อทริกเกอร์จากจุดยึดที่พันด้วยเส้นหลายเส้น ป๊อปโอเวอร์จะอยู่กึ่งกลางระหว่างความกว้างโดยรวมของจุดยึด ใช้white-space: nowrap;กับของคุณ<a>เพื่อหลีกเลี่ยงพฤติกรรมนี้
  • ต้องซ่อนป๊อปโอเวอร์ก่อนที่องค์ประกอบที่เกี่ยวข้องจะถูกลบออกจาก DOM

อ่านต่อเพื่อดูว่าป๊อปอัปทำงานอย่างไรจากตัวอย่างบางส่วน

ตัวอย่าง: เปิดใช้งานป๊อปอัปทุกที่

วิธีหนึ่งในการเริ่มต้น 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="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" 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-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  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)

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-animation="".

ชื่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
แอนิเมชั่น บูลีน จริง ใช้ CSS Fade Transition กับป๊อปโอเวอร์
คอนเทนเนอร์ สตริง | องค์ประกอบ | เท็จ เท็จ

ต่อท้ายป๊อปโอเวอร์กับองค์ประกอบเฉพาะ ตัวอย่าง: container: 'body'. ตัวเลือกนี้มีประโยชน์อย่างยิ่งโดยช่วยให้คุณสามารถวางตำแหน่งป๊อปโอเวอร์ในโฟลว์ของเอกสารใกล้กับองค์ประกอบที่ทริกเกอร์ ซึ่งจะป้องกันไม่ให้ป๊อปโอเวอร์ลอยออกจากองค์ประกอบที่ทริกเกอร์ในระหว่างการปรับขนาดหน้าต่าง

เนื้อหา สตริง | องค์ประกอบ | การทำงาน ''

ค่าเนื้อหาเริ่มต้นหากไม่มีdata-contentแอตทริบิวต์

หากมีการกำหนดฟังก์ชัน ฟังก์ชันนั้นจะถูกเรียกโดยthisตั้งค่าการอ้างอิงไปยังองค์ประกอบที่เชื่อมต่อป๊อปโอเวอร์

ล่าช้า หมายเลข | วัตถุ 0

ความล่าช้าในการแสดงและซ่อนป๊อปโอเวอร์ (ms) - ใช้ไม่ได้กับประเภททริกเกอร์ด้วยตนเอง

หากมีการระบุตัวเลข การหน่วงเวลาจะใช้กับทั้งซ่อน/แสดง

โครงสร้างวัตถุคือ:delay: { "show": 500, "hide": 100 }

html บูลีน เท็จ แทรก HTML ลงในป๊อปโอเวอร์ textหากเป็นเท็จ จะใช้วิธีของ jQuery เพื่อแทรกเนื้อหาลงใน DOM ใช้ข้อความหากคุณกังวลเกี่ยวกับการโจมตี XSS
ตำแหน่ง สตริง | การทำงาน 'ขวา'

วิธีวางตำแหน่งป๊อปโอเวอร์ - auto | ด้านบน | ด้านล่าง | ซ้าย | ขวา.
เมื่อautoถูกระบุ มันจะปรับทิศทางป๊อปโอเวอร์ใหม่แบบไดนามิก

เมื่อใช้ฟังก์ชันเพื่อกำหนดตำแหน่ง ฟังก์ชันจะถูกเรียกโดยมีโหนด DOM แบบป๊อปโอเวอร์เป็นอาร์กิวเมนต์แรก และโหนด DOM ที่ทริกเกอร์องค์ประกอบเป็นโหนดที่สอง บริบทถูกตั้ง ค่าthisเป็นอินสแตนซ์ป๊อปโอเวอร์

ตัวเลือก สตริง | เท็จ เท็จ หากมีตัวเลือก ออบเจ็กต์ป๊อปโอเวอร์จะถูกส่งไปยังเป้าหมายที่ระบุ ในทางปฏิบัติ ใช้เพื่อเปิดใช้งานเนื้อหา HTML แบบไดนามิกเพื่อเพิ่มป๊อปอัป ดูสิ่งนี้และตัวอย่างข้อมูล
แม่แบบ สตริง '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML พื้นฐานที่จะใช้เมื่อสร้างป๊อปโอเวอร์

ป๊อปโอเวอร์titleจะถูกฉีดเข้าไปในไฟล์.popover-header.

ป๊อปโอเวอร์contentจะถูกฉีดเข้าไปในไฟล์.popover-body.

.arrowจะกลายเป็นลูกศรของป๊อปโอเวอร์

องค์ประกอบ wrapper นอกสุดควรมี.popoverคลาส

ชื่อ สตริง | องค์ประกอบ | การทำงาน ''

ค่าเริ่มต้นของชื่อหากไม่มีtitleแอตทริบิวต์

หากมีการกำหนดฟังก์ชัน ฟังก์ชันนั้นจะถูกเรียกโดยthisตั้งค่าการอ้างอิงไปยังองค์ประกอบที่เชื่อมต่อป๊อปโอเวอร์

สิ่งกระตุ้น สตริง 'คลิก' วิธีเรียกป๊อปโอเวอร์ - คลิก | โฉบ | โฟกัส | คู่มือ. คุณอาจส่งทริกเกอร์หลายตัว แยกพวกเขาด้วยช่องว่าง ไม่สามารถรวม "คู่มือ" กับทริกเกอร์อื่นได้
offset หมายเลข | สตริง 0 ออฟเซ็ตของป๊อปโอเวอร์ที่สัมพันธ์กับเป้าหมาย สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารออฟเซ็ตของPopper.js
fallbackPlacement สตริง | อาร์เรย์ 'พลิก' อนุญาตให้ระบุตำแหน่งที่ Popper จะใช้กับทางเลือก สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารพฤติกรรมของ Popper.js
เขตแดน สตริง | ธาตุ 'เลื่อนผู้ปกครอง' ขอบเขตจำกัดล้นของป๊อปโอเวอร์ ยอมรับค่าของ'viewport', 'window', 'scrollParent', หรือการอ้างอิง HTMLElement (JavaScript เท่านั้น) สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสาร preventOverflow ของPopper.js

แอตทริบิวต์ข้อมูลสำหรับป๊อปอัปแต่ละรายการ

ตัวเลือกสำหรับป๊อปอัปแต่ละรายการสามารถระบุได้โดยใช้แอตทริบิวต์ข้อมูล ตามที่อธิบายข้างต้น

วิธีการ

วิธีการและการเปลี่ยนแบบอะซิงโครนัส

เมธอด API ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น

ดูเอกสาร JavaScript ของเราสำหรับข้อมูลเพิ่มเติม

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