Question

是否可以在jQuery Mobile中的给定页面上添加不同的加载消息？

我正在使用mobile.loadingMessage，我也试过了mobile.showPageLoadingMsg，但我找不到答案。

以下是我在整个应用中显示的消息：

$(document).bind('mobileinit',function(){
            $.extend($.mobile, {
                loadingMessage: "We're processing your request. We won't be long. Just Like Great Food, a good hotspot takes time to (find) prepare for you....",
                pageLoadErrorMessage: 'Sorry, there was an error while loading!',
            });
            $.mobile.page.prototype.options.addBackBtn = true;
        });

Answer 1

您可以收听pageshow事件并设置特定于该页面的加载消息。

示例代码：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>jQuery Mobile Sample</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script>
        $("#page1").live("pageshow",function(){
            $.mobile.loadingMessage = "Loading message for page1";
        });
        $("#page2").live("pageshow",function(){
            $.mobile.loadingMessage = "Loading message for page2";
        });
        $(".showBtn").live("click",function(){
            $.mobile.showPageLoadingMsg();
            setTimeout(function(){$.mobile.hidePageLoadingMsg()},2000);
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    </head> 

    <body> 
        <div data-role="page" id="page1">

        <div data-role="header">
            <h1>Page1</h1>
        </div><!-- /header -->
        <div data-role="content">   
            <a data-role="button" class="showBtn">Show loading message</a>
            <a data-role="button" href="#page2">Go to page 2</a>
        </div>
        </div><!-- /page -->
        <div data-role="page" id="page2">

        <div data-role="header">
            <h1>Page2</h1>
        </div><!-- /header -->
        <div data-role="content">   
            <a data-role="button" class="showBtn">Show loading message</a>
            <a data-role="button" href="#page1">Go to page 1</a>
        </div>
        </div>
    </body>
</html>

此处的演示 - http://jsfiddle.net/SugTr/

修改 - 使用单个pageshow侦听器为所有网页使用switch语句对每个网页进行定位的替代版本 - http://jsfiddle.net/SugTr/1/

编辑2 - 只有在您尝试加载已创建为单独的html文件的页面时，jqm框架才会显示加载消息。如果您拥有所有{{ 1}} div在单个页面中，这意味着jqm框架不会显示任何加载消息。但是，您可以使用data-role="page"在pagebeforeshow处理程序中手动显示它并隐藏在$.mobile.showPageLoadingMsg()处理程序中使用pageshow。但这并没有任何明显的变化，因为消息在屏幕上停留的持续时间可以忽略不计。

现在看到实际显示页面加载消息的情况（您正在加载单独的html），您可以通过在加载页面之前设置$.mobile.hidePageLoadingMsg()来获取特定的加载消息。

锚标记可以是这样的

$.mobile.loadingMessage

以及此表单的相应脚本

<a data-role="button" id="gotopage2" href="#'>Go to page 2</a>

如果有帮助，请告诉我。

Answer 2

这是我使用简单的javascript和html元素加载页面消息的替代方法。我的博客：

http://aspnetsample.blogspot.in/2012/09/page-loading-message-javascript-main.html

您可以访问我的博客查看完整文章。

示例代码：

$function getpage(val)
{
    hideFrame();
    var mframe;
    mframe=document.getElementById("MyFrame");
    mframe.src=val;
    mframe.onload=function()
    {
         document.getElementById("MyFrame").style.display="block";
         document.getElementById("loadingDiv").style.display="none";
    }
}
function hideFrame()
{
    document.getElementById("MyFrame").style.display="none";
    document.getElementById("loadingDiv").style.display="block";
}
function showFrame()
{
    document.getElementById("MyFrame").style.display="block";
    document.getElementById("loadingDiv").style.display="none";
}
function showdiv()
{
    document.getElementById("loadingDiv").style.display="block";
}
function changeHome(val)
{
    window.location=val;
}


      $  <table>
                <tr>
                    <td>
                        <div class="menu_div" onclick="getpage('http://www.aspnetsample.blogspot.in')">
                            Page1
                        </div>
                    </td>
                    <td>
                        <div class="menu_div" onclick="getpage('http://www.w3schools.com/css/default.asp')">
                            Page2
                        </div>
                    </td>
                    <td>
                        <div class="menu_div" onclick="getpage('page2.aspx')">
                            Page3
                        </div>
                    </td>
                    <td>
                        <div class="menu_div" onclick="changeHome('page3.aspx')">
                            Page4
                        </div>
                    </td>
                </tr>
            </table>

      $ <iframe class="iframe" id="MyFrame" src="http://www.w3schools.com" onprerender="javascript:showdiv()"
                onload="javascript:showFrame()" style="display: none;"></iframe>
            <div id="loadingDiv" class="loadingDiv">
                <table style="width: 100%; height: 100%;">
                    <tr>
                        <td align="center" valign="middle">
                            Page is Loading...
                        </td>
                    </tr>
                </table>
            </div>

您必须在实施时删除该$符号。

要获取完整代码，请访问我的博客

jQuery Mobile个人加载特定于每个页面的消息

2 个答案: