Hướng dẫn bootstrap switch events - sự kiện chuyển đổi bootstrap

Tôi đang sử dụng BootStrap Switch và cần phải chọn độc quyền: có một loạt các bộ chuyển đổi (số lượng không xác định) và người dùng có thể quay một lần chỉ một.

Tôi đã làm một cái gì đó như thế này:

$('.switcher').on('switchChange.bootstrapSwitch', function() {
    $(".switcher[id!='"+selected_id+"']").each(function() {
        $(this).bootstrapSwitch('state', false);
    });
    $('#'+selected_id).bootstrapSwitch('state', current_state);
});

Thật không may, điều này gửi kịch bản trên một vòng lặp vô hạn (khi thay đổi trạng thái). Tôi nghĩ rằng điều này là do dưới mui xe, BootStrap Switch sử dụng hàm Trigger (), vì vậy khi trạng thái chuyển đổi được thay đổi thành FALSE, nó sẽ kích hoạt sự kiện Switchchange một lần nữa, v.v.

Tôi đã thực hiện một cách giải quyết, bằng cách kích hoạt:

$("#some-container .bootstrap-switch-container *").click(function() {
    // ...
});

Thay vì. Tuy nhiên, đây có vẻ như là một giải pháp thực sự tồi tệ.

Có cách nào tốt hơn?

Tài liệu và ví dụ để thêm popover bootstrap, giống như những tài liệu được tìm thấy trong iOS, vào bất kỳ yếu tố 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.min.js trước bootstrap.js hoặc sử dụng
    $("#some-container .bootstrap-switch-container *").click(function() {
        // ...
    });
    
    9 /
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
    0 có chứa popper.js để popover hoạt động!
  • PopoVers yêu cầu plugin Tooltip như một sự 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 () {
      $('[data-toggle="popover"]').popover()
    })
    1.
  • PopoVers chọn tham gia vì lý do hiệu suất, vì vậy bạn phải tự khởi tạo chúng.you must initialize them yourself.
  • Các giá trị
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
    2 và
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
    3 có độ dài không bao giờ hiển thị popover.
  • Chỉ định
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
    4 để tránh đưa ra các vấn đề trong các thành phần phức tạp hơn (như các nhóm đầu vào của chúng tôi, nhóm nút, v.v.).
  • Kích hoạt popover trên các yếu tố ẩn sẽ không hoạt động.
  • PopoVers cho các phần tử
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
    5 hoặc
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
    6 phải được kích hoạt trên một phần tử trình bao bọc.
  • Khi được kích hoạt từ các mỏ neo bao bọc trên nhiều dòng, popover sẽ được tập trung giữa độ rộng tổng thể của neo. Sử dụng
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
    7 trên
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
    8 của bạn để tránh hành vi này.
  • PopoVers phải được ẩn trước khi các yếu tố tương ứng của chúng đã bị xóa khỏi DOM.

Hãy đọc để xem làm thế nào PopoVers hoạt động với một số ví dụ.

Ví dụ: Bật popover ở mọi nơi

Một cách để khởi tạo tất cả các popover trên một trang sẽ là chọn chúng bằng thuộc tính

$(function () {
  $('[data-toggle="popover"]').popover()
})
9 của chúng:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Ví dụ: Sử dụng tùy chọn $(function () { $('.example-popover').popover({ container: 'body' }) })0

Khi bạn có một số kiểu trên một yếu tố cha mẹ can thiệp vào một popover, bạn sẽ muốn chỉ định một

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})
0 tùy chỉnh để thay thế HTML Popover xuất hiện trong phần tử đó.

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

Thí dụ

 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 to toggle popover

Bốn hướng

Bốn tùy chọn có sẵn: trên cùng, phải, dưới cùng và bên trái được căn chỉnh.

 type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top


 type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right


 type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom


 type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left

Bỏ qua khi nhấp chuột tiếp theo

Sử dụng trình kích hoạt

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})
2 để loại bỏ popoVers trên người dùng nhấp chuột tiếp theo của một phần tử khác với phần tử chuyển đổi.

Đánh dấu cụ thể cần thiết để loại bỏ trên máy ảnh

Đối với hành vi trình duyệt chéo và đa nền tảng thích hợp, bạn phải sử dụng thẻ

$(function () {
  $('[data-toggle="popover"]').popover()
})
8 chứ không phải thẻ
$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})
4 và bạn cũng phải bao gồm thuộc tính
$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})
5.

 tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover

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

Các yếu tố bị vô hiệu hóa

Các yếu tố với thuộc tính

$(function () {
  $('[data-toggle="popover"]').popover()
})
6 aren tương tác, 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 popover (hoặc tooltip). Là một cách giải quyết, bạn sẽ muốn kích hoạt popover từ trình bao bọc
$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})
7 hoặc
$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})
8 và ghi đè
$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})
9 trên phần tử bị vô hiệu hóa.

Đối với các kích hoạt popover bị vô hiệu hóa, bạn cũng có thể thích

 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 to toggle popover
0 để popover 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 mong đợi nhấp vào phần tử bị vô hiệu hóa.

 class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
   class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button

Cách sử dụng

Bật PopoVers qua JavaScript:

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

Tùy chọn

Các tùy chọn có thể được truyền 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 nối tên tùy chọn vào

 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 to toggle popover
1, như trong
 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 to toggle popover
2.

TênLoại hìnhMặc địnhSự mô tả
hoạt hìnhBooleanthậtÁp dụng quá trình chuyển đổi Fade CSS cho popover
thùng đựng hàngChuỗi | yếu tố | saisai

Bổ số popover vào một yếu tố cụ thể. Ví dụ:

$(function () {
  $('[data-toggle="popover"]').popover()
})
4. Tùy chọn này đặc biệt hữu ích ở chỗ nó cho phép bạn định vị popover trong luồng của tài liệu gần phần tử kích hoạt -& nbsp; sẽ ngăn chặn popover trôi đi khỏi phần tử kích hoạt trong quá trình thay đổi kích thước cửa sổ.

Nội dungChuỗi | yếu tố | hàm số'

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

 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 to toggle popover
4 không có mặt.

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

 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 to toggle popover
5 của nó được đặt thành phần tử mà popover được đính kèm.

sự chậm trễSố | sự vật0

Trì hoãn hiển thị và che giấu popover (MS) - không áp dụng cho loại 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 thị

Cấu trúc đối tượng là:

 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 to toggle popover
6

HTMLBooleansaiBổ số popover vào một yếu tố cụ thể. Ví dụ:
$(function () {
  $('[data-toggle="popover"]').popover()
})
4. Tùy chọn này đặc biệt hữu ích ở chỗ nó cho phép bạn định vị popover trong luồng của tài liệu gần phần tử kích hoạt -& nbsp; sẽ ngăn chặn popover trôi đi khỏi phần tử kích hoạt trong quá trình thay đổi kích thước cửa sổ.
Nội dungChuỗi | yếu tố | hàm số'

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

 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 to toggle popover
4 không có mặt.
When
 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 to toggle popover
8 is specified, it will dynamically reorient the popover.

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

 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 to toggle popover
5 của nó được đặt thành phần tử mà popover được đính kèm.

sự chậm trễSố | sự vậtsaiBổ số popover vào một yếu tố cụ thể. Ví dụ:
$(function () {
  $('[data-toggle="popover"]').popover()
})
4. Tùy chọn này đặc biệt hữu ích ở chỗ nó cho phép bạn định vị popover trong luồng của tài liệu gần phần tử kích hoạt -& nbsp; sẽ ngăn chặn popover trôi đi khỏi phần tử kích hoạt trong quá trình thay đổi kích thước cửa sổ.
Nội dungChuỗi | yếu tố | hàm số'

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

 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 to toggle popover
4 không có mặt.

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

 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 to toggle popover
5 của nó được đặt thành phần tử mà popover được đính kèm.

sự chậm trễ

Số | sự vật

Trì hoãn hiển thị và che giấu popover (MS) - không áp dụng cho loại 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 thịChuỗi | yếu tố | hàm số'

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

 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 to toggle popover
4 không có mặt.

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

 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 to toggle popover
5 của nó được đặt thành phần tử mà popover được đính kèm.

sự chậm trễChuỗi | yếu tố | hàm số'Giá trị nội dung mặc định nếu thuộc tính
 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 to toggle popover
4 không có mặt.
Nếu một hàm được đưa ra, nó sẽ được gọi với tham chiếu
 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 to toggle popover
5 của nó được đặt thành phần tử mà popover được đính kèm.
sự chậm trễ0 Số | sự vật
Trì hoãn hiển thị và che giấu popover (MS) - không áp dụng cho loại kích hoạt thủ côngNếu một số được cung cấp, độ trễ được áp dụng cho cả ẩn/hiển thịCấu trúc đối tượng là:
 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 to toggle popover
6
HTML
Chèn HTML vào popover. Nếu sai, phương thức
 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 to toggle popover
7 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íChuỗi | hàm số'bên phải'

Cách định vị popover - Tự động | Top | Đáy | trái | Phải. Khi
 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 to toggle popover
8 được chỉ định, nó sẽ tự động tái định hướng popover.

Khi một hàm được sử dụng để xác định vị trí, nó được gọi với nút DOM popover là đối số đầu tiên của nó và nút DOM phần tử kích hoạt là thứ hai. Bối cảnh

 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 to toggle popover
5 được đặt thành phiên bản popover.

bộ chọn

Chuỗi | sai

Nếu một bộ chọn được cung cấp, các đối tượng popover sẽ được giao cho các mục tiêu được 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 popover. Xem điều này và một ví dụ thông tin.asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

mẫu

 tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover
2

sợi dây

 tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover
3

 type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top


 type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right


 type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom


 type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
0Returns to the caller before the popover has actually been shown (i.e. before the
 tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover
4 event occurs). This is considered a “manual” triggering of the popover. Popovers whose both title and content are zero-length are never displayed.

$("#some-container .bootstrap-switch-container *").click(function() {
    // ...
});
0

 tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover
5

Cơ sở HTML để sử dụng khi tạo popover.Returns to the caller before the popover has actually been hidden (i.e. before the

 tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover
6 event occurs). This is considered a “manual” triggering of the popover.

$("#some-container .bootstrap-switch-container *").click(function() {
    // ...
});
1

 tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover
7

Popover của

$(function () {
  $('[data-toggle="popover"]').popover()
})
2 sẽ được đưa vào
 type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top


 type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right


 type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom


 type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
2.Returns to the caller before the popover has actually been shown or hidden (i.e. before the
 tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover
4 or
 tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover
6 event occurs). This is considered a “manual” triggering of the popover.

$("#some-container .bootstrap-switch-container *").click(function() {
    // ...
});
2

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

Popover của

$(function () {
  $('[data-toggle="popover"]').popover()
})
3 sẽ được đưa vào
 type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top


 type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right


 type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom


 type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
4.

$("#some-container .bootstrap-switch-container *").click(function() {
    // ...
});
3

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

Cung cấp cho một yếu tố popover khả năng được hiển thị.PopoVers được bật theo mặc định.Popovers are enabled by default.

$("#some-container .bootstrap-switch-container *").click(function() {
    // ...
});
4

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

Loại bỏ khả năng cho một phần tử popover được hiển thị.Popover sẽ chỉ có thể được hiển thị nếu nó được kích hoạt lại.

$("#some-container .bootstrap-switch-container *").click(function() {
    // ...
});
5

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

Tăng khả năng cho một phần tử popover được hiển thị hoặc ẩn.

$("#some-container .bootstrap-switch-container *").click(function() {
    // ...
});
6

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

Cập nhật vị trí của một yếu tố popover.

$("#some-container .bootstrap-switch-container *").click(function() {
    // ...
});
7

Sự kiện

Loại sự kiệnSự mô tả
show.bs.popoverSự kiện này bắn ngay lập tức khi phương thức thể hiện
$('.popover-dismiss').popover({
  trigger: 'focus'
})
6 được gọi.
hiển thị.bs.popoverSự kiện này được bắn khi popover đã được người dùng hiển thị (sẽ chờ hoàn thành chuyển đổi CSS).
ẩn.bs.popoverSự kiện này được bắn ngay lập tức khi phương thức thể hiện
$('.popover-dismiss').popover({
  trigger: 'focus'
})
7 đã được gọi.
ẩn.bs.popoverSự kiện này được bắn khi popover đã hoàn thành việc bị ẩn khỏi người dùng (sẽ chờ hoàn thành chuyển đổi CSS).
chèn.bs.popoverSự kiện này được bắn sau sự kiện
$('.popover-dismiss').popover({
  trigger: 'focus'
})
8 khi mẫu popover đã được thêm vào DOM.
$("#some-container .bootstrap-switch-container *").click(function() {
    // ...
});
8