Classi di pulsanti non aggiunti nell'interfaccia utente jQuery Dialog Bootstrap

Question

Ho aggiunto il tema Bootstrap UI alla mia applicazione e la maggior parte sembra funzionare molto bene, ma non riesco a ottenere i miei pulsanti di dialogo dell'interfaccia utente per il rendering correttamente come la demo . Sembra che l'interfaccia utente di jQuery non stia aggiungendo le classi ai pulsanti in modo che i pulsanti siano stilizzati.

Utilizzando Chrome sviluppatore i pulsanti dovrebbero rendere come:

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

Ma quando creo la mia finestra:

dialogo pulsanti

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

l'interfaccia utente di rendering come così:

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

No le classi vengono aggiunte e non riesco a trovare nulla che mi dica SE ho bisogno di eseguire altri metodi o cosa affare è.

Grazie.

-V

Edit: scusate ho dimenticato di fare riferimento alle versioni che sto usando:

Bootstrap: 2.2.2 jQuery: 1.8.3 jQuery UI: 1.9.2

Answer 1

Ok ho risolto questo io stesso.

Era semplicemente l'ordine dei miei file javascript.

Assicurarsi di caricare bootstrap.js prima di caricare jquery.ui

Una volta che ho fatto questo tutte le classi dei pulsanti applicati in modo nativo da ui apparso correttamente.

Grazie a tutti per aver contribuito.

-V

Answer 2

Potrebbe essere necessario aggiungerlo al file js/html $ ('button'). Button(); in modo che ogni pulsante debba essere riprodotto in base al tema.

Answer 3

Questo perché i conflitti di funzione di bootstrap pulsante() con la funzione di jQuery UI tasto(). Vedere questo bug per maggiori informazioni: https://github.com/twitter/bootstrap/issues/6094

Se si desidera caricare bootstrap.js dopo jQueryUI, è possibile utilizzare questa funzione per spostare di bootstrap tasto() fuori strada:

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

In alternativa, si può usa le modal di bootstrap invece dei dialoghi di jqueryui.