jQuery 对话框按钮 - 保持应用样式答案

【问题标题】：jQuery Dialog Button - Keep Applied StylejQuery 对话框按钮 - 保持应用样式
【发布时间】：2013-03-16 00:26:14
【问题描述】：

我有一个 jQuery 对话框，希望将其中一个按钮设置为外观和行为类似于默认按钮，同时仍然能够将注意力集中在表单元素上。我能够使用下面的代码成功地做到这一点，但我遇到的问题是当点击默认按钮时（而不是在点击输入时），我应用的样式被删除。单击按钮后，我尝试重新添加样式，但没有用。有什么想法吗？

open: function ()
{
    $('#FieldName').focus();
    $(this).parent().find('button:nth-child(1)').addClass('ui-state-focus');

    $(this).keydown(function (event)
    {
        if (event.keyCode == 13)
        {
            $(this).parent().find('button:nth-child(1)').trigger('click');
        }
    });
}

更新：这是一个小提琴：http://jsfiddle.net/98v6Q/2/

要在使用 fiddle 代码时查看问题，请运行 fiddle，然后单击对话框或表单中的任意位置。您会注意到按钮的默认状态仍然存在。单击“创建帐户”按钮，然后单击表单内部或外部的任意位置，您会注意到按钮状态发生了变化，但它不应该发生变化。

【问题讨论】：

这将有助于查看相关的 HTML，可能还有问题的 jsfiddle。
我更新了我的问题并包含了一个小提琴。
您到底想完成什么？你想让它看起来总是专注吗？在单击“创建帐户”按钮然后失去焦点后，我没有看到它看起来有任何不同。如果将鼠标悬停在 Cancel 按钮上，它仍然具有较深的蓝色背景色。
@RubenInfante - 在我上面的更新说明中，我说过您需要在对话框中单击关闭对话框才能看到焦点变化。我无法包含我在小提琴中使用的 jQuery 验证代码。一旦验证发生，对话框会自动将焦点切换到第一个无效字段，这会导致按钮恢复到未获得焦点的状态。

标签： jquery button dialog default

【解决方案1】：

你最好应用自己的 css。

您应该添加一个在您的 CSS 中声明的类，而不是 .addClass('ui-state-focus');。

IE：

.addClass('ui-button-primary');

然后在css中

.ui-button-primary{
    //Your style here
}

【讨论】：

我想过，但我希望能够切换 jQuery 主题，而不必为每个附加主题编写新的焦点外观。
加粗还是通用的？
我实际上尝试将一个新类插入到我创建的小提琴中，但无法获得任何类型的样式来覆盖按钮。不完全确定为什么。
您应该在调试器中查看应用于您的按钮的样式，然后旨在改变它们。进行更改时，请保留我的 CSS 特异性、!important 标签和内联 CSS。您还应该检查 jquery UI 是否包含主按钮类
有时很容易忘记基础知识。您的解决方案有效，但是，我真的希望我可以使用 jQuery UI 默认值，而不必添加我自己的样式。感谢您的帮助。