2010-11-08 19 views
5

Io uso il il seguente codice per mostrare una finestra di dialogo con jQuery UI:jQueryUI Dialog - stile non ha generato per i pulsanti

var $dialog = $('<div></div>') 
.text(msg) 
.dialog({ 
    autoOpen: false, 
    height: 140, 
    modal: true, 
    title: "Confirm", 
    buttons: { 
     "Yes": function() { 
      $(this).dialog('close'); 
     }, 
     "Cancel": function() { 
      $(this).dialog('close'); 
     } 
    } 
}); 
$dialog.dialog('open'); 

Tuttavia, i pulsanti non hanno stili. Ho notato che il codice HTML generato per i tasti sono:

<div class="ui-dialog-buttonset"> 
    <button>Yes</button> 
    <button>Cancel</button> 
</div> 

Dalle demo jQuery UI che è:

<div class="ui-dialog-buttonset"> 
    <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> 
    <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">Cancel</span></button> 
</div> 

vale a dire mancano gli stili CSS. Sai perché?

+0

Avere inserito jQuery UI foglio di stile? di solito è qualcosa come jquery.ui.all.css. – subosito

+0

@alifity sì, è lo script Button JS che mi è sfuggito :) – xhh

risposta

0

Forse perché mancano i file CSS? Li includi effettivamente? Quindi utilizzare Firebug o HttpFox per vedere se c'è un 404 da qualche parte ...

Edit: includo un css jQuery-ui come questo: <link type="text/css" href="blah/css/smoothness/jquery-ui-1.8.custom.css" rel="stylesheet" />

+2

In aggiunta a questo suggerirei di assicurarmi che anche il tuo jquery-ui.js abbia gli script dei pulsanti: http://ajax.googleapis.com/ajax /libs/jqueryui/1.8.5/jquery-ui.min.js ha tutti gli elementi dell'interfaccia utente. – WSkid

+0

@WSkid hai ragione! Molte grazie! Immagino sia perché non ho selezionato il widget "Button" quando ho scaricato il jS personalizzato di jQuery UI. Quando si utilizza l'interfaccia utente jQuery JS da Google Ajax, come hai detto, funziona. – xhh

Problemi correlati