如何在JQuery Ui中设置已添加按钮的样式

How do I style a added button in JQuery-Ui

本文关键字：添加 按钮 样式 设置 JQuery Ui      更新时间：2023-09-26

下面是我的JQuery UI对话框dlgPassage。

这是我的使用方法。正如你所看到的，我添加了一个确认按钮。

现在回答我的问题。

  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>

您可以使用create: function()更新按钮样式，比如

演示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() } } 
});

1.您可以为按钮指定一个类：

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

2.查看dialog文档，特别是dialogClass选项。

更新

例如：http://jsfiddle.net/tzRHG/2/

相关文章：