Lịch sự kiện bootstrap 5

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ó yêu cầu
    $(function () {
      $('.example-popover').popover({
        container: 'body'
      })
    })
    9
  • 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 popover
    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ên
  • Chỉ định
    Click to toggle popover
    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.)
  • 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 popover
    3 hoặc
    Click to toggle popover
    4 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 popover
    5 trên
    Click to toggle popover
    6 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 popover
7 của chúng

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})
1

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 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'
  })
})
6

Bỏ 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 đổ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 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'
  })
})
1

yế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ọc

hoặ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'
  })
})
6

Cách sử dụng

Kích hoạt cửa sổ bật lên qua JavaScript

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})
7

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

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})
67, như trong
$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})
68

NameTypeDefaultDescriptionanimationbooleantrueÁp dụng chuyển đổi mờ dần CSS cho chuỗi popovercontainer. yếu tố. sai sự thật

Nố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'
  })
})
00

Nế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

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à.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})
02

htmlbooleanfalseChè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 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ẫu
$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})
06

HTML 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'
  })
})
08

Click 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 popover

Phần tử bao ngoài cùng phải có lớp

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})
12

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 popover
0

Nế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

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. tài liệu bù đắp của 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. hành vi của js docsboundarystring. 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
$(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 js

Thuộ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

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

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

Ẩ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

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

Ẩ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

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

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