2

Jquery mobile 仅加载 DOM 中的第一页我正在通过 hide() 和 show() 实现页面导航，但现在我正在使用 google map 和 navbar 之类的 jquery 对象，现在它停止工作并且在我的代码中不显示第 3 页，直到我放第 3 页位于页面顶部，但第 1 页停止显示带有正确 jquery css 的 jquery 导航栏。目前我正在开发 html5、jquery mobile、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);

        }

        });

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

4

1 回答 1

0

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

使用 JQM，您无需显式显示/隐藏页面。JQM 为您处理。您可以使用本页中描述的链接链接到您page的 s 。<a>

最后，为学习如何 JQM 可以提供你的自定义 JS；阅读此帮助页面。

于 2012-07-25T09:23:32.560 回答