如何在JQuery-UI中添加一個按鈕樣式

Question

下面是我的名爲dlgPassage的JQuery-UI對話框。

以下是我如何使用它。正如你所看到的，我已經添加了一個確認按鈕。

現在我的問題。

1. 如何設置此確認按鈕的樣式。

2. 如何設置確認按鈕所在的區域的樣式。

JS

$("#dlgPassage").dialog({ 
     width: 490, 
     buttons: { "Confirm": function() { Click_btnConfirm() } } 
    }); 

HTML

<div id="dlgPassage" title="Passage" style="display:none"> 
     <table> 
      <tr><td>Opening</td></tr> 
      <tr> 
     <td> 
      <input type="text" id="openStart" size="19"/> 
      <img src="images/cal.gif" alt="" 
       onclick="javascript:NewCssCal('openStart','yyyyMMdd','arrow',true,'24')" 
       style="cursor:pointer"/> 
     </td> 

     <td>&nbsp;</td> 

     <td> 
      <input type="text" id="openEnd" size="19"/> 
      <img src="images/cal.gif" alt="" 
       onclick="javascript:NewCssCal('openEnd','yyyyMMdd','arrow',true,'24')" 
       style="cursor:pointer"/> 
     </td> 
     </tr> 
     <tr><td>&nbsp;</td></tr> 
     <tr><td>Passage</td></tr> 
     <tr> 
     <td> 
      <input type="text" id="passageStart" size="19"/> 
      <img src="images/cal.gif" alt="" 

      onclick="javascript:NewCssCal('passageStart','yyyyMMdd','arrow',true,'24')" 
      style="cursor:pointer"/> 
     </td> 
     <td>&nbsp</td> 
     <td> 
      <input type="text" id="passageEnd" size="19"/> 
      <img src="images/cal.gif" alt="" 
      onclick="javascript:NewCssCal('passageEnd','yyyyMMdd','arrow',true,'24')" 
      style="cursor:pointer"/> 
     </td> 
     </tr> 

     <tr><td>&nbsp;</td></tr> 
     <tr><td>Closing</td></tr> 
     <tr> 
     <td> 
      <input type="text" id="closeStart" size="19"/> 
      <img src="images/cal.gif" alt="" 
      onclick="javascript:NewCssCal('closeStart','yyyyMMdd','arrow',true,'24')" 
      style="cursor:pointer"/> 
     </td> 
     <td>&nbsp</td> 
     <td> 
      <input type="text" id="closeEnd" size="19"/> 
      <img src="images/cal.gif" alt="" 
      onclick="javascript:NewCssCal('closeEnd','yyyyMMdd','arrow',true,'24')" 
      style="cursor:pointer"/> 
     </td>   
     </tr> 
    </table> 
</div> 

Answer 1

1.You可以指定你的按鈕類：

buttons: { 
    Confirm: { 
     text: "Confirm" 
     class: "confirm-button-style", 
     click: function() { Click_btnConfirm() } 
    } 
} 

2.Take看看dialog文檔，特別是在dialogClass選項。

---

UPDATE

一個例子：http://jsfiddle.net/tzRHG/2/

Answer 2

可以使用create: function()按鈕樣式，這樣的更新，

DEMO http://jsfiddle.net/yeyene/RCHA7/

$("#dlgPassage").dialog({ 
    create: function (event, ui) { 
     $('.ui-button').css({ 
      'border':'1px solid #000', 
      'background':'#f00', 
      'font-weight':'normal', 
      'color':'#fff' 
     });      
    }, 
    width: 490, 
    buttons: { "Confirm": function() { Click_btnConfirm() } } 
});