Как использовать jQuery UI Highlight и Error widgets?

jQuery UI имеет несколько удобных стилей CSS для оповещения и выделения. Я вижу это на сайте themeroller - посмотрите на правую сторону. Есть ли интерфейс Javascript для этих стилей? Используем ли мы жесткий код CSS? Где это документировано?

Есть ли список методов, чит-код или что-то иное, чем интерактивные документы в jQuery UI?

Ответ 1

Примените соответствующие классы CSS для желаемой подсказки взаимодействия на странице UI/Theming/API: .ui-state-highlight для подсветки и .ui-state-error для ошибки. Вы можете сделать это статически или использовать .addClass('ui-state-highlight') или .addClass('ui-state-error'), чтобы сделать это динамически.

Ответ 2

Я адаптировал короткую функцию jQuery для преобразования заданного набора div (содержащего текст) в элементы error/highlight.

Вы можете увидеть его в действии этот jsFiddle.

Вот javascript:

//function to create error and alert dialogs
function errorHighlight(e, type, icon) {
    if (!icon) {
        if (type === 'highlight') {
            icon = 'ui-icon-info';
        } else {
            icon = 'ui-icon-alert';
        }
    }
    return e.each(function() {
        $(this).addClass('ui-widget');
        var alertHtml = '<div class="ui-state-' + type + ' ui-corner-all" style="padding:0 .7em;">';
        alertHtml += '<p>';
        alertHtml += '<span class="ui-icon ' + icon + '" style="float:left;margin-right: .3em;"></span>';
        alertHtml += $(this).text();
        alertHtml += '</p>';
        alertHtml += '</div>';

        $(this).html(alertHtml);
    });
}

//error dialog
(function($) {
    $.fn.error = function() {
        errorHighlight(this, 'error');
    };
})(jQuery);

//highlight (alert) dialog
(function($) {
    $.fn.highlight = function() {
        errorHighlight(this, 'highlight');
    };
})(jQuery);

Ответ 3

Это просто стили CSS. Вы можете применить их на бэкэнд или применить их с помощью .addClass().

Ответ 4

Я хотел бы поделиться еще одним решением. Он основан на пользовательских виджетах и позволяет добавлять заголовок и настраиваемый значок. Попробуйте Fiddle или посмотрите ниже:

$.widget('custom.noteBox', {
options: {
    icon: true,
    state: 'highlight'
},
_create: function () {
    var icon, note = $('<p>').html(this.element.html());
    if (this.options.icon === true) {
        switch (this.options.state) {
            case 'highlight':
                icon = 'info';
                break;
            case 'error':
                icon = 'alert';
                break;
            default:
                icon = false;
        }
    } else {
        icon = this.options.icon;
    }
    if (icon) note.prepend($('<span>')
        .addClass('ui-icon ui-icon-' + icon)
        .css({
        'float': 'left',
        'margin-right': '.3em'
    }));
    var title = this.element.attr('title');
    if (title) note.prepend($('<strong>').text(title + ' '));
    this.element.addClass('ui-widget')
        .replaceWith($('<div>')
        .addClass('ui-state-' + this.options.state + ' ui-corner-all')
        .css({
        'margin-top': '20px',
        'padding': '0 .7em'
    })
        .append(note));
   }
});


$('.error').noteBox({
    state: 'error'
 });
$('.info').noteBox();
$('<div title="Note! ">I`m dynamically added #1</div>')
    .appendTo('body').noteBox({
    icon: 'folder-open'
 });
 $('<div title="Note! ">I`m dynamically added #2</div>')
    .appendTo('body').noteBox({
    state: 'error'
 });
 $('<div title="Note! ">I`m dynamically added #3</div>')
    .appendTo('body').noteBox({
    state: 'error',
    icon: 'trash'
 });