[英]How do I style a added button in JQuery-Ui
Below is my JQuery-UI dialog called dlgPassage. 下面是我的名为dlgPassage的JQuery-UI对话框。
Here is how I use it. 这是我的用法。 As you can see I have added a Confirm button. 如您所见,我添加了“确认”按钮。
Now to my questions. 现在我的问题。
How do I style this Confirm button. 如何设置“确认”按钮的样式。
How do I style the area where the Confirm button in located. 如何设置“确认”按钮所在的区域的样式。
$("#dlgPassage").dialog({
width: 490,
buttons: { "Confirm": function () { Click_btnConfirm() } }
});
<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> </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> </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> </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> </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> </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>
1.You can specify a class for your button: 1.您可以为按钮指定一个类:
buttons: {
Confirm: {
text: "Confirm"
class: "confirm-button-style",
click: function () { Click_btnConfirm() }
}
}
2.Take a look at dialog
documentation, in particular at dialogClass
option. 2.查看dialog
文档,尤其是dialogClass
选项。
UPDATE UPDATE
An example: http://jsfiddle.net/tzRHG/2/ 例如: http : //jsfiddle.net/tzRHG/2/
You can update button style using create: function()
, like that, 您可以使用create: function()
来更新按钮样式,像这样,
DEMO http://jsfiddle.net/yeyene/RCHA7/ 演示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() } }
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.