Các lớp nút không được thêm vào trong jQuery UI Bootstrap Dialog

Question

Tôi đã thêm chủ đề UI Bootstrap vào ứng dụng của mình và hầu hết nó có vẻ hoạt động rất tốt, nhưng dường như tôi không nhận được các nút thoại UI để hiển thị chính xác như bản trình diễn . Dường như giao diện người dùng jQuery không thêm các lớp vào các nút để các nút sẽ được tạo kiểu.

Sử dụng nhà phát triển Chrome các nút nên làm như sau:

<button type="button" 
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" 
    role="button" 
    aria-disabled="false"> 
     <span class="ui-button-text">Ok</span> 
</button> 

Nhưng khi tôi tạo thoại của tôi:

nút thoại

$('#dialog').dialog({ 
    title: 'My Text', 
    close: function (event, ui) { 
     myfunction(); 
    }, 
    bgiframe: false, 
    width: 860, 
    height: 500, 
    resizable: true, 
    modal: true, 
    buttons: { 
     Cancel: function() { 
     $(this).dialog("close"); 
     } 
    } 
}); 

Các ui làm như vậy:

<button type="button">Cancel</button> 

Không lớp học đang được thêm vào và tôi không thể tìm thấy bất cứ điều gì mà nói với tôi NẾU tôi cần phải thực hiện các phương pháp khác hoặc những gì thỏa thuận là.

Cảm ơn.

-V

Edit: xin lỗi tôi quên để tham khảo các phiên bản tôi đang sử dụng:

Bootstrap: 2.2.2 jQuery: 1.8.3 jQuery UI: 1.9.2

Answer 1

Ok tôi đã tự giải quyết vấn đề này.

Đơn giản chỉ là thứ tự các tệp javascript của tôi.

Hãy chắc chắn để tải bootstrap.js trước khi bạn tải jquery.ui

Một khi tôi đã làm điều này tất cả các lớp nút áp dụng nguyên bản bởi ui xuất hiện một cách chính xác.

Nhờ mọi người đóng góp.

-V

Answer 2

Bạn có thể cần thêm nó vào tệp js/html của bạn $ (nút ')'.(); để mọi nút sẽ được hiển thị theo chủ đề của bạn.

Answer 3

Điều này là do chức năng nút() của bootstrap xung đột với chức năng nút() của Jquery UI. Xem lỗi này để biết thêm thông tin: https://github.com/twitter/bootstrap/issues/6094

Nếu bạn muốn tải bootstrap.js sau jQueryUI, bạn có thể sử dụng chức năng này để di chuyển bootstrap của nút() ra khỏi đường:

var btn = $.fn.button.noConflict(); // reverts $.fn.button to jqueryui btn 
$.fn.btn = btn; // assigns bootstrap button functionality to $.fn.btn 

Ngoài ra, bạn có thể sử dụng các phương thức khởi động thay vì các hộp thoại jqueryui.