$ .mobile.changePage не работает на PhoneGap? - PullRequest
Новая
       23

$ .mobile.changePage не работает на PhoneGap?

1 голос
/ 19 июля 2011

У меня проблема с методом $ .mobile.changePage, на самом деле этот метод, когда я конвертировал приложение с помощью phonegap, не работает.

Это код моей страницы .html.Есть ли решение?

Страница index.html 

<!DOCTYPE html>
<html>
<head>
    <title>Prova </title>

    <link rel="stylesheet" href="css/jquery.mobile-1.0b1.css" />
    <script src="js/jquery-1.6.1.min.js"></script>
    <script src="js/jquery.mobile-1.0b1.js"></script>

    <script>
    $(document).ready(function() {

        $('#linkpersonale').click(function() {
            $.mobile.changePage("#personale", null, true, true);
        });

    });
    </script>


</head>
<body>

<div data-role="page" id="home">

<header data-role="header">
    <h1>Prova Page1</h1>
</header>

<div data-role="content" id="content">


    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b" data-counttheme="d">
        <li>
            <a class="ui-link-inherit" id="linkpersonale">
                <h3 class="ui-li-heading">Personale</h3>
                <p class="ui-li-desc">...</p>
            </a>
        </li>
    </ul>

</div>


<footer data-role="footer" data-role="footer" data-id="footer-nav" data-position="fixed">
    <div data-role="navbar" id="navbar_home">
        <ul>
            <li><a href="#home" data-icon="home" data-iconpos="top" data-theme="a">Home</a></li>
        </ul>
    </div>
</footer>

</div>

</body>
</html>

Страница personale.html 

<!DOCTYPE html>
<html>
<head>
    <title>Prova </title>

</head>
<body>


<div data-role="page" id="personale">

<header data-role="header">
    <h1>Prova Pag2</h1>
</header>


<div data-role="content">

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b" data-counttheme="d">
    <li>
        <a class="ui-link-inherit" href="#">
            <h3 class="ui-li-heading">Etc etc</h3>
            <p class="ui-li-desc">...</p>
        </a>
    </li>

</ul>

</div>

<footer data-role="footer" data-role="footer" data-id="footer-nav" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="home" data-icon="home" data-iconpos="top" data-theme="a" data-transition="slide">Home</a></li>
        </ul>
    </div>
</footer>

</div>

</body>
</html>

Несколько советов?PS: извините за мой английский, я итальянец;)

Ответы [ 4 ]

4 голосов
/ 19 июля 2011

PhoneGap здесь красная сельдь. Вы должны проверить это как обычный старый код jQM, и вы увидите, что он там тоже не работает. Это потому, что вы ссылаетесь на div в файле HTML, который его не содержит (index.html).

Я бы попробовал позвонить changePage() на personale.html вместо #personale.

Из документов на $.mobile.changePage():

Аргумент to может принимать либо строку (например, URL-адрес файла или идентификатор локального элемента) ...

1 голос
/ 16 августа 2013

Как сказано в другом ответе, вы можете изменить страницу на pagename.html или ее идентификатор.

Вы используете его идентификатор "personale"

В этом случае вы должны использовать знак JQ, чтобы указать, что вы используете переменную (= $): 

$("#personale")

так что попробуйте 

$.mobile.changePage($("#personale"), null, true, true);

И еще одна вещь, вы знаете, на мобильных HTML-страницах вы можете поместить больше элементов страницы в один файл, верно?

Это экономит некоторое время загрузки при переключении страниц.

1 голос
/ 19 июля 2011

Я думаю, что это проблема: 

$.mobile.changePage("#personale", null, true, true);

Поскольку personale.html - это другой файл, я думаю, что вам нужно добавить .html. Вместо этого попробуйте 

$.mobile.changePage("personale.html", null, true, true);

Если вы хотите использовать предыдущий код, то вам просто нужно добавить код personale.html на страницу pageindex.html. В любом случае правильная страница будет отображаться, тогда вы можете просто переключаться между IDS, как у вас.

PageIndex.html: 

<div data-role="page" id="home">
<!-- CODE -->
</div>
<div data-role="page" id="personale">
<!-- CODE -->
</div>

ПРИМЕЧАНИЕ: Это приведет к ошибкам в телефонах Blackberry и HTC, а также во многих других телефонах. Они увидят обе страницы сразу. С другой стороны, любой вызов mobile.changePage() не будет работать с ними в любом случае

1 голос
/ 19 июля 2011

попробуй 

$.mobile.changePage("personale.html", null, true, true);
...