Tài liệu và ví dụ để thêm popover bootstrap, giống như những tài liệu được tìm thấy trong iOS, vào bất kỳ yếu tố nào trên trang web của bạn.
Tổng quan
Những điều cần biết khi sử dụng plugin popover:
- PopoVers dựa vào thư viện bên thứ 3 popper.js để định vị. Bạn phải bao gồm popper.min.js trước bootstrap.js hoặc sử dụng
7 /$[function [] { $['.example-popover'].popover[{ container: 'body' }] }]
8 có chứa popper.js để popover hoạt động!$[function [] { $['.example-popover'].popover[{ container: 'body' }] }]
- PopoVers yêu cầu plugin Tooltip như một sự phụ thuộc.
- Nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó yêu cầu
9.$[function [] { $['.example-popover'].popover[{ container: 'body' }] }]
- PopoVers chọn tham gia vì lý do hiệu suất, vì vậy bạn phải tự khởi tạo chúng.you must initialize them yourself.
- Các giá trị
0 vàClick to toggle popover
1 có độ dài không bao giờ hiển thị popover.Click to toggle popover
- Chỉ định
2 để tránh đưa ra các vấn đề trong các thành phần phức tạp hơn [như các nhóm đầu vào của chúng tôi, nhóm nút, v.v.].Click to toggle popover
- Kích hoạt popover trên các yếu tố ẩn sẽ không hoạt động.
- PopoVers cho các phần tử
3 hoặcClick to toggle popover
4 phải được kích hoạt trên một phần tử trình bao bọc.Click to toggle popover
- Khi được kích hoạt từ các mỏ neo bao bọc trên nhiều dòng, popover sẽ được tập trung giữa độ rộng tổng thể của neo. Sử dụng
5 trênClick to toggle popover
6 của bạn để tránh hành vi này.Click to toggle popover
- PopoVers phải được ẩn trước khi các yếu tố tương ứng của chúng đã bị xóa khỏi DOM.
Hãy đọc để xem làm thế nào PopoVers hoạt động với một số ví dụ.
Ví dụ: Bật popover ở mọi nơi
Một cách để khởi tạo tất cả các popover trên một trang sẽ là chọn chúng bằng thuộc tính
Click to toggle popover
7 của chúng:$[function [] {
$['[data-toggle="popover"]'].popover[]
}]
Ví dụ: Sử dụng tùy chọn Click to toggle popover
8
Click to toggle popover
Khi bạn có một số kiểu trên một yếu tố cha mẹ can thiệp vào một popover, bạn sẽ muốn chỉ định một tùy chỉnh
Click to toggle popover
8 để thay thế HTML Popover xuất hiện trong phần tử đó.$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
Thí dụ
Click to toggle popover
Bốn hướng
Bốn tùy chọn có sẵn: trên cùng, phải, dưới cùng và bên trái được căn chỉnh.
Popover on top
Popover on right
Popover on bottom
Popover on left
Bỏ qua khi nhấp chuột tiếp theo
Sử dụng trình kích hoạt
Popover on top
Popover on right
Popover on bottom
Popover on left
0 để loại bỏ popoVers trên người dùng nhấp chuột tiếp theo của một phần tử khác với phần tử chuyển đổi.Đánh dấu cụ thể cần thiết để loại bỏ trên máy ảnh
Đối với hành vi trình duyệt chéo và đa nền tảng thích hợp, bạn phải sử dụng thẻ
Click to toggle popover
6 chứ không phải thẻ
Popover on top
Popover on right
Popover on bottom
Popover on left
2 và bạn cũng phải bao gồm thuộc tính
Popover on top
Popover on right
Popover on bottom
Popover on left
3.Dismissible popover
$['.popover-dismiss'].popover[{
trigger: 'focus'
}]
Các yếu tố bị vô hiệu hóa
Các yếu tố với thuộc tính
Click to toggle popover
4 aren tương tác, có nghĩa là người dùng không thể di chuột hoặc nhấp vào chúng để kích hoạt popover [hoặc chú giải công cụ]. Là một cách giải quyết, bạn sẽ muốn kích hoạt popover từ trình bao bọc
Popover on top
Popover on right
Popover on bottom
Popover on left
5 hoặc
Popover on top
Popover on right
Popover on bottom
Popover on left
6 và ghi đè
Popover on top
Popover on right
Popover on bottom
Popover on left
7 trên phần tử bị vô hiệu hóa.Đối với các kích hoạt popover bị vô hiệu hóa, bạn cũng có thể thích
Popover on top
Popover on right
Popover on bottom
Popover on left
8 để popover xuất hiện dưới dạng phản hồi trực quan ngay lập tức cho người dùng của bạn vì họ có thể không mong đợi nhấp vào phần tử bị vô hiệu hóa.
Disabled button
Cách sử dụng
Bật PopoVers qua JavaScript:
$['#example'].popover[options]
Tùy chọn
Các tùy chọn có thể được truyền qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào
Popover on top
Popover on right
Popover on bottom
Popover on left
9, như trong Dismissible popover
0.
hoạt hình | Boolean | thật | Áp dụng quá trình chuyển đổi Fade CSS cho popover |
thùng đựng hàng | Chuỗi | yếu tố | sai | sai | Bổ số popover vào một yếu tố cụ thể. Ví dụ: 2. Tùy chọn này đặc biệt hữu ích ở chỗ nó cho phép bạn định vị popover trong luồng của tài liệu gần phần tử kích hoạt -& nbsp; sẽ ngăn chặn popover trôi đi khỏi phần tử kích hoạt trong quá trình thay đổi kích thước cửa sổ.
|
Nội dung | Chuỗi | yếu tố | hàm số | ' | Giá trị nội dung mặc định nếu thuộc tính 2 không có mặt.Nếu một hàm được đưa ra, nó sẽ được gọi với tham chiếu 3 của nó được đặt thành phần tử mà popover được đính kèm.
|
sự chậm trễ | Số | sự vật | 0 | Trì hoãn hiển thị và che giấu popover [MS] - không áp dụng cho loại kích hoạt thủ công Nếu một số được cung cấp, độ trễ được áp dụng cho cả ẩn/hiển thị Cấu trúc đối tượng là: 4 |
HTML | Boolean | sai | Bổ số popover vào một yếu tố cụ thể. Ví dụ: 2. Tùy chọn này đặc biệt hữu ích ở chỗ nó cho phép bạn định vị popover trong luồng của tài liệu gần phần tử kích hoạt -& nbsp; sẽ ngăn chặn popover trôi đi khỏi phần tử kích hoạt trong quá trình thay đổi kích thước cửa sổ. |
Nội dung | Chuỗi | yếu tố | hàm số | ' | Giá trị nội dung mặc định nếu thuộc tính 2 không có mặt.When 6 is specified, it will dynamically reorient the popover.Nếu một hàm được đưa ra, nó sẽ được gọi với tham chiếu 3 của nó được đặt thành phần tử mà popover được đính kèm.
|
sự chậm trễ | Số | sự vật | sai | Bổ số popover vào một yếu tố cụ thể. Ví dụ: 2. Tùy chọn này đặc biệt hữu ích ở chỗ nó cho phép bạn định vị popover trong luồng của tài liệu gần phần tử kích hoạt -& nbsp; sẽ ngăn chặn popover trôi đi khỏi phần tử kích hoạt trong quá trình thay đổi kích thước cửa sổ. |
Nội dung | Chuỗi | yếu tố | hàm số | ' | Giá trị nội dung mặc định nếu thuộc tính 2 không có mặt.Nếu một hàm được đưa ra, nó sẽ được gọi với tham chiếu 3 của nó được đặt thành phần tử mà popover được đính kèm. 1 của popover sẽ được tiêm vào 2. 3 sẽ trở thành mũi tên của popover.Phần tử trình bao bọc ngoài cùng phải có lớp 4.
|
Tiêu đề | Chuỗi | yếu tố | hàm số | ' | Giá trị tiêu đề mặc định nếu thuộc tính 0 không có mặt.Nếu một hàm được đưa ra, nó sẽ được gọi với tham chiếu 3 của nó được đặt thành phần tử mà popover được đính kèm.
|
Kích hoạt | sợi dây | 'nhấp chuột' | Cách popover được kích hoạt - nhấp vào | di chuột | Trọng tâm | thủ công. Bạn có thể vượt qua nhiều kích hoạt; Tách chúng với một không gian. `Hướng dẫn 'không thể được kết hợp với bất kỳ kích hoạt nào khác. |
bù lại | Số | sợi dây | 0 | Offset của popover so với mục tiêu của nó. Để biết thêm thông tin, hãy tham khảo các tài liệu bù của popper.js. |
sự thất bại | Chuỗi | mảng | 'Lật' | Cho phép chỉ định vị trí nào popper sẽ sử dụng khi dự phòng. Để biết thêm thông tin, hãy tham khảo tài liệu hành vi của popper.js |
ranh giới | Chuỗi | yếu tố | 'cuộn giấy' | Ranh giới ràng buộc tràn của popover. Chấp nhận các giá trị của 7, 8, 9 hoặc tham chiếu htmlelement [chỉ JavaScript]. Để biết thêm thông tin, hãy tham khảo tài liệu phòng ngừa của Popper.js. |
Thuộc tính dữ liệu cho từng popover riêng lẻ
Các tùy chọn cho các popovers riêng lẻ có thể được chỉ định thay thế thông qua việc sử dụng các thuộc tính dữ liệu, như được giải thích ở trên.
Phương pháp
Phương pháp và chuyển tiếp không đồng bộ
Tất cả các phương thức API đều không đồng bộ và bắt đầu chuyển đổi. Họ trở lại với người gọi ngay khi quá trình chuyển đổi được bắt đầu nhưng trước khi nó kết thúc. Ngoài ra, một cuộc gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua.asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin.
Disabled button
0
Disabled button
Khởi tạo popoVers cho một bộ sưu tập phần tử.
Disabled button
1
Disabled button
Tiết lộ một yếu tố popover. Trả lại cho người gọi trước khi popover thực sự được hiển thị [tức là trước khi sự kiện
Disabled button
2 xảy ra]. Đây được coi là một hướng dẫn sử dụng của người Viking kích hoạt popover. Popovers có cả tiêu đề và nội dung đều có độ dài bằng 0 không bao giờ được hiển thị.Returns to
the caller before the popover has actually been shown [i.e. before the
Disabled button
2 event occurs]. This is considered a “manual” triggering of the popover. Popovers whose both title and content are zero-length are never displayed.$['#element'].popover['show']
Disabled button
3
Disabled button
Giấu một yếu tố popover. Trả lại cho người gọi trước khi popover thực sự bị ẩn [tức là trước khi sự kiện
Disabled button
4 xảy ra]. Đây được coi là một hướng dẫn sử dụng của người Viking kích hoạt popover.Returns to the caller before the popover has actually been hidden [i.e. before the
Disabled button
4 event occurs]. This is considered a “manual” triggering of the
popover.$['#element'].popover['hide']
Disabled button
5
Disabled button
Bật một phần tử popover. Trả về người gọi trước khi popover thực sự được hiển thị hoặc ẩn [nghĩa là trước khi sự kiện
Disabled button
2 hoặc
Disabled button
4 xảy ra]. Đây được coi là một hướng dẫn sử dụng của người Viking kích hoạt popover.Returns to the caller before the popover has actually been shown or hidden [i.e. before the
Disabled button
2 or
Disabled button
4 event occurs]. This is considered a “manual” triggering of the popover.$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
0
Disabled button
8
Disabled button
Giấu và phá hủy một yếu tố popover. PopoVers sử dụng Phái đoàn [được tạo bằng tùy chọn
Disabled button
9] không thể bị phá hủy riêng lẻ trên các yếu tố kích hoạt hậu duệ.$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
1$['#example'].popover[options]
0
$['#example'].popover[options]
Cung cấp cho một yếu tố popover khả năng được hiển thị. PopoVers được bật theo mặc định.Popovers are enabled by default.
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
2$['#example'].popover[options]
1
$['#example'].popover[options]
Loại bỏ khả năng cho một phần tử popover được hiển thị. Popover sẽ chỉ có thể được hiển thị nếu nó được kích hoạt lại.
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
3$['#example'].popover[options]
2
$['#example'].popover[options]
Tăng khả năng cho một phần tử popover được hiển thị hoặc ẩn.
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
4$['#example'].popover[options]
3
$['#example'].popover[options]
Cập nhật vị trí của một yếu tố popover.
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
5Sự kiện
show.bs.popover | Sự kiện này bắn ngay lập tức khi phương thức thể hiện 4 được gọi. |
hiển thị.bs.popover | Sự kiện này được bắn khi popover đã được người dùng hiển thị [sẽ chờ hoàn thành chuyển đổi CSS]. |
ẩn.bs.popover | Sự kiện này được bắn ngay lập tức khi phương thức thể hiện 5 đã được gọi. |
ẩn.bs.popover | Sự kiện này được bắn khi popover đã hoàn thành việc bị ẩn khỏi người dùng [sẽ chờ hoàn thành chuyển đổi CSS]. |
chèn.bs.popover | Sự kiện này được bắn sau sự kiện 6 khi mẫu popover đã được thêm vào DOM. |
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
6