在 jquery ui 对话框中使用字体很棒的图标

Question

$('.toggle').click(function () {
    $('.d').dialog();
    $('.ui-dialog-titlebar-close').addClass('icon-remove');
});

使用上面的代码我必须写$('.ui-dialog-titlebar-close').addClass('icon-remove'); 对于每个对话框。 我还可以使用 onload 事件将类添加到动态创建的元素。 但是有没有更好的解决方案？ 任何仅使用 css 或 scss 的解决方案？

Answer 1

var $dialog = $('#dialogScreen').dialog({
        open: function(event, ui) {
            // remove default close icon
            $('.ui-dialog-titlebar-close span').removeClass('ui-icon ui-icon-thickclose');

            // Yuck they have close text let's remove that
            $('.ui-dialog-titlebar-close span').text('');

            // Lets add font awesome close icon
            $('.ui-dialog-titlebar-close span').addClass('fa fa-times');

            // ok lets remove the default underline for a hyperlink
            $('.ui-dialog-titlebar-close').css('text-decoration','none');

            // ok lets make the titlebar bigger so we can increase icon size
            $('.ui-dialog-titlebar').height('2em');

            // ok lets increase .ui-dialog-titlebar-close to handle bigger icon and re-center
            $('.ui-dialog-titlebar-close').height('2em').width('2em').css('top','15px');

            // now lets increase the font-awesome icon and re-center
            $('.ui-dialog-titlebar-close span').addClass('fa-2x').css('padding-left','3px');

            // I also like to load the screen here too
            $('#dialogScreen').load('pages/options.html',function(){
                $(this).trigger('create');
            });
    }
});

这是我用来覆盖 ui-dialog-titlebar-close 中的图标的代码

Answer 2

这里如何仅使用 css 用 font-awesome 替换 Jquery UI 的对话框关闭图标：

.ui-dialog .ui-dialog-titlebar-close { /* remove default close jUi */
background:none;
border:0;
}
.ui-dialog-titlebar-close { 
position:relative;
float:right;
}
.ui-dialog-titlebar-close:after {
position: absolute;
font-family: FontAwesome;
font-size: 1.0em;
top:0;
right:2px;
content: "\f00d "; 
}

使用您想要的图标更改content

更新

更好的版本：

.ui-dialog-titlebar-close { 
position:relative; 
background:0;
border:0;
float:right;
z-index:1;
} 

.ui-dialog-titlebar-close:after {
position:relative;
top:5px;
font-family: FontAwesome;
font-size: 1.0em;
content: "\f28b"; /*Code FA */
z-index:2;
}

你可以在这里找到 Font Awesome“代码”： https : //fortawesome.github.io/Font-Awesome/cheatsheet/

小提琴： https : //jsfiddle.net/x0154xdm/1/

Answer 3

另一种方法是使用closeText的 ui-dialog 选项。 您可以将 FontAwesome <i>标签直接放入此选项中，如下所示：

$( "#dialog" ).dialog({
    closeText:'<i class=\"fa fa-times-circle\"></i>'
});

但是，如果您不想在每次创建对话框时都重新设置此选项，请考虑覆盖默认的 jQuery UI 选项。

$.extend($.ui.dialog.prototype.options, {
    closeText:'<i class=\"fa fa-times-circle\"></i>',
});

要考虑的另一件事是，如果您使用默认主题，则需要执行一些 CSS 样式来隐藏各种默认按钮元素。

---

我已经将这些全部编译成一个示例代码： http ://codepen.io/anon/pen/aNWrYN

Answer 4

经过数小时的尝试使其正常工作，这最终对我有用，用于替换 Font Awesome 字符的关闭按钮图标：

$("#dialog").dialog();
$("#dialog").closest(".ui-dialog")
            .find(".ui-dialog-titlebar-close")
            .empty()
            .append("<span class='fa fa-times'></span>");

我成功的关键是包含一个 css 规则来删除按钮内的文本缩进：

.ui-dialog-titlebar-close {
  text-indent: 0;
}

Answer 5

使用 fontawesome 5，这可以通过以下方式实现：

.ui-icon-closethick {
  text-indent: 0;
}

.ui-icon-closethick::after {
  text-indent: 0;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f00d";
}

请参阅： https : //fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements