jquery mobile - как использовать «диалог сообщений об ошибках»

Question

при использовании jquery mobile и загрузке неверной страницы появляется сообщение об ошибке, изящно показывающее, что загрузка страницы не удалась (затем исчезла). Проверьте прикрепленное изображение.

Я хочу использовать этот интерфейс, чтобы сообщать о собственных сообщениях об ошибках и анимировать их так, как это делается. у кого-нибудь был опыт в этом деле?

Я хотел бы сообщить о некоторых ошибках без использования диалогов, и этот метод кажется подходящим. Можно ли это сделать с помощью jquery и, если хотите, покажите код.

Answer 1

В последней версии 1.1.0 RC вы можете использовать $.mobile.showPageLoadingMsg для отображения пользовательских сообщений об ошибках:

// show error message
$.mobile.showPageLoadingMsg( $.mobile.pageLoadErrorMessageTheme, $.mobile.pageLoadErrorMessage, true );

// hide after delay
setTimeout( $.mobile.hidePageLoadingMsg, 1500 );

Answer 2

Одним из простых решений может быть:

function show_error_message(message, delay) {
    $.mobile.loading('show',
                     { theme: "e", text: (message || 'ERROR'),
                       textonly: true, textVisible: true });
    setTimeout(function() {
        $.mobile.loading('hide');
    }, ((delay && delay > 0) ? delay : 1000));
}

Использование:

show_error_message("Wow!!!", 1500);

В центре окна будет отображаться сообщение Wow!!!.

Answer 3

У меня была похожая проблема.Мне нужно было показать ошибки проверки после проверки отправленной формы.Поэтому я написал этот код:

function showErrorMessage(message, $container, delay) {
    $err = $('<div/>', {
        id: 'error_message'
    });
    $err.attr('data-role', 'popup');
    $err.attr('data-theme', 'e');
    $err.attr('data-overlay-theme', 'a');
    $err.attr('data-position-to', 'window');
    $err.addClass('ui-content');
    $err.text(message);

    $container.children().detach();
    $container.append($err);

    $err.popup( );
    $err.popup( "open" );

    if(delay > 0) {
        setTimeout(function() {
            $err.popup( "close" );
        }, delay);
    }
}

Это показывает это сообщение:

Answer 4

Вы можете использовать это для сокрытия ошибки div:

div.ui-loader.ui-overlay-shadow { display: none !important; }