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事件绑定到使用以下代码调用 a 函数：

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

更新

我创建了三个基本页面进行测试。这是页面的结构：

<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 分别替换one为two和three。（内容区域中的链接也调整为指向其他两个示例页面。）

<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].idas 比.attr['id'].

我只是在每个页面的内容区域中使用一个简单的链接来调用该showMenu函数。您可以绑定您的滑动事件来调用该showMenu函数，我只是这样做以保持简单。

无论如何，面板在加载的第一页和后续页面上都可以正常工作。您的问题没有说明您是否对每个页面中的所有面板使用相同的面板 id 值。我确实想指出，我为每个面板使用了不同的 id 值。

我在玩游戏时注意到的另一件事是关于何时可用的错误activePage可能与您的问题有关，也可能与您的问题无关。

原始答案

我注意到放置在页面<div>部分中的 JavaScript 代码仅对 JQM 站点中加载的第一页加载/执行一次，并且永远不会在同一会话中再次加载/执行。但是，任何其他页面的页面部分中的任何 JavaScript 代码，<div>除了第一个加载的页面，每次都会执行。

我不再将 JavaScript 代码放在页面<div>中，而是根据我正在做的事情使用pageshowor事件。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 回答