Bootstrap - Plugin bật lên

Cửa sổ bật lên tương tự như chú giải công cụ, cung cấp một chế độ xem mở rộng hoàn chỉnh với một tiêu đề. Để kích hoạt cửa sổ bật lên, người dùng chỉ cần di con trỏ qua phần tử. Nội dung của cửa sổ bật lên có thể được điền hoàn toàn bằng API dữ liệu Bootstrap. Phương pháp này yêu cầu một chú giải công cụ.

Nếu bạn muốn bao gồm chức năng plugin này riêng lẻ, thì bạn sẽ cần popover.jsvà nó có sự phụ thuộc của plugin chú giải công cụ . Khác, như đã đề cập trong chương Bootstrap Plugins Tổng quan , bạn có thể đưa bootstrap.js hoặc minified bootstrap.min.js .

Sử dụng

Plugin bật lên tạo ra nội dung và đánh dấu theo yêu cầu và theo mặc định đặt cửa sổ bật lên sau phần tử kích hoạt của chúng. Bạn có thể thêm cửa sổ bật lên theo hai cách sau:

Via data attributes - Để thêm cửa sổ bật lên, hãy thêm data-toggle = "popover"vào thẻ neo / nút. Tiêu đề của anchor sẽ là văn bản của popover. Theo mặc định, cửa sổ bật lên được plugin đặt ở trên cùng.

<a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>

Via JavaScript - Bật popover qua JavaScript bằng cú pháp sau:

$('#identifier').popover(options)

Plugin bật lên KHÔNG phải là plugin duy nhất của css như trình đơn thả xuống hoặc các plugin khác đã được thảo luận trong các chương trước. Để sử dụng plugin này, bạn PHẢI kích hoạt nó bằng jquery (đọc javascript). Để bật tất cả các cửa sổ bật lên trên trang của bạn, chỉ cần sử dụng tập lệnh này -
$(function () { $("[data-toggle = 'popover']").popover(); });

Thí dụ

Ví dụ sau minh họa việc sử dụng plugin popover thông qua các thuộc tính dữ liệu.

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover on left">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover on top">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover on bottom">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "right" 
      data-content = "Some content in Popover on right">
      
      Popover on right
   </button>
   
</div>

<script>
   $(function (){
      $("[data-toggle = 'popover']").popover();
   });
</script>

Tùy chọn

Có một số tùy chọn có thể được thêm vào qua API dữ liệu Bootstrap hoặc được gọi qua JavaScript. Bảng sau liệt kê các tùy chọn -

Tên tùy chọn	Loại / Giá trị mặc định	Tên thuộc tính dữ liệu	Sự miêu tả
hoạt hình	boolean Mặc định - true	dữ liệu-hoạt ảnh	Áp dụng chuyển đổi mờ dần CSS cho cửa sổ bật lên.
html	boolean Mặc định - false	data-html	Chèn HTML vào cửa sổ bật lên. Nếu sai, phương thức văn bản 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.
vị trí	string \| function Mặc định - trên cùng	vị trí dữ liệu	Chỉ định cách định vị cửa sổ bật lên (tức là trên cùng \| dưới cùng \| trái \| phải \| tự động). Khi tự động được chỉ định, nó sẽ tự động định hướng lại cửa sổ bật lên. Ví dụ: nếu vị trí là "tự động bên trái", cửa sổ bật lên sẽ hiển thị bên trái khi có thể, nếu không, nó sẽ hiển thị bên phải.
bộ chọn	string Mặc định - false	bộ chọn dữ liệu	Nếu một 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 được chỉ định.
tiêu đề	chuỗi \| chức năng Mặc định - "	data-title	Tùy chọn tiêu đề là giá trị tiêu đề mặc định nếu thuộc tính tiêu đề không có.
Kích hoạt	string Mặc định - 'tiêu điểm di chuột'	kích hoạt dữ liệu	Xác định cách cửa sổ bật lên được kích hoạt - click\| hover \| focus \| manual. Bạn có thể vượt qua nhiều lần kích hoạt; ngăn cách chúng bằng một khoảng trắng.
sự chậm trễ	số \| đối tượng Mặc định - 0	dữ liệu chậm trễ	Độ trễ hiển thị và ẩn cửa sổ bật lên tính bằng mili giây - 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à - `delay: { show: 500, hide: 100 }`
thùng đựng hàng	chuỗi \| false Mặc định - sai	vùng chứa dữ liệu	Thêm cửa sổ bật lên cho một phần tử cụ thể. Ví dụ: container: 'body'

Phương pháp

Sau đây là một số phương pháp hữu ích cho cửa sổ bật lên -

phương pháp	Sự miêu tả	Thí dụ
Options - .popover (tùy chọn)	Đính kèm một trình xử lý cửa sổ bật lên vào một tập hợp phần tử.	`$().popover(options)`
Toggle - .popover ('chuyển đổi')	Chuyển đổi cửa sổ bật lên của một phần tử.	`$('#element').popover('toggle')`
Show - .popover ('hiển thị')	Hiển thị cửa sổ bật lên của một phần tử.	`$('#element').popover('show')`
Hide - .popover ('ẩn')	Ẩn cửa sổ bật lên của một phần tử.	`$('#element').popover('hide')`
Destroy - .popover ('tiêu diệt')	Ẩn và phá hủy cửa sổ bật lên của một phần tử.	`$('#element').popover('destroy')`

Thí dụ

Ví dụ sau minh họa các phương pháp plugin bật lên:

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default popover-show" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary popover-hide" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-hide method">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success popover-destroy" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover-destroy method">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning popover-toggle" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-toggle method">
      
      Popover on right
   </button>
	
   <br><br><br><br><br><br>
   
   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning" 
         title = "<h2>Title</h2>" data-container = "body" 
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</h4>">
         
         Popover
      </a>
   </p>
   
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
   </script>
	
</div>

Sự kiện

Bảng sau liệt kê các sự kiện để làm việc với plugin bật lên. Sự kiện này có thể được sử dụng để nối vào hàm.

Biến cố	Sự miêu tả	Thí dụ
show.bs.popover	Sự kiện này kích hoạt ngay lập tức khi phương thức thể hiện show được gọi.	`$('#mypopover').on('show.bs.popover', function () { // do something })`
show.bs.popover	Sự kiện này được kích hoạt khi cửa sổ bật lên hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).	`$('#mypopover').on('shown.bs.popover', function () { // do something })`
hide.bs.popover	Sự kiện này được kích hoạt ngay lập tức khi phương thức ẩn thể hiện đã được gọi.	`$('#mypopover').on('hide.bs.popover', function () { // do something })`
hidden.bs.popover	Sự kiện này được kích hoạt khi cửa sổ bật lên hoàn tất bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).	`$('#mypopover').on('hidden.bs.popover', function () { // do something })`

Thí dụ

Ví dụ sau minh họa các sự kiện plugin Popover:

<div clas = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-primary popover-show" 
      title = "Popover title" data-container = "body" data-toggle = "popover" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
</div>

<script>
   $(function () { $('.popover-show').popover('show');});
   
   $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("Alert message on show");
   })});
</script>