Các công cụ jQueryUI đang cạnh tranh với Twitter Bootstrap

Tôi đã có thể nhận được một số mẹo công cụ để làm việc cuối cùng với mã sau đây:

<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>

và sau đó

<script>
    $('[rel=tooltip]').tooltip();
</script>

Vấn đề tôi gặp phải là nó đang sử dụng các tooltips jQueryUI (không có mũi tên, các tooltips xấu xí lớn) thay vì Bootstraps.

Tôi cần làm gì để sử dụng Bootstrap Tooltips thay vì jQueryUI?

Cả jQuery UI và Bootstrap đều sử dụng tooltipcho tên của plugin. Sử dụng $.widget.bridgeđể tạo một tên khác cho phiên bản UI UI và cho phép plugin Bootstrap giữ nguyên tên tooltip (cố gắng sử dụng noConflicttùy chọn trên tiện ích Bootstrap chỉ dẫn đến rất nhiều lỗi vì nó không hoạt động chính xác; vấn đề này đã được báo cáo ở đây ):

// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);

Vì vậy, mã để làm cho nó hoạt động:

// Import jQuery UI first
<script src="/js/jquery-ui.js"></script>
// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);
// Then import bootstrap
<script src="js/bootstrap.js"></script>

Mã sao chép đẹp cũng xử lý xung đột nút:

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>
/*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
</script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

Một giải pháp đơn giản là tải bootrap.js sau jquery-ui.js, để phương thức bootstrap .tooltip được ưu tiên.

Điều này làm việc cho tôi:

Nếu bạn cần sử dụng JQuery-UI nhưng bạn muốn sử dụng tooltip của bootstrap, chỉ cần lấy phiên bản JQuery-UI tùy chỉnh từ trang web này .

Chỉ cần bỏ chọn tùy chọn "Tooltip" và tải xuống (nó sẽ giống như "jquery-ui-1.10.4.custom.js").

Chỉ cần thêm nó vào dự án của bạn thay vì phiên bản bạn hiện đang sử dụng và, bạn đã sẵn sàng tham gia tiệc tùng. Điều này sẽ tránh xung đột. Nó làm việc như một cơ duyên với tôi!

Trong trường hợp bạn phải tải jquery-ui.jssau bootstrap.jsđây là cách thực hiện:

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

<script>var _tooltip = jQuery.fn.tooltip;</script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>jQuery.fn.tooltip = _tooltip;</script>

Điều này sẽ ghi đè lên tooltip của jquery-ui và luôn sử dụng bootstraps.

Giả sử rằng UI sẽ được gọi sau khi khởi động bootrap

Lưu trữ chức năng bootstrap ngay trước khi UI được khởi tạo

jQuery.fn.bstooltip = jQuery.fn.tooltip; 

Sau đó gọi nó như sau

$('.targetClass').bstooltip();

Giải pháp này dường như làm việc tốt cho tôi.

// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);

Thay vào đó, chỉ sử dụng popst Bootstrap thì sao? Các popovers BS không tạo ra xung đột tương tự mặc dù chúng yêu cầu cùng một thành phần tooltip.js. Đúng, chúng được cách điệu hơn nhưng không làm cho các nút UI JQuery của tôi trở nên khó khăn.

Tôi chỉ sử dụng Giao diện người dùng Jquery cho tự động hoàn thành / hộp tổ hợp tùy chỉnh (vì vậy không thể yêu cầu các điều khiển JQ-UI khác đều ổn) và không có cách nào ở trên để khắc phục sự cố CSS trên các nút của hộp tổ hợp trở thành "không bị chặn" khi gọi BS Tooltips. Chuyển sang BS Popovers cung cấp về cơ bản cùng một hiệu ứng không có xung đột, không sắp xếp lại nhập khẩu tập lệnh của tôi và không cần câu lệnh cầu nối rõ ràng.

hãy thử sử dụng jQuery.noConflict () và xem điều đó có giúp ích gì cho bạn không. Có vẻ như bootstrap và jQuery đang sử dụng cùng một không gian tên và có lẽ các công cụ bootstrap và jQuery được tải vào cùng một hàm hoặc trước tiên chúng sẽ được tải.

Bạn cũng có thể kiểm tra xem thư viện nào được tải trước. Thông thường nếu bạn khai báo cùng một chức năng hai lần trong javascript thì cái thứ hai là cái được sử dụng.

Thứ ba, kiểm tra gói jQueryUI ( trên trang web của họ) và xem liệu bạn có thể tải xuống phiên bản không có chú giải công cụ đi kèm không (tôi đã kiểm tra và điều này hoàn toàn có thể thực hiện được).

Có một giải pháp dễ dàng và tốt, chỉ cần sắp xếp lại liên kết tệp bootstrap và jquery ui của bạn như thế này:

 <script src="/js/jquery-ui.min.js" type="text/javascript"></script>
 <script src="/js/bootstrap.min.js" type="text/javascript"></script>

Chỉ cần tải jQueryui trước khi tải tập tin js boostrap. Đó là công việc của tôi.

Một cách dễ dàng là tải bootstrap.js sau jquery-ui.js, để bootstrap .tooltip ghi đè lên giao diện người dùng jquery. Nếu bạn đang sử dụng trình tải mô-đun như requestjs, thì bạn có thể đặt bootstrap phụ thuộc vào jquery-ui, như sau:

requirejs.config({
    baseUrl: 'js',
    waitSeconds: 30,
    shim: {
        'bootstrap': {
            deps: [ 'jquery', 'jquery-ui' ]
        },...