文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery UI:对话框按钮样式

问jQuery UI:对话框按钮样式
EN

Stack Overflow用户

提问于 2010-03-18 18:13:01

回答 4查看 22.4K关注 0票数 12

有没有一种简单的方法可以将CSS/图标应用于jQuery UI模式对话框中的模式按钮？

如果我包含HTML以显示带有按钮文本的图标，它会将HTML显示为文本，而不是呈现代码。

我猜我可以写一些jQuery来找到按钮，并用我想要的东西覆盖它，但我希望有一种更简单、更直接的方法。

html

css

jquery-ui

jquery

回答 4

Stack Overflow用户

回答已采纳

发布于 2013-09-12 16:43:57

我可以看到它的老问题，但你现在可以在jQuery UI中以更好的方式做到这一点，只需向按钮对象添加'class‘或'style’属性，如下所示：

$("#id-dialog").dialog({
    modal: true,
    buttons: [
        { text: "Save", click: function () { alert("save"); }, class:"sampleClass1", style:"color:Red" },
        { text: "Cancel", click: function () { alert("close"); ;}, class:"sampleClass2"}
    ]
});

票数 17

Stack Overflow用户

发布于 2010-04-04 06:18:00

这是我现在在我们的项目中使用的：

$("#id-dialog").dialog({
        modal: true,
        buttons: {
            'Login': logIn,
            Cancel: logOut
        },
        open: function() {
            $buttonPane = $(this).next();
            $buttonPane.find('button:first').addClass('accept').addClass('ui-priority-primary');
            $buttonPane.find('button:last').addClass('cancel').addClass('ui-priority-secondary');                        
        }
    });

第一个和最后一个在这种情况下工作，因为只有两个按钮。如果您有两个以上的按钮，则可以使用:nth-child(索引)。

另一种方法是引用包含对话框div元素和按钮窗格div元素的父元素，然后在父元素中查找各个按钮。

票数 12

Stack Overflow用户

发布于 2010-05-22 05:01:52

这个线程- jQuery UI confirmation dialog - manipulating output -似乎提供了一个更干净的选项，它的执行速度应该比find快。

$('.ui-dialog-buttonpane').children('button')[1]

起初，我试图使用它，但在注意到它不会返回jquery DOM对象后，我让它工作了；它返回html，所以您需要将它放在jquery操作符中才能使用它。例如：

var button1 = $('.ui-dialog-buttonpane').children('button')[1];
$(button1).removeClass('ui-button-text-only').addClass('ui-button-text-icon');

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/2468928

复制

相似问题

问jQuery UI:对话框按钮样式
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery UI:对话框按钮样式EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery UI:对话框按钮样式
EN