0

jQuery-Mobile 版本 1.4.0 alpha 2 中的一个新功能是面板不再必须位于使用它们的页面内。相反，外部面板可以是页面的兄弟。

这适用于静态页面：

<div id="panel" data-role="panel" data-theme="b" data-position="left" 
     data-display="push">
  <h3>This is a panel</h3>
</div>

<div data-role="page" id="staticPage">
  <div data-role="header" data-position="fixed">
    <a href="#panel">Panel</a>
    <h1>Static page</h1>
  </div>
  <div data-role="content"> 
    <div class="content-primary">
      <a href="#dynamicPage" data-role="button" data-inline="true">Go to dynamic page</a>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function () {
      $('#panel').panel();
  });
</script>

但是，当我动态生成和注入页面时，面板的链接不再按预期工作：

<script type="text/x-template" id="dynamicPageTemplate">
  <div data-role="page" id="staticPage">
    <div data-role="header" data-position="fixed">
      <a href="#panel">Panel</a>
      <h1>Dynamic page</h1>
    </div>
    <div data-role="content">   
      <div class="content-primary">
        <a href="#staticPage" data-role="button" data-inline="true">
          Go to static page
        </a>
      </div>
    </div>
  </div>
</script>

<script type="text/javascript">
  $(document).bind("pagebeforechange", function (e, data) {
      if (typeof data.toPage === "string") {
          var url = $.mobile.path.parseUrl(data.toPage);
          if (url.hash.search(/^#dynamicPage$/) !== -1) {
              $('#dynamicPage').remove();
              var template = $("#dynamicPageTemplate").html();
              var $page = $(template);
              $page.attr('id', 'dynamicPage');
              $('body').append($page);
              $page.page();
              $.mobile.changePage($page, {changeHash: false});
              e.preventDefault();
          }
      }
  });
</script>

当我单击动态页面标题中的“面板”按钮时，URL 更改为…#panel并且没有显示任何内容。我怀疑 jQuery-Mobile 试图将面板显示为页面而不是面板。我做错了什么，还是这是一个错误？

摆弄完整的例子

4

1 回答 1

2

jQuery Mobile 1.4 面板（和许多其他小部件）实现仍然无法正常工作。几个新组件甚至还没有实现。更不用说，演示站点自从他们宣布 alpha 版本 1 以来就没有更新。

让我回到窗格实现。它仍在大力发展中。任何面板内部内容（按钮除外）的样式都不正确。只需添加一个列表视图并查看最终结果。

您唯一能做的就是等待 RC1 版本，或者可能只是第一个 beta 版本（但我不会屏住呼吸等待 beta 版本）。

于 2013-09-22T19:12:41.343 回答