jQuery UI 부트 스트랩 대화 상자에 단추 클래스가 추가되지 않았습니다.

Question

응용 프로그램에 UI 부트 스트랩 테마를 추가했는데 대부분 잘 작동하는 것처럼 보입니다. 그러나 UI 대화 상자 단추가 데모처럼 올바르게 렌더링되지 않습니다. . jQuery UI는 클래스에 단추를 추가하지 않아 단추가 스타일이 지정되는 것 같습니다.

버튼이 같은 렌더링해야 크롬 개발자를 사용 :

<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> 

을하지만 내 대화 상자를 만들 때 :

$('#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"); 
     } 
    } 
}); 

UI를 대화 버튼으로 너무 렌더링 :

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

없음 클래스가 추가되고 다른 메소드를 실행해야하는 경우 또는 그 거래가있다.

감사합니다.

-V

편집 : 내가 사용 버전을 참조하는 것을 잊었다 유감 :

부트 스트랩 : 2.2.2 jQuery를 : 1.8.3 jQuery를 UI : 1.9.2

Answer 1

좋아 내가 직접 해결했다.

단순히 자바 스크립트 파일의 순서입니다. 내가 UI에서 기본적으로 적용이 모든 버튼 클래스를했다 올바르게 나타나 후에는

을 jquery.ui로드하기 전에

는 bootstrap.js를로드해야합니다.

모두에게 감사드립니다.

-V

Answer 2

이 파일을 js/html 파일에 추가해야 할 수도 있습니다. $ ('button'). button(); 을 클릭하면 모든 단추가 테마에 따라 렌더링됩니다.

Answer 3

이 때문에 JQUERY UI의 버튼() 함수와 스트랩의 버튼() 함수 충돌. 자세한 내용은이 버그를 참조하십시오 : https://github.com/twitter/bootstrap/issues/6094

당신이 길에서 부트 스트랩의 버튼() 함수를 이동하는로드 bootstrap.js jqueryui 후, 당신이 사용할 수있는하려면 :

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

을 양자 택일로, 당신은 할 수 있습니다 jqueryui 대화 상자 대신 부트 스트랩 모달을 사용하십시오.