1

私はPhoneGapプロジェクトに参加しています。jquery モバイル フレームワークを使用しています。

ここでのナビゲーションに問題があります。

最初に画面に表示されるホームページがあります。パネルからサブメニューを選択した後 (jqm パネルは使用せず、自分で作成しました)、別のページが表示され、このページには独自のフッターにナビゲーションがあります。フッター ナビゲーションをクリックするとうまく機能しますが、4 番目のボタンをクリックしても、関連するページに移動しません。

これがサンプルコードです。

    <!doctype html>
<html>
    <head> 
        <title>Fanatik Score</title>
        <meta charset="utf-8">
        <meta id="extViewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />   
        <link rel="stylesheet" href="css/jquery.mobile.min.css" />
        <link rel="stylesheet" href="css/main.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <style type="text/css">
            .ui-page { -webkit-backface-visibility: hidden; }
        </style>
    </head>

    <body> 

        <div id="menu">
            <h3>Menu</h3>
            <ul data-role="listview" data-theme="d">
                <li class="active"><a href="#home" class="contentLink" data-ajax="false">C</a></li>
                <li><a href="#football" class="contentLink" data-ajax="false">F </a></li>
                <li><a href="#basketball" class="contentLink" data-ajax="false">B </a></li>
                <li><a href="#volleyball" class="contentLink" data-ajax="false">V </a></li>
                <li><a href="#handball" class="contentLink" data-ajax="false">H </a></li>
            </ul>
        </div>
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
        <div data-role="page" class="pages" id="home">

            <div data-role="header">
                <a href="#"class="showMenu" data-shadow="false" data-iconshadow="false" data-icon="bars" data-role="button" data-iconpos="left">Menu</a>
                <h1>Canlı Skor</h1>
            </div><!-- /header -->

            <div data-role="content">

                <div class="article">
                    <div>
                        <ul>
                        </ul>
                    </div>
                 </div><!-- /article -->

            </div><!-- /content -->

            <div data-role="footer" data-position="fixed">
                <h1>Fanatik Score</h1>  
            </div><!-- /footer -->

        </div><!-- /page -->
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
        <div data-role="page" class="pages" id="football">

            <div data-role="header">
                <a href="#"class="showMenu" data-shadow="false" data-iconshadow="false" data-icon="bars" data-role="button" data-iconpos="left">Menu</a>
                <h1>Futbol</h1>
            </div><!-- /header -->

            <div data-role="content">

                <div class="article">
                    <div>
                        <ul id="live">
                        </ul>
                    </div>
                 </div><!-- /article -->

            </div><!-- /content -->

            <div data-role="footer" data-theme="c" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li class="active"><a href="#football" data-ajax="false">live</a></li>
                        <li><a href="#overfootball" data-ajax="false">over</a></li>
                        <li><a href="#tablefootball" data-ajax="false">tables</a></li>
                        <li><a href="#fixturefootball" data-ajax="false">fixture</a></li>
                    </ul>
                </div><!-- /navbar -->

            </div><!-- /footer -->

        </div><!-- /page -->
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
        <div data-role="page" class="pages" id="overfootball">

            <div data-role="header">
                <a href="#"class="showMenu" data-shadow="false" data-iconshadow="false" data-icon="bars" data-role="button" data-iconpos="left">Menu</a>
                <h1>Futbol</h1>
            </div><!-- /header -->

            <div data-role="content">

                <div class="article">
                    <div>
                        <ul id="over">
                        </ul>
                    </div>
                 </div><!-- /article -->

            </div><!-- /content -->

            <div data-role="footer" data-theme="c" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#football" data-ajax="false">live</a></li>
                        <li class="active"><a href="#overfootball" data-ajax="false">over</a></li>
                        <li><a href="#tablefootball" data-ajax="false">tables</a></li>
                        <li><a href="#fixturefootball" data-ajax="false">fixture</a></li>
                    </ul>
                </div><!-- /navbar -->

            </div><!-- /footer -->

        </div><!-- /page -->
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
        <div data-role="page" class="pages" id="tablefootball">

            <div data-role="header">
                <a href="#"class="showMenu" data-shadow="false" data-iconshadow="false" data-icon="bars" data-role="button" data-iconpos="left">Menu</a>
            </div><!-- /header -->

            <div data-role="content">

            <div class="article">
                <div>
                    <table id="tables" class="imagetable">
                    </table>
                </div>
            </div><!-- /article -->

            <div data-role="footer" data-theme="c" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#football" data-ajax="false">live</a></li>
                        <li><a href="#overfootball" data-ajax="false">over</a></li>
                        <li class="active"><a href="#tablefootball" data-ajax="false">tables</a></li>
                        <li><a href="#fixturefootball" data-ajax="false">fixture</a></li>
                    </ul>
                </div><!-- /navbar -->

            </div><!-- /footer -->

        </div><!-- /page -->        
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
        <div data-role="page" class="pages" id="fixturefootball">

            <div data-role="header">
                <a href="#"class="showMenu" data-shadow="false" data-iconshadow="false" data-icon="bars" data-role="button" data-iconpos="left">Menu</a>
                <h1>Futbol</h1>
            </div><!-- /header -->

            <div data-role="content">

            <div class="article">
                <h1>Fixturesssss</h1>
                <div>
                    fixturerrrrr
                </div>
            </div><!-- /article -->

            <div data-role="footer" data-theme="c" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#football" data-ajax="false">live</a></li>
                        <li><a href="#overfootball" data-ajax="false">over</a></li>
                        <li><a href="#tablefootball" data-ajax="false">tables</a></li>
                        <li class="active"><a href="#fixturefootball" data-ajax="false">fixture</a></li>
                    </ul>
                </div><!-- /navbar -->

            </div><!-- /footer -->

        </div><!-- /page -->        
</body>
</html>

フッター ナビゲーションで「fixturefootball」ページに移動できませんでした。

私は何が欠けていますか？

ありがとう。

4

1 に答える 1

1

最後のページを最後の次のページに移動すると、修正できます。

作業例: ....... 削除 .......

<!-------------------------------------------------------------------------------------------------------------------------------------------------------->

        <div data-role="page" class="pages" id="fixturefootball">

            <div data-role="header">
                <a href="#"class="showMenu" data-shadow="false" data-iconshadow="false" data-icon="bars" data-role="button" data-iconpos="left">Menu</a>
                <h1>F</h1>
            </div><!-- /header -->

            <div data-role="content">

                <div class="article">
                    <h2>DOESNT WORK - DOESNT NAVIGATEEEE !!</h2>
                </div><!-- /article -->

            </div><!-- /content -->

            <div data-role="footer" data-theme="c" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#football">C</a></li>
                        <li><a href="#overfootball">B</a></li>
                        <li><a href="#tablefootball">P</a></li>
                        <li class="active"><a href="#fixturefootball">F</a></li>
                    </ul>
                </div><!-- /navbar -->

            </div><!-- /footer -->

        </div><!-- /page -->        

<!-------------------------------------------------------------------------------------------------------------------------------------------------------->        

        <div data-role="page" class="pages" id="tablefootball">

            <div data-role="header">
                <a href="#"class="showMenu" data-shadow="false" data-iconshadow="false" data-icon="bars" data-role="button" data-iconpos="left">Menu</a>
                <h1>F</h1>
            </div><!-- /header -->

            <div data-role="content">

            <div class="article">
                <h1>L</h1>
                <div>
                    <table id="tables" class="imagetable">
                    </table>
                </div>
            </div><!-- /article -->

            <div data-role="footer" data-theme="c" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#football">C</a></li>
                        <li><a href="#overfootball">B</a></li>
                        <li class="active"><a href="#tablefootball">P</a></li>
                        <li><a href="#fixturefootball">F</a></li>
                    </ul>
                </div><!-- /navbar -->

            </div><!-- /footer -->

        </div><!-- /page -->        
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
于 2013-05-02T08:49:17.763 に答える