3

JQMのパネル要素の話題は結構見ましたが、似たようなものが見当たらなかったので質問です。

異なるページ (ID が異なる) があり、それぞれに独自のパネル要素があります。

<!-- MAIN MENU -->
<div id="mainmenu" data-role="panel">
  <ul>
    <li class="home"><a href="index.html" class="active">Home</a></li>
    <li><a href="list.html">Happiness Diary</a></li>
    [...]
  </ul>
</div>
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>

そして、swiperight次のコードで関数を呼び出すようにバインドされたイベント:

showMenu: function() {
  console.log("showmenu active page is: " + $.mobile.activePage.attr("id"));
  $.mobile.activePage.find('#mainmenu').panel("open");
},

これで、他のすべてのページのナビゲーションは問題なく、パネルは問題なく動作します。私が抱えている唯一の問題は、 index.html (ロードされた最初のページ、 id のページmainpage) に戻るときです。コードが正しく実行されているのが見えるので奇妙です: showmenu active page is: mainpage、しかしパネルは表示されません。

ヒントはありますか？

更新:テストのために、新しいエントリ ページを作成したので、index.html は最初に読み込まれたページではなくなりました。このようにして、index.html のパネルは正しく機能します。ページに関連するいくつかの予期しない動作を完全に除外するだけでした。したがって、問題はまさにそれが最初にロードされたページであるということです。

ありがとう、ロレンツォ

4

1 に答える 1

1

アップデート

テスト用に 3 つの基本的なページを作成しました。これはページの構造です:

<div data-role="page" id="example_page_one" data-theme="b" data-content-theme="b">
    <div id="example_page_one_menu" data-role="panel">
        <ul>
            <li class="home"><a href="index.htm" class="active">Home</a></li>
            <li><a href="index.htm">Link 2</a></li>
        </ul>
    </div>
    <div data-role="header">Header Content</div>
    <div data-role="content">
        <p>This is the content for example page one!</p>
        <p><a href="javascript: showMenu();">Open the menu panel</a></p>
        <p>A link to <a href="sandbox_m2.php">example page two</a></p>
        <p>A link to <a href="sandbox_m3.php">example page three</a></p>
    </div>
    <div data-role="footer">Footer Content</div>
</div>

パネル ID の値はページ ID の値と同じですが、_menu追加されていることに注意してください。この命名スキームは、作り直された関数によって予期されshowMenuます (以下にさらに示します)。

ページ 2 と 3 は同じですが、ページ ID とパネル ID がそれぞれのページのと を置き換えoneて変更されています。(コンテンツ領域のリンクは、他の 2 つのサンプル ページも指すように調整されています。)twothree

<head>...</head>すべてのページのセクションに次の機能があります。

function showMenu(){
    console.log("showMenu active page is: " + $.mobile.activePage[0].id );
    $('#'+$.mobile.activePage[0].id+'_menu').panel("open");
}

上記のコードで.find('#mainmenu')は、一意の ID でパネルをターゲットにできるため、これは必要ありません。[0].idの使用が よりも効率的であることを示唆する投稿も見つけました.attr['id']。

各ページのコンテンツ領域で単純なリンクを使用してshowMenu関数を呼び出すだけです。スワイプイベントをバインドしてshowMenu関数を呼び出すことができます。単純にするためにこの方法で行いました。

とにかく、パネルはロードされた最初のページと後続のページで正常に機能します。あなたの質問は、各ページのすべてのパネルに同じパネル id 値を使用しているかどうかを明確にしません。パネルごとに異なる id 値を使用していることを指摘したいと思います。

遊んでいるときに気付いたもう 1 つのことは、問題に関連する場合と関連しない場合がある、いつ利用できるかに関するバグがあることです。activePage

元の回答

ページ セクションに配置された JavaScript コード<div>は、JQM サイトにロードされた最初のページに対して一度だけロード/実行され、同じセッション内では二度と実行されないことに気付きました。ただし、最初に読み込まれたページを除く他のページのページ セクション内の JavaScript コードは、<div>毎回実行されます。

ページに JavaScript コードを配置することは<div>もうありません。代わりに、実行内容に応じてpageshowまたはイベントを使用します。pageinit

以下は、使用時にすべてのページのセクションに配置されるコードの例を示して<head>...</head>います (jQuery ライブラリが読み込まれた後、jquery-mobile ライブラリが読み込まれる前)。

<script>
    $(document).on("pageshow", "#specific_page_id", function() {
        // .. Do stuff *every time* the '#specific_page_id' is loaded/displayed
    });
    $(document).on("pageshow", function() {
        // .. Do stuff *every time* ANY page is loaded/displayed
    });
    $(document).on("pageinit", "#specific_page_id", function() {
        // .. Do stuff only when'#specific_page_id' is initially loaded
        //    (will also fire if the specific page was previously loaded but it is no longer in the JQM cache)
    });
    $(document).on("pageinit", function() {
        // .. Do stuff when any page is initially loaded
        //    (Will not fire for previously loaded pages that are still in the JQM cache)
    });
</script>
于 2013-08-27T18:49:41.200 に答える