JS Popover (popover.js)
Popover ปลั๊กอินคล้ายกับคำแนะนำเครื่องมือ; มันเป็นกล่องป๊อปอัพที่ปรากฏขึ้นเมื่อผู้ใช้คลิกที่องค์ประกอบ ความแตกต่างคือว่า popover สามารถมีเนื้อหามากขึ้น
พึ่งพาปลั๊กอิน: Popovers ต้องใช้ปลั๊กอินเคล็ดลับเครื่องมือ (tooltip.js) จะรวมอยู่ในรุ่นของ Bootstrap
สำหรับการกวดวิชาเกี่ยวกับ Popovers อ่านของเรา Bootstrap Popover กวดวิชา
ผ่าน data-* แอตทริบิวต์
data-toggle="popover" เปิดใช้งาน popover
title แอตทริบิวต์ระบุข้อความส่วนหัวของ popover
data-content แอตทริบิวต์ระบุข้อความที่ควรจะแสดงภายใน popover's ร่างกาย
ตัวอย่าง
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some
content inside the popover">Toggle popover</a>
ลองตัวเอง» ผ่านทางจาวาสคริปต์
Popovers ปลั๊กอินไม่ CSS อย่างเดียวและดังนั้นจึงต้องเริ่มต้นกับ jQuery: เลือกองค์ประกอบที่ระบุและเรียก popover() วิธีการ
ตัวอย่าง
// Select all
elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();
// Select a specified
element
$('#myPopover').popover();
ลองตัวเอง» Popover ตัวเลือก
ตัวเลือกที่สามารถส่งผ่านข้อมูลผ่านทางคุณลักษณะหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลผนวกชื่อตัวเลือกในการ data- ในขณะที่ data-placement=""
| ชื่อ | ชนิด | ค่าเริ่มต้น | ลักษณะ | ลองมัน |
|---|---|---|---|---|
| animation | boolean | true | ระบุว่าเพื่อเพิ่มผลการเปลี่ยนแปลง CSS จางเมื่อเปิดและปิด popover
| ลองมัน |
| container | string, or the boolean false | false | ผนวก popover กับองค์ประกอบที่เฉพาะเจาะจง ตัวอย่าง: ภาชนะ: 'body' | ลองมัน |
| content | string | "" | ระบุข้อความภายใน popover's body | ลองมัน |
| delay | number, or object | 0 | ระบุจำนวนมิลลิวินาทีก็จะใช้เวลาในการเปิดและปิด popover เพื่อระบุความล่าช้าในการเปิดและอีกคนหนึ่งสำหรับการปิดการใช้โครงสร้างวัตถุ: delay: {show: 500, hide: 100} - ซึ่งจะใช้เวลา 500 มิลลิวินาทีเพื่อเปิด popover แต่เพียง 100 มิลลิวินาทีจะปิดมัน | ลองมัน |
| html | boolean | false | ระบุว่าจะยอมรับแท็ก HTML ใน popover :
เมื่อตั้งค่าเป็นเท็จ (ค่าเริ่มต้น) ของ jQuery text() วิธีการจะนำไปใช้ การใช้งานนี้ถ้าคุณมีความกังวลใจเกี่ยวกับการโจมตี XSS | ลองมัน |
| placement | string | "right" | ระบุ popover ตำแหน่ง ค่าที่เป็นไปได้:
| ลองมัน |
| selector | string, or the boolean false | false | เพิ่ม popover กับตัวเลือกที่ระบุ | ลองมัน |
| template | string | ฐาน HTML เพื่อใช้เมื่อสร้าง popover popover's ชื่อจะได้รับการฉีดเข้าไปใน .popover ชื่อ popover's เนื้อหาจะถูกฉีดเข้าไปใน .popover เนื้อหา .arrow จะกลายเป็น popover's ลูกศร องค์ประกอบที่ห่อหุ้มชั้นนอกสุดควรมี .popover ระดับ | ||
| title | string | "" | ระบุข้อความส่วนหัวของ popover | ลองมัน |
| trigger | string | "click" | ระบุวิธีการ popover ถูกเรียก ค่าที่เป็นไปได้:
| ลองมัน |
| viewport | string, or object | {selector: "body", padding: 0} | ช่วยให้ popover ภายในขอบเขตขององค์ประกอบนี้ ตัวอย่าง: viewport: '#viewport' หรือ {selector: '#viewport', padding: 0} |
Popover วิธี
ตารางต่อไปนี้แสดงรายการที่มีอยู่ทั้งหมด popover วิธี
| วิธี | ลักษณะ | ลองมัน |
|---|---|---|
| .popover( options ) | เปิดใช้งาน popover ที่มีตัวเลือก ดูตัวเลือกข้างต้นสำหรับค่าที่ถูกต้อง | ลองมัน |
| .popover("show") | แสดงให้เห็นถึง popover | ลองมัน |
| .popover("hide") | ซ่อน popover | ลองมัน |
| .popover("toggle") | สลับ popover | ลองมัน |
| .popover("destroy") | ซ่อนและทำลาย popover | ลองมัน |
Popover เหตุการณ์
ตารางต่อไปนี้แสดงรายการที่มีอยู่ทั้งหมด popover เหตุการณ์
| เหตุการณ์ | ลักษณะ | ลองมัน |
|---|---|---|
| show.bs.popover | เกิดขึ้นเมื่อ popover เป็นเรื่องเกี่ยวกับที่จะแสดง | ลองมัน |
| shown.bs.popover | เกิดขึ้นเมื่อ popover ก็แสดงให้เห็นอย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) | ลองมัน |
| hide.bs.popover | เกิดขึ้นเมื่อ popover กำลังจะถูกซ่อน | ลองมัน |
| hidden.bs.popover | เกิดขึ้นเมื่อ popover ถูกซ่อนไว้อย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) | ลองมัน |
ตัวอย่าง
ที่กำหนดเอง Popover ออกแบบ
ใช้ CSS ปรับแต่งรูปลักษณ์ของ popover :
ตัวอย่าง
/* Popover */
.popover {
border: 2px dotted
red;
}
/* Popover Header */
.popover-title {
background-color:
#73AD21;
color: #FFFFFF;
font-size: 28px;
text-align:center;
}
/* Popover
Body */
.popover-content {
background-color: coral;
color: #FFFFFF;
padding: 25px;
}
/* Popover Arrow */
.arrow {
border-right-color: red !important;
} ลองตัวเอง»