Question

version 1.4.0 alpha 2 of jQuery-Mobile中的新内容是panels不再必须位于使用它们的页面内。相反，外部面板可以是页面的兄弟。

这适用于静态页面：

<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>

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

Fiddle with complete example

Answer 1

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

让我回到窗格实现。它仍处于重大发展阶段。任何面板内部内容（按钮除外）都没有正确设置样式。只需添加一个列表视图并查看最终结果。

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

使用动态注入页面的外部面板

1 个答案: