JQueryMobile не работает на второй странице - PullRequest
Новая
       0

JQueryMobile не работает на второй странице

0 голосов
/ 18 октября 2011

Я работаю над проектом PhoneGap для Android с использованием мобильного телефона jquery.Приложение работало найти, но мне нужно было добавить новую страницу в начало приложения.Как только я сделал это, мобильный jquery не работает, когда я перехожу на вторую страницу.Кто-нибудь знает какие-либо причины для этого?

Весь мой javascript / jquery находится на main.js

здесь первая и вторая страницы 

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap Demo With JQuery Mobile</title>
      <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0b2.css" type="text/css" charset="utf-8" />
      <link rel="stylesheet" href="pgandjqm-style-override.css" type="text/css" charset="utf-8" />
      <script type="text/javascript" src="jquery.mobile/jquery-1.6.2.min"></script>
      <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
      <script src="jquery.mobile/jquery.mobile-1.0b2.js"></script>
          <script type="text/javascript" charset="utf-8" src="main.js"></script>

    <!-- CDN Respositories: For production, replace lines above with these uncommented minified versions -->
    <!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />-->
    <!-- <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>-->
    <!-- <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>-->
    </head>
  <body data-theme="a">
    <div data-role="page" data-theme="a">
    <div data-role="header">
        <img src="images/joycard.png" alt="JoyCard" class="banner">
    </div>
    <div data-role="content">

        <h3>Partner News</h3>

            <div data-role="collapsible-set">
                <div data-role="collapsible" data-collapsed="false">
                    <h3>13 Kanus</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p>
                </div>
                <div data-role="collapsible">
                    <h3>A Lounge</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p>
                </div>
                <div data-role="collapsible">
                    <h3>Kino</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p>
                </div>
                <div data-role="collapsible">
                    <h3>Action Sport Berlin</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p>
                </div>
                <div data-role="collapsible">
                    <h3>13 Kanus</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p>
                </div>
                <div data-role="collapsible">
                    <h3>A Lounge</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p>
                </div>
                <div data-role="collapsible">
                    <h3>Kino</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p>
                </div>
                <div data-role="collapsible">
                    <h3>Action Sport Berlin</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p>
                </div>

            </div>
            <div id="example">
                <h2 onclick="toIndex();">To the app</h2>
            </div>

        </div> 
    </div>
  </body>
</html>




<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap Demo With JQuery Mobile</title>
      <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0b2.css" type="text/css" charset="utf-8" />
      <link rel="stylesheet" href="pgandjqm-style-override.css" type="text/css" charset="utf-8" />
      <script type="text/javascript" src="jquery.mobile/jquery-1.6.2.min"></script>
      <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
      <script src="jquery.mobile/jquery.mobile-1.0b2.js"></script>
      <script type="text/javascript" charset="utf-8" src="main.js"></script>
          <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>


    <!-- CDN Respositories: For production, replace lines above with these uncommented minified versions -->
    <!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />-->
    <!-- <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>-->
    <!-- <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>-->
    </head>
  <body data-theme="a">
    <div data-role="page" data-theme="a">
        <div data-role="header">
            <img src="images/joycard.png" alt="JoyCard" class="banner">
        </div>
        <div data-role="navbar">
            <ul>
                <li><a onclick="categoriesList();" class="ui-btn-active">KATEGORIEN</a></li>
                <li><a onclick="mapDetails();">IN DER N&Auml;HE</a></li>
                <li><a onclick="allPartners();">ALLE PARTNER</a></li>
            </ul>
        </div><!-- /navbar --> 


        <div id="list" data-role="content" data-theme="a">
            <ul data-role="listview" data-inset="true" data-theme="a">
            </ul>
        </div><!-- end jqm content -->

        <div id="allPartners" data-role="content">  
            <ul data-role="listview" data-inset="true" data-theme="a">
            </ul>
        </div><!--/all partners list -->    

        <div id="loctext" ></div>

        <div id="map_canvas" class="mapView"></div>

        <div id="menu" data-role="content" class="menu" onClick="hideMenu();">
                    <a href="news.html" class="menu-item"><img src="images/news.png" alt="News"></a>
                    <a href="contact.html" class="menu-item"><img src="images/contact.png" alt="Contact"></a>
                    <a href="info.html" class="menu-item"><img src="images/info.png" alt="Info"></a>
        </div>
    </div>
  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 19 октября 2011

Если вы сейчас используете только один html, вы будете ссылаться на страницы с идентификатором:

............. Перейти на первую страницу ..........

Одна важная вещь, которую вы должны знать, это то, что первая страница в списке страниц в одном html-файле будет первой, поэтому в этом случае first_page будет отображаться после заставки.

В другом случае (с использованием других html-файлов) необязательно включать стили в секундах, третьей и других страницах, которые не являются index.html, поскольку по умолчанию все загружается с помощью js.Поэтому сначала загружается index.html, а затем статистика jqm, затем другие страницы будут загружены с помощью ajax, по крайней мере, вы отключите его или будете использовать внешний ролл.

0 голосов
/ 19 октября 2011

Я предполагаю, что это ссылка, которая ведет вас на вторую страницу? 

<h2 onclick="toIndex();">To the app</h2>

Что делает эта функция?Используется ли эта функция: 

$.mobile.changePage("secondpage.html");
...