当前位置: 首页 > 面试题库 >

将CSS应用于jQuery对话框按钮

储俊英
2023-03-14
问题内容

所以我目前有一个带有两个按钮的jQuery对话框:保存和关闭。我使用以下代码创建对话框:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

但是,使用此代码时,两个按钮的颜色相同。我希望我的“取消”按钮与“保存”使用不同的颜色。有没有办法使用一些内置的jQuery选项来做到这一点?我从文档中没有得到太多帮助。

请注意,我正在创建的“取消”按钮是预定义的类型,但是“保存”是我在定义自己。不知道这是否对这个问题有影响。

任何帮助,将不胜感激。谢谢。

更新: 共识是这里有两条路可走:

  1. 使用Firefox插件(如firebug)检查HTML ,并注意jQuery将jQuery应用于按钮的CSS类,并尝试重写它们。 注意:在我的HTML中,两个按钮都使用了完全相同的CSS类,并且没有唯一的ID,因此没有此选项。
  2. 在打开的对话框上使用jQuery选择器来捕获所需的按钮,然后向其添加CSS类。

我选择了第二个选项,并使用了jQuery find()方法,因为我认为这比使用:first或:first-child b /
c更合适,我想要更改的按钮不一定是列出的第一个按钮标记。使用find,我可以只指定按钮的名称,然后以这种方式添加CSS。我最终得到的代码如下:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
        open: function() {
            $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButtonClass');
        }
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

问题答案:

我将我对类似问题的答案重新发布,因为似乎没有人在这里给出答案,而且它更加干净整洁:

使用替代buttons属性语法:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: [
        {
            text: "Cancel",
            "class": 'cancelButtonClass',
            click: function() {
                // Cancel code here
            }
        },
        {
            text: "Save",
            "class": 'saveButtonClass',
            click: function() {
                // Save code here
            }
        }
    ],
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});


 类似资料:
  • 问题内容: 我正在寻找一种样式对话框(使用UI对话框),该样式对话框具有与传统对话框不同的独特CSS,因此从本质上讲,它具有两个外观各异的jQuery对话框。 例如,我已经设置了样式 还有一个 不幸的是,我注意到使用单独的CSS来设置对话框各部分的样式,例如 不起作用,因为没有该类,并且我也不能不插入插件而这样做。 另一种选择是使一个元素具有唯一的类/ id(取决于我想要的类/ id),但是这将阻

  • 当用户单击返回按钮时,我正在尝试退出应用程序,让它在单击是按钮时显示对话框是/否按钮,让它退出应用程序,包括注册活动,假设您在主活动上。 这是我的代码,但它不工作 单击主活动上的“后退”按钮时 如何从主活动退出应用程序,包括在是按钮单击对话框上的注册活动

  • 我有一个JFrame调用一个新的JDialog,这个JDialog有一个关闭它的按钮。 当JDialog关闭时,JFrame应该重新绘制。但是当我用按钮关闭JDialog时,什么也不会发生,当我用经典的“X”按钮关闭时,就不会发生这种情况。 这是来自JFrame的windowListener: 这里是JDialog中关闭JDialog的按钮的代码: 就像我说的,监听器中的JFrame需要在JDia

  • 问题内容: 我在网页上使用。我为按钮和其他控件使用了不同的CSS类。但是由于上述标记,我无法添加任何类,样式来浏览按钮。 有什么方法可以更改其默认外观? 谢谢是提前。 问题答案: 你不能那样做。您只能将样式应用于整个样式。 您可以使用CSS hacks将其替换为您喜欢的image和image:hover。 请记住,该属性在Firefox 3.6上不起作用;您可以改用增加高度。

  • 我正在建立一个div,它是网站主页的一部分。此div显示项目列表。所有项目都保存在MySQL数据库中。我想做的是在每一行旁边创建一个按钮,上面写着“删除”。单击delete之后,应该会出现一个jQueryUI对话框提示用户进行确认。当确认删除项目时,必须将项目id发送到删除页面(我们称之为delete.php)。 到目前为止我做了什么 从MySQL获取项目列表,并将每个项目显示为一行 在每行末尾添

  • 我有一个标题中描述的问题。 问题的小说明如下:我有一个按钮,用来打开对话框。然后,在该对话框中,有一个按钮,可以在第一个对话框的顶部打开另一个对话框。单击第二个按钮后,我希望调用控制器中的方法,但什么也没发生。h:outputText中的值被正确读取,所以我猜这不是连接控制器的问题- 我用的是: Spring web 3.1.2.发布 JSF 2.2.10 Primeface 5.1 代码: 豆。