Tài liệu và ví dụ về cách thêm cửa sổ bật lên Bootstrap, giống như cửa sổ bật lên trong iOS, vào bất kỳ thành phần 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. tối thiểu. js trước bootstrap. js hoặc sử dụng $(function () { $('.example-popover').popover({ container: 'body' }) })7 / $(function () { $('.example-popover').popover({ container: 'body' }) })8 có chứa Popper. js để cửa sổ bật lên hoạt động
- Cửa sổ bật lên yêu cầu plugin chú giải công cụ làm phần phụ thuộc
- Nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó
- Cửa sổ bật lên được chọn tham gia vì lý do hiệu suất, vì vậy bạn phải tự khởi chạy chúng
- Các giá trị Click to toggle popover0 và Click to toggle popover1 có độ dài bằng 0 sẽ không bao giờ hiển thị cửa sổ bật lên
- Chỉ định Click to toggle popover2 để tránh sự cố hiển thị trong các thành phần phức tạp hơn (như nhóm đầu vào, nhóm nút, v.v.)
- Kích hoạt cửa sổ bật lên trên các phần tử ẩn sẽ không hoạt động
- Cửa sổ bật lên cho phần tử Click to toggle popover3 hoặc Click to toggle popover4 phải được kích hoạt trên phần tử bao bọc
- Khi được kích hoạt từ các neo bao quanh nhiều dòng, các cửa sổ bật lên sẽ được căn giữa giữa chiều rộng tổng thể của các neo. Sử dụng Click to toggle popover5 trên Click to toggle popover6 của bạn để tránh hành vi này
- Cửa sổ bật lên phải được ẩn trước khi các phần tử tương ứng của chúng bị xóa khỏi DOM
Tiếp tục đọc để xem cách cửa sổ bật lên hoạt động với một số ví dụ
Thí dụ. Kích hoạt cửa sổ bật lên ở mọi nơi
Một cách để khởi tạo tất cả các cửa sổ bật lên trên một trang là chọn chúng theo thuộc tính Click to toggle popover7
$(function () { $('[data-toggle="popover"]').popover() })Thí dụ. Sử dụng tùy chọn Click to toggle popover8
Khi bạn có một số kiểu trên phần tử gốc can thiệp vào cửa sổ bật lên, bạn sẽ muốn chỉ định một Click to toggle popover8 tùy chỉnh để thay vào đó, HTML của cửa sổ bật lên 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. căn trên, phải, dưới và trái
Popover ở trên Popover ở bên phải Popover ở dưới Popover ở bên trái
Popover on top Popover on right Popover on bottom Popover on leftBỏ qua lần nhấp 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ỏ cửa sổ bật lên trong lần nhấp tiếp theo của người dùng vào một phần tử khác với phần tử chuyển đổi
Yêu cầu đánh dấu cụ thể để loại bỏ khi nhấp vào lần nhấp tiếp theo
Để có hành vi đa nền tảng và trình duyệt phù hợp, bạn phải sử dụng thẻ Click to toggle popover6, không phải thẻ 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 2
$('.popover-dismiss').popover({ trigger: 'focus' })yếu tố bị vô hiệu hóa
Các phần tử có thuộc tính Click to toggle popover4 không tương tá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 cửa sổ bật lên (hoặc chú giải công cụ). Như một giải pháp thay thế, bạn sẽ muốn kích hoạt cửa sổ bật lên từ trình bao bọc
hoặc Click to toggle popover6 và ghi đè Popover on top Popover on right Popover on bottom Popover on left 5 trên phần tử bị vô hiệu hóa
Đối với trình kích hoạt cửa sổ bật lên 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 6 để cửa sổ bật lên 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 muốn nhấp vào phần tử bị vô hiệu hóa
Disabled button
Cách sử dụng
Kích hoạt cửa sổ bật lên qua JavaScript
$('#example').popover(options)Tùy chọn
Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào Popover on top Popover on right Popover on bottom Popover on left 7, như trong Popover on top Popover on right Popover on bottom Popover on left 8
NameTypeDefaultDescriptionanimationbooleantrueÁp dụng chuyển đổi mờ dần CSS cho chuỗi popovercontainer. yếu tố. sai sự thậtNối popover vào một phần tử cụ thể. Thí dụ. Click to toggle popover2. Tùy chọn này đặc biệt hữu ích vì nó cho phép bạn định vị cửa sổ bật lên trong luồng tài liệu gần phần tử kích hoạt - điều này sẽ ngăn cửa sổ bật lên trôi ra khỏi phần tử kích hoạt trong khi thay đổi kích thước cửa sổ
chuỗi nội dung. yếu tố. hàm số''Giá trị nội dung mặc định nếu không có thuộc tính Dismissible popover0
Nếu một hàm được cung cấp, nó sẽ được gọi với tham chiếu Dismissible popover1 của nó được đặt thành phần tử mà cửa sổ bật lên được gắn vào
số chậm trễ. đối tượng0Độ trễ hiển thị và ẩn cửa sổ bật lên (ms) - không áp dụng cho loại trình 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
Cấu trúc đối tượng là. Dismissible popover2
htmlbooleanfalseChèn HTML vào cửa sổ bật lên. Nếu sai, phương thức Dismissible popover3 của jQuery sẽ được sử dụng để chèn nội dung vào DOM. Sử dụng văn bản nếu bạn lo lắng về các cuộc tấn công XSS. chuỗi vị trí. chức năng'đúng'Cách định vị cửa sổ bật lên - tự động. đứng đầu. đáy. bên trái. đúng
Khi Dismissible popover4 được chỉ định, nó sẽ tự động định hướng lại cửa sổ bật lên
Khi một hàm được sử dụng để xác định vị trí, nó được gọi với nút DOM cửa sổ bật lên làm đối số đầu tiên và nút DOM phần tử kích hoạt làm đối số thứ hai. Bối cảnh Dismissible popover1 được đặt thành phiên bản popover
chuỗi chọn. falsefalseNếu bộ chọn được cung cấp, các đối tượng bật lên sẽ được ủy quyền cho các mục tiêu đã chỉ định. Trong thực tế, điều này được sử dụng để cho phép nội dung HTML động có thêm cửa sổ bật lên. Xem cái này và một ví dụ thông tin. chuỗi mẫuDismissible popover6HTML cơ sở để sử dụng khi tạo cửa sổ bật lên
Cửa sổ bật lên của Click to toggle popover0 sẽ được tiêm vào Dismissible popover8
Cửa sổ bật lên của Click to toggle popover1 sẽ được tiêm vào $('.popover-dismiss').popover({ trigger: 'focus' })0
$('.popover-dismiss').popover({ trigger: 'focus' })1 sẽ trở thành mũi tên của popover
Phần tử bao bọc ngoài cùng phải có lớp $('.popover-dismiss').popover({ trigger: 'focus' })2
chuỗi tiêu đề. yếu tố. hàm số''Giá trị tiêu đề mặc định nếu không có thuộc tính Click to toggle popover0
Nếu một hàm được cung cấp, nó sẽ được gọi với tham chiếu Dismissible popover1 của nó được đặt thành phần tử mà cửa sổ bật lên được gắn vào
chuỗi kích hoạt'click'Cách kích hoạt cửa sổ bật lên - nhấp chuột. bay lượn. tiêu điểm. thủ công. Bạn có thể vượt qua nhiều trình kích hoạt; . `thủ công` không thể được kết hợp với bất kỳ trình kích hoạt nào khác. số bù. string0Offset của cửa sổ bật lên so với mục tiêu của nó. Để biết thêm thông tin tham khảo Popper. js. chuỗi dự phòng. mảng'flip'Cho phép chỉ định vị trí mà Popper sẽ sử dụng khi dự phòng. Để biết thêm thông tin tham khảo Popper. chuỗi ranh giới của js. ranh giới ràng buộc element'scrollParent'Overflow của cửa sổ bật lên. Chấp nhận các giá trị của $('.popover-dismiss').popover({ trigger: 'focus' })5, $('.popover-dismiss').popover({ trigger: 'focus' })6, $('.popover-dismiss').popover({ trigger: 'focus' })7 hoặc tham chiếu HTMLElement (chỉ dành cho JavaScript). Để biết thêm thông tin tham khảo Popper. jsThuộc tính dữ liệu cho các cửa sổ bật lên riêng lẻ
Ngoài ra, các tùy chọn cho các cửa sổ bật lên riêng lẻ có thể được chỉ định thông qua việc sử dụng các thuộc tính dữ liệu, như đã giải thích ở trên
phương pháp
Các phương thức 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 quá trình chuyển đổi. Họ quay lại người gọi ngay khi quá trình chuyển đổi bắt đầu nhưng trước khi quá trình chuyển đổi 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
Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin
$('.popover-dismiss').popover({ trigger: 'focus' })8
Khởi tạo cửa sổ bật lên cho một bộ sưu tập phần tử
$('.popover-dismiss').popover({ trigger: 'focus' })9
Hiển thị cửa sổ bật lên của một phần tử. Trả về người gọi trước khi cửa sổ bật lên thực sự được hiển thị (i. e. trước khi sự kiện Disabled button 0 xảy ra). Đây được coi là cách kích hoạt popover “thủ công”. Cửa sổ bật lên có cả tiêu đề và nội dung đều có độ dài bằng 0 sẽ không bao giờ được hiển thị
$('#element').popover('show')Disabled button 1
Ẩn popover của một phần tử. Trả về người gọi trước khi cửa sổ bật lên thực sự bị ẩn (i. e. trước khi sự kiện Disabled button 2 xảy ra). Đây được coi là cách kích hoạt popover “thủ công”
$('#element').popover('hide')Disabled button 3
Chuyển đổi cửa sổ bật lên của một phần tử. Trả về người gọi trước khi cửa sổ bật lên thực sự được hiển thị hoặc ẩn (i. e. trước khi sự kiện Disabled button 0 hoặc Disabled button 2 xảy ra). Đây được coi là cách kích hoạt popover “thủ công”
$(function () { $('.example-popover').popover({ container: 'body' }) })0Disabled button 6
Ẩn và phá hủy cửa sổ bật lên của một phần tử. Cửa sổ bật lên sử dụng ủy quyền (được tạo bằng cách sử dụng ) không thể bị hủy riêng lẻ trên các phần tử kích hoạt con cháu
$(function () { $('.example-popover').popover({ container: 'body' }) })1Disabled button 8
Cung cấp cho cửa sổ bật lên của một phần tử khả năng được hiển thị. Popovers được bật theo mặc định
$(function () { $('.example-popover').popover({ container: 'body' }) })2Disabled button 9
Xóa khả năng hiển thị cửa sổ bật lên của một phần tử. Cửa sổ bật lên sẽ chỉ có thể được hiển thị nếu nó được bật lại