2

Jquery モバイルは DOM の最初のページのみを読み込みます。hide() と show() を介してページ ナビゲーションを実装していましたが、現在は Google マップやナビゲーション バーなどの jquery オブジェクトを使用しているため、動作が停止し、配置するまでコードにページ 3 が表示されません。ページの上部にある3ページ目ですが、1ページ目よりも適切なjquery cssでjquery navバーが表示されなくなります。現在、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使用してにリンクできます。<a>

最後に、カスタム JS で JQM を提供する方法を学習します。このヘルプ ページをお読みください。

于 2012-07-25T09:23:32.560 に答える