1

jq-mobile で表示パネルを無効にするのに問題があります。

各ページが同じヘッダーとフッターを共有するテンプレート PHP を使用しているため、この質問の HTML バージョンを作成しました。

ヘッダーには、左または右のパネルを開く 2 つのボタンがあります。page1.html には 2 つのパネル (左右) があり、page2.html には 1 つのパネル (左) があります。

したがって、page2.html には右パネルがないため、page2.html ではヘッダーの右ボタン パネルを無効にする必要があります。

問題は、page1 を開いて左側のパネル メニューから page2 に移動すると、右側のパネルのヘッ​​ダー ボタンが無効にならないことです。page2.html にui-disableクラス スクリプトを具体的に追加しましたが、機能しません。

page2.html に直接アクセスすると、ボタンが無効になります。

ここにソースコード：

page1.html

<!DOCTYPE html>
<html>
<head>
    <title>HOME</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

    <script>
        $( document ).on( "pageinit", "#index-page", function() {
            $( document ).on( "swipeleft swiperight", "#index-page", function( e ) {
                if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
                    if ( e.type === "swipeleft"  ) {
                        $( "#index-page .right-panel" ).panel( "open" );
                    } else if ( e.type === "swiperight" ) {
                        $( "#index-page .left-panel" ).panel( "open" );
                    }
                }
            });
        });
    </script>
</head>
<body>

    <div data-role="page" id="index-page" class="index-page">

        <!--header-->
        <div data-role="header" data-position="fixed">
            <h1>HOME</h1>
            <a id="show-left-panel" href="#left-panel" data-theme="b" data-icon="arrow-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open left panel</a>
            <a id="show-right-panel" href="#right-panel" data-theme="b" data-icon="arrow-l" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open right panel</a>
        </div><!--/header-->

        <!-- content -->
        <div data-role="content">
            <ul data-role="listview">
                <li data-role="list-divider"><h2>Latest News</h2></li>
                    <li><a href="#">
                        <h3>News 1</h3>
                        <p>News news  news  news  news  news  news  news  news  news  news  news  news ...</p>
                        <p class="ui-li-aside">Fri, Feb 14th 2013</p>
                    </a></li>
                    <li><a href="#">
                        <h3>Dummy word example</h3>
                        <p>The quick brown fox jumps over the lazy doug blah blah The quick brown fox jumps over the lazy doug blah blah...</p>
                        <p class="ui-li-aside">Mon, Jan 14th 2013</p>
                    </a></li>
            </ul>
        </div><!-- /content -->

        <!-- left-panel -->
        <div data-role="panel" id="left-panel" class="left-panel" data-display="push">
            <ul data-role="listview" data-count-theme="e">
                <li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
                <li data-icon="info" data-iconpos="notext"><a href="page2.html">Page 2</a></li>
            </ul>
        </div><!-- /left-panel -->

        <!-- right-panel -->
        <div data-role="panel" id="right-panel" class="right-panel" data-display="overlay" data-position="right">
            <ul data-role="listview" data-icon="false">
                <li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
                <li data-role="list-divider">Submenu</li>
                <li data-theme="e">Foo</li>
                <li><a href="#">Bar</a></li>
            </ul>
        </div><!-- /right-panel -->

        <!--footer-->
        <div data-role="footer" data-position="fixed">
            <h3>Copyright &copy; 2013 Example.com</h3>
        </div><!--/footer-->

    </div>

</body>
</html>

page2.html

<!DOCTYPE html>
<html>
<head>
    <title>HOME</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

    <script>
        $( document ).on( "pageinit", "#index-page", function() {
            $( document ).on( "swipeleft swiperight", "#index-page", function( e ) {
                if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
                    if ( e.type === "swipeleft"  ) {
                        $( "#index-page .right-panel" ).panel( "open" );
                    } else if ( e.type === "swiperight" ) {
                        $( "#index-page .left-panel" ).panel( "open" );
                    }
                }
            });

            $('#show-right-panel').addClass('ui-disabled'); //if I load page1.html first, than goes here, this line seems to have no effect?
        });
    </script>
</head>
<body>

    <div data-role="page" id="index-page" class="index-page">

        <!--header-->
        <div data-role="header" data-position="fixed">
            <h1>HOME</h1>
            <a id="show-left-panel" href="#left-panel" data-theme="b" data-icon="arrow-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open left panel</a>
            <a id="show-right-panel" href="#right-panel" data-theme="b" data-icon="arrow-l" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open right panel</a>
        </div><!--/header-->

        <!-- content -->
        <div data-role="content">
            <ul data-role="listview">
                <li data-role="list-divider"><h2>Subpage</h2></li>
                    <li><a href="#">
                        <h3>SUb 1</h3>
                        <p>News news  news  news  news  news  news  news  news  news  news  news  news ...</p>
                        <p class="ui-li-aside">Fri, Feb 14th 2013</p>
                    </a></li>
            </ul>
        </div><!-- /content -->

        <!-- left-panel -->
        <div data-role="panel" id="left-panel" class="left-panel" data-display="push">
            <ul data-role="listview" data-count-theme="e">
                <li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
                <li data-icon="info" data-iconpos="notext"><a href="page1.html">Page 1</a></li>
            </ul>
        </div><!-- /left-panel -->

        <!--footer-->
        <div data-role="footer" data-position="fixed">
            <h3>Copyright &copy; 2013 Example.com</h3>
        </div><!--/footer-->

    </div>

</body>
</html>
4

3 に答える 3

0

コードに問題があります (コードに問題がないため、エラーではありません)。

jQuery モバイル ページが複数の HTML ファイルに分割されている場合、2 番目の HTMl ファイルが DOM にロードされると、その BODY コンテンツのみがロードされ、他のすべて (HEAD を含む) は破棄されます。

したがって、コードは次の 2 つの方法で修正できます。

  1. スクリプト コンテンツをpage2.htmlからpage1.htmlに移動します。
  2. スクリプト コンテンツをpage.2html HEAD からpage2.html BODYに移動します。

解決策 1 ははるかにクリーンですが、どれも正しいので、より適切な解決策を選択してください。

もう 1 つの問題は、同じ ID を持つ 2 つのページを持つことができないため、page2.htmlファイル内のページ ID を変更することです。

このトピックの詳細については、私の別の記事(私の個人的なブログ) に加えて、例を含む防止方法を参照してください。

于 2013-03-11T09:43:20.337 に答える
0

どうやら、前のページの DOM がまだアクティブなページにあるようです。そこで、次のスクリプトを追加して削除しました。

$( document ).on( "pageshow", "div.big-page", function(event, ui) {
    $(ui.prevPage).remove();
    if($("#right-panel").length > 0) { // make sure the page has right panel
        $("#show-right-panel").removeClass("ui-disabled");
    }
});

soure: JQM (jQueryMobile) changePage() で最後のページを DOM からプッシュする

于 2013-03-11T16:55:11.603 に答える
-1

別のバージョンの JQM ライブラリと css を試してください

于 2013-09-15T06:28:31.530 に答える