Thuộc tính dữ liệu tùy chọn html

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

$(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 popover

$(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 left

Bỏ 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

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

  Popover on top



  Popover on right



  Popover on bottom



  Popover on left

Dismissible popover

$('.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 popover

hoặc

Click to toggle popover

  Popover on top



  Popover on right



  Popover on bottom



  Popover on left

Đố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

  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

  Popover on top



  Popover on right



  Popover on bottom



  Popover on left

Nối popover vào một phần tử cụ thể. Thí dụ.

Click to toggle popover

Giá trị nội dung mặc định nếu không có thuộc tính

Dismissible popover

Nếu một hàm được cung cấp, nó sẽ được gọi với tham chiếu

Dismissible popover

Độ 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 popover

Dismissible popover

Cách định vị cửa sổ bật lên - tự động. đứng đầu. đáy. bên trái. đúng
Khi

Dismissible popover

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 popover

Dismissible popover

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

Dismissible popover

Cửa sổ bật lên của

Click to toggle popover

$('.popover-dismiss').popover({
  trigger: 'focus'
})

$('.popover-dismiss').popover({
  trigger: 'focus'
})

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

$('.popover-dismiss').popover({
  trigger: 'focus'
})

Giá trị tiêu đề mặc định nếu không có thuộc tính

Click to toggle popover

Nếu một hàm được cung cấp, nó sẽ được gọi với tham chiếu

Dismissible popover

$('.popover-dismiss').popover({
  trigger: 'focus'
})

$('.popover-dismiss').popover({
  trigger: 'focus'
})

$('.popover-dismiss').popover({
  trigger: 'focus'
})

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

$('.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

$('#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

$('#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

  Disabled button

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

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

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

  Disabled 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