Question

Jquery mobile只加载DOM中的第一页我通过hide（）和show（）实现了页面导航，但是现在我正在使用google map和navbar之类的jquery对象现在它停止工作并且不在我的代码中显示第3页直到我把第3页放在页面顶部但是第1页停止显示带有正确jquery css的jquery导航栏。目前我正在开发html5，jquery手机，phonegap，android模拟器。 HTML代码

<div data-role="page" id="page1">
        <div data-role="header"  class="pageheader" style="float:left;">
        <div class="back"><a href="#" class="backhomelink">Back</a></div>
        </div>
        <div data-role="fieldcontain" style="width:100%;float:left;"><input type="search" name="password" id="search" value="" data-theme="c" /></div>

        <div data-role="content" style="width:100%; float:left; padding:0;">
        <div data-role="navbar" style="width:100%; float:left;">
        <ul >
        <li><a href="#" data-href="list-tab"class="ui-btn-active" >Main</a></li>
        <li><a href="#" data-href="map-tab" >Map</a></li>
        </ul>
        </div><!-- /navbar -->
        <div id="list-tab" class="content_div listing" >
        <ul id="tab-List" >
        <li class="lilogin first" > LINK 1  </li>
        <li class="lilogin second" > LINK 2  </li>
        <li class="lilogin third" > LINK 3  </li>
        </ul>

        </ul>
        </div>
        <div id="map-tab" class="content_div"><div id="map-container"><div id="map_canvas" ></div></div></div>
        </div>
        </div>


        <div id="page2" data-role="page">
        <div data-role="header" class="pageheader" >
        <div class="logo"><a href="#" ><img src="images/logo.png" alt="logo" /></a></div>
        </div>  

        <div class="main">
        <fieldset>

        <ul>
        <li class="lilogin first" > LINK 1  </li>
        <li class="lilogin second" > LINK 2  </li>
        <li class="lilogin third" > LINK 3  </li>
        </ul>
        </fieldset>
        </div><!-- main -->
        </section><!-- wrapper -->
        </div>

        <div data-role="page" id="page3">
        <div data-role="header"  class="pageheader" style="float:left;">
        <div class="back"><a href="#" class="backhomelink">Back</a></div>
        </div>

        <div data-role="fieldcontain" style="width:100%;float:left;">
        <input type="search" id="newsearch" value="" data-theme="c" />
        </div>

        <div data-role="content" style="width:100%; float:left; padding:0;">
        <div data-role="navbar" style="width:100%; float:left;">
        <ul >
        <li><a href="#" data-href="list-tab"class="ui-btn-active" >Main</a></li>
        <li><a href="#" data-href="map-tab" >Map</a></li>
        </ul>
        </div><!-- /navbar -->
        <div id="new-list-tab" class="content_div listing" >
        <ul id="new-tab-List" >
        <li class="lilogin first" > LINK 1  </li>
        <li class="lilogin second" > LINK 2  </li>
        <li class="lilogin third" > LINK 3  </li>
        </ul>

        </ul>
        </div>

        <div id="new-map-tab" class="content_div"><div id="map-container"><div id="new-map_canvas" ></div></div></div>
        </div>
        </div>

Javascript Code

        $(document).ready(function() {
        var map;
        hide();
        $('#page1').show();
        $('.ui-loader').hide();

        function hide(){
        $('#page1').hide(); 
        $('#page2').hide();
        $('#page3').hide();
        }

        $(document).delegate('[data-role="navbar"] a', 'click', function () {
        $(this).addClass('ui-btn-active');
        $('.content_div').hide();
        $('#' + $(this).attr('data-href')).show();
        google.maps.event.trigger(map, 'resize');
        });

        $('#first').click(function() {
        hide();
        $('#page1').show();
        LoadMap("map_canvas");
        return false;
        });

        $('#second').click(function() {
        hide();
        $('#page2').show();
        return false;
        });

        $('#third').click(function() {
        hide();
        $('#page3').show();
        LoadMap("new-map_canvas");
        return false;
        });

        function LoadMap(divcanvas) {

        var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
        var myOptions = {
        center: myLatlng,
        zoom:10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById(divcanvas),
        myOptions);

        }

        });

我甚至尝试使用触发器，但我想我不知道如何在这种情况下实现它们。

Answer 1

首先，您的HTML结构无效，需要修复。请参阅this page以了解如何在单个HTML文档中定义多个JQM page。

使用JQM，您不会显式显示/隐藏页面。 JQM为您处理。您可以使用this page中所述的page链接链接到<a>。

最后，了解如何使用自定义JS提供JQM;阅读this help page。

Jquery mobile只加载DOM中的第一页而不加载其他页面的css，页面hide（）show（）

1 个答案: