2010-11-08 12 views
5

ich den folgenden Code verwenden, um einen Dialog mit jQuery UI zeigen:jQueryUI Dialog - Stil nicht für Tasten erzeugt

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'); 

jedoch die Tasten keine Stile haben. Ich stelle fest, dass der HTML-Code für die Schaltflächen erzeugt werden:

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

Aus den jQuery UI Demos ist:

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

D.h. Die CSS-Stile fehlen. Wissen Sie warum?

+0

Haben Sie jquery ui Sheet eingefügt? es ist normalerweise so etwas wie jquery.ui.all.css. – subosito

+0

@alifity ja, es ist das Button JS-Skript, das ich vermisste :) – xhh

Antwort

0

Vielleicht, weil die CSS-Dateien fehlen? Nehmen Sie sie tatsächlich auf? Dann nutzen Sie Firebug oder HttpFox zu sehen, ob es irgendwo eine 404 ist ...

Edit: Ich schließe ein jQuery-ui CSS wie folgt aus: <link type="text/css" href="blah/css/smoothness/jquery-ui-1.8.custom.css" rel="stylesheet" />

+2

Zusätzlich würde ich vorschlagen, sicherzustellen, dass Ihre jquery-ui.js auch die Button-Skripte hat: http://ajax.googleapis.com/ajax /libs/jqueryui/1.8.5/jquery-ui.min.js hat alle UI-Elemente. – WSkid

+0

@WSkid du hast recht! Danke vielmals! Ich schätze, weil ich das Widget "Button" nicht ausgewählt habe, als ich die jQuery UI-JS heruntergeladen habe. Wenn Sie die jQuery UI JS von Google Ajax lib verwenden, funktioniert das. – xhh

Verwandte Themen