jquery mobile - 如何使用“错误报告对话框”

Question

使用jquery mobile时，如果加载了无效页面，则会优雅地报告错误消息，显示加载页面失败（然后淡出）。查看附件图片。

我想使用此ui报告我自己的自定义错误消息，并按照其完成方式设置动画。任何人都有这方面的经验吗？

我想在不使用对话框的情况下报告一些错误，这种方法似乎合适。这可以使用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 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 3

一个简单的解决方案可能是：

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 4

您可以使用它来隐藏错误div：

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