jQuery Mobile индивидуальное сообщение о загрузке, специфичное для каждой страницы - PullRequest
Новая
       1

jQuery Mobile индивидуальное сообщение о загрузке, специфичное для каждой страницы

0 голосов
/ 15 февраля 2012

Возможно ли иметь другое сообщение о загрузке на данной странице в 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;
        });

Ответы [ 2 ]

1 голос
/ 01 октября 2012

Это мой альтернативный метод загрузки страницы с использованием простых элементов 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>

Вы должны удалить этот символ $ во время реализации.

Чтобы получить полный код, посетите мой блог

1 голос
/ 15 февраля 2012

Вы можете прослушать событие 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 - Сообщение о загрузке будет отображаться каркасом jqm, только если вы пытаетесь загрузить страницу, которая была создана в виде отдельного html-файла. Если у вас есть все ваши data-role="page" div в пределах одной страницы, это означает, что jqm framework не будет отображать никаких загрузочных сообщений. Однако вы можете вручную показать его в обработчике pagebeforeshow, используя $.mobile.showPageLoadingMsg(), и скрыть в обработчике pageshow, используя $.mobile.hidePageLoadingMsg(). Но это не так. внесите какое-либо заметное изменение, поскольку продолжительность времени, в течение которого сообщение остается на экране, будет незначительной.

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

Тег привязки может быть примерно таким 

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

и соответствующий скрипт этой формы 

$("gotopage2).live("click",function(){
    $.mobile.loadingMessage = "Loading message for page1";
    $.mobile.changePage("page2.html");
});

Дайте мне знать, если это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...