javascript - 在 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 中的图标的代码