Question

我一直试图将jQuery UI对话框设置好几个小时，然后围绕圈子进行。通过手动向对话框添加按钮，我可以获得所需的外观。有关工作示例，请参阅以下链接。 This Works

现在，我希望以正确的方式执行此操作，并根据jQuery UI手册添加按钮。大约有十亿个类自动添加到按钮中，因此我删除了这些工厂类，然后添加了几个自定义类。

$(this).dialog("widget").find('button').removeClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only').parent().removeAttr('class').parent().removeAttr('class');
...
buttons     : [
{text:'YES, DELETE IT',class:'newButton red',click: function() {alert("Delete Record");$(this).dialog("close");}},
{text:'CANCEL',class:'newButton gray',click: function() {$(this).dialog("close");}}
]

请参阅以下链接，了解我的失败尝试This doesn't quite work

首先，按钮不显示彩色图像。然后我单击对话框上的任意位置，图像出现在按钮上。如果关闭对话框然后打开，对话框会变高。最重要的是，按钮被挤压在一起，但我可能会想到这一点。

请帮助我找到错误的方法！

Answer 1

这里发生了什么：

在页面加载时，您的红色按钮的类别为ui-state-focus。当您单击页面上的任何位置时，该按钮将丢失该类，因此显示红色背景图像。我注意到的另一件事是该按钮继承了以下内容：

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: Verdana,Arial,sans-serif;
  font-size: 1em;
}

这可以解释为什么文本要大得多。我还注意到你的按钮不会从你的第一次测试中继承这个CSS：

#dialog-deleteListRecord button {
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
  padding: 3px 8px;
  color: white;
  font-size: 12px;
  font-weight: bolder;
  font-family: Arial, Helvetica, sans-serif;
}

我希望这能为您提供解决问题的方向。

样式化jQuery UI对话框按钮

1 个答案: