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
7 /$[function [] { $['.example-popover'].popover[{ container: 'body' }] }]
8 có chứa Popper. js để cửa sổ bật lên hoạt động$[function [] { $['.example-popover'].popover[{ container: 'body' }] }]
- 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ó yêu cầu
9$[function [] { $['.example-popover'].popover[{ container: 'body' }] }]
- 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ị
0 vàClick to toggle popover
1 có độ dài bằng 0 sẽ không bao giờ hiển thị cửa sổ bật lênClick to toggle popover
- Chỉ định
2 để 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.]Click to toggle popover
- 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ử
3 hoặcClick to toggle popover
4 phải được kích hoạt trên phần tử bao bọcClick to toggle popover
- 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
5 trênClick to toggle popover
6 của bạn để tránh hành vi nàyClick to toggle popover
- 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 popover
7 của chúng$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
1Thí 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 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 popover
8 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
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
6Bỏ qua lần nhấp tiếp theo
Sử dụng trình kích hoạt
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
60 để 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 đổiYê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 popover
6, không phải thẻ và bạn cũng phải bao gồm thuộc tính $[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
62$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
0$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
1yếu tố bị vô hiệu hóa
Các phần tử có thuộc tính
Click to toggle popover
4 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ọchoặc
Click to toggle popover
6 và ghi đè $[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
65 trên phần tử bị vô hiệu hóaĐối với các 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ể chọn
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
66 để 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$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
6Cách sử dụng
Kích hoạt cửa sổ bật lên qua JavaScript
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
7Tù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
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
67, như trong $[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
68NameTypeDefaultDescriptionanimationbooleantrueÁ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 popover
2. 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
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
00Nếu một hàm được cung cấp, nó sẽ được gọi với tham chiếu
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
01 của nó được đặt thành phần tử mà cửa sổ bật lên được gắn vàosố 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à.
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
02htmlbooleanfalseChèn HTML vào cửa sổ bật lên. Nếu sai, phương thức $[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
03 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
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
04 đượ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
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
01 được đặt thành phiên bản popoverchuỗ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ẫu$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
06HTML cơ sở để sử dụng khi tạo cửa sổ bật lên
Click to toggle popover
0 của popover sẽ được đưa vào $[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
08Click to toggle popover
1 của cửa sổ bật lên sẽ được đưa vào $[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
10$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
11 sẽ trở thành mũi tên của popoverPhần tử bao ngoài cùng phải có lớp
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
12chuỗ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 popover
0Nếu một hàm được cung cấp, nó sẽ được gọi với tham chiếu
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
01 của nó được đặt thành phần tử mà cửa sổ bật lên được gắn vào$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
15, $[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
16, $[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
17 hoặc tham chiếu HTMLElement [chỉ dành cho JavaScript]. Để biết thêm thông tin tham khảo Popper. tài liệu ngăn chặn dòng chảy của 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
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
18
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
Khởi tạo cửa sổ bật lên cho một bộ sưu tập phần tử
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
19
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
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
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
60 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ịClick to toggle popover
2$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
61
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
Ẩ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
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
62 xảy ra]. Đây được coi là cách kích hoạt popover “thủ công”Click to toggle popover
5$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
63
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
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
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
60 hoặc $[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
62 xảy ra]. Đây được coi là cách kích hoạt popover “thủ công”$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
0$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
66
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
Ẩ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 tùy chọn
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
67] không thể bị hủy riêng lẻ trên các phần tử kích hoạt con$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
1$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
68
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
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'
}]
}]
2$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
69
$[function [] {
$['.example-popover'].popover[{
container: 'body'
}]
}]
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