Bootstrap: Popovers popover.js
Giải phóng thời gian, khai phóng năng lực
Các ví dụ
Thêm các lớp phủ nhỏ của nội dung, giống như trên iPad, vào bất kỳ phần tử nào để chứa thông tin bổ sung.
Tính phụ thuộc của plugin
Popovers cần plugin chú thích phải đươc tích hợp sẵn trong phiên bản Bootstrap của bạn.
Tính năng opt-in
Vì lí do hiệu năng, Tooltip và Popover data-apis đều là opt-in, điều đó có nghĩa là bạn phải tự mình khởi tạo chúng.
Popover trong các nhóm nút và nhóm input cần các thiết lập đặc biệt
Khi sử dụng popover trên một phần tử bên trong một .btn-group hoặc một .input-group, bạn sẽ phải chỉ rõ tùy chọncontainer: 'body' (được mô tả ở bên dưới) để tránh side-effect không mong muốn (ví dụ như phần tử có chiều rộng tăng lên hoặc mất đi góc bo tròn khi chú thích được kích hoạt)..
Đừng cố gằng hiển thị popover trên các phần tử ẩn
Kích hoạt $(...).popover('show') khi phần tử đích là display: none; sẽ khiến cho chú thích hiển thị ở vị trí không chính xác.
Các popover trên các phần tử bị vô hiệu hóa cần các phần tử bọc ngoài
Để thêm một popover cho một phần tử disabled hoặc .disabled element, hãy đặt phần tử đó vào bên trọng một <div> và sử dụng tooltip trên phần tử <div> đó.
Popover tĩnh
Có 4 tùy chọn cho popover tĩnh bao gồm: bên trên, bên dưới, bên trái và bên phải.
Popover bên trên
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover bên phải
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover bên dưới
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover bên trái
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Demo trực tiếp
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click để kích hoạt popover</button>
Bốn hướng
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover bên trái
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover bên trên
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover bên dưới
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover bên phải
</button>
Ẩn popover khi click vào
Hãy sử dụng focus để kích hoạt việc ẩn popover khi click và popover đó.
<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Popover có thể ẩn</button>
$('.popover-dismiss').popover({
trigger: 'focus'
})
Liên kết nhiều dòng
Nhiều khi bạn muốn thêm gắn một popover vào một siêu liên kết trải dài trên nhiều dòng, khi đó hành vi mặc định của plugin popover là tự động căn giữa theo cả chiều ngang lẫn chiều dọc. Hãy thêm white-space: nowrap; vào liên kết của bạn để tránh điều này.
Cách sử dụng
Kích hoạt popover bằng JavaScript:
$('#example').popover(options)
Các tùy chọn
Các tùy chọn có thể được truyền vào thông 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 thêm tên của tùy chọn vào sau data-, tương tự như data-animation="".
| Tên | Loại | Mặc định | Mô tả |
|---|---|---|---|
| animation | boolean | true | Áp dụng hiệu ứng CSS fade transition lên popover |
| container | string | false | false |
Gắn popover vào một phần tử cụ thể. Ví dụ: |
| content | string | function | '' |
Giá trị nội dung mặc định nếu như thuộc tính Nếu đầu vào là một hàm, nó sẽ được gọi với 1 tham số truyền vào là phần tử mà popover được gắn vào. |
| delay | number | object | 0 |
Tạo thời gian trễ cho việc ẩn/hiện popover (ms) - không áp dụng cho trường hợp kích hoạt bằng tay Nếu chỉ có một số được truyền vào, thì sẽ được áp dụng cho cả việc ẩn và hiện Cấu trúc của đối tượng: |
| html | boolean | false | Chèn mã HTML vào popover . Nếu giá trị là false, phương thức text của jQuery sẽ được sử dụng để chèn thêm nội dung vào DOM. Hãy sử dụng text nếu bạn lo lắng về các cuộc tấn công XSS. |
| placement | string | function | 'right' | Xác định vị trí của popover - top | bottom | left | right | auto. . Khi "auto" được truyền vào, nó sẽ tự động định hướng lại popover. Ví dụ, nếu placement là "auto left", popover sẽ hiển thị về phía bên trái khi có thể, nếu không nó sẽ hiển thị về phía bên phải.. |
| selector | string | false | Nếu một selector được cung cấp, các đối tượng popover sẽ được gắn với các mục tiêu cụ thể. Thực tế, tùy chọn này được sử dụng để cho phép thêm popover vào các nội dung HTML động. Hãy tham khảo mục này và một ví dụ trực tiếp. |
| template | string | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Mã HTML cơ sở được sử dụng khi tạo popover.
Phần tử bọc ngoài cùng cần có class |
| title | string | function | '' | Giá trị mặc định nếu như thuộc tính title không được chỉ rõ |
| trigger | string | 'click' | Cách popover được kích hoạt - click | hover | focus | manual. Bạn cũng có thể truyền vào nhiều cách kích hoạt, phân tách nhau bởi dấu cách. |
| viewport | string | object | { selector: 'body', padding: 0 } |
Giữ popover nằm bên trong vùng giới hạn của phần tử này. Ví dụ: |
Các thuộc tính dữ liệu cho các popover riêng lẻ
Các tùy chọn cho các popover riêng lẻ có thể được thay thế bằng cách chỉ rõ thông qua việc sử dụng các thuộc tính dữ liệu, như đã giải thích ở trên.
Các phương thức
$().popover(options)
Khởi tạo popover trên một tập hợp các phần tử.
.popover('show')
Mở popover.
$('#element').popover('show')
.popover('hide')
Đóng popover.
$('#element').popover('hide')
.popover('toggle')
Đóng/mở popover.
$('#element').popover('toggle')
.popover('destroy')
Đóng và xóa bỏ popover của phần tử.
$('#element').popover('destroy')
Các sự kiện
| Loại sự kiện | Mô tả |
|---|---|
| show.bs.popover | Sự kiện này xảy ra ngay khi phương thức show được gọi. |
| shown.bs.popover | Sự kiện này xảy ra khi popover đã hiển thị (đang chờ CSS transition kết thúc). |
| hide.bs.popover | Sự kiện này xảy ra ngay khi phương thức hide được gọi. |
| hidden.bs.popover | Sự kiện này xảy ra khi popover đã bị ẩn đi (đang chờ CSS transition kết thúc). |
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})
Giải phóng thời gian, khai phóng năng lực