jQuery-移动端外面板始终在页面间打开

Question

我尝试四处搜索，但没有找到我能理解的相关主题。我不太熟悉 Javascript 或一般编码。

我正在使用 Jquery Mobile 1.4.5，这是我的问题：

我无法使外部面板正常工作。该面板在我的第一页上显示得很好，但是当我更改页面时，它不会按预期显示。我的计划是让面板以与 Jquery 移动演示页面上相同的方式工作。

Link: Jquery Mobile Demo

在这里你可以看到无论他们在哪个页面上，面板总是显示，我发现他们在那个网站上没有使用外部面板，但它应该仍然是可能的。

我的网站目前如何运作：

加载第一页时面板工作正常(#page_home)
当进入新页面（#page_kodi 或#page_download）时，它没有按预期自动显示。
当我输入#page_kodi 或#page_download 并手动调出它时，它会按预期保持
这是奇怪的部分：当我从（打开面板）#page_download到#page_kodi再到#page_home（主页）时，它起作用了。
当我从#page_home 转到另一个页面时，它不起作用。

这是我的面板 JS 代码，我相信有更好的方法来编写它，也许其中一些不需要。

Javascript:

    <script>
    <!-- Creates the panels & navbars/Tabs -->
    $(document).on("pagecreate", function() {
        $("body > [data-role='panel']").panel();
        $("body > [data-role='panel'] [data-role='listview']").listview();
    });
    $(document).on("pageshow", function() {
        $("body > [data-role='header']").toolbar();
        $("body > [data-role='header'] [data-role='navbar']").navbar();
    });
    </script>

<script>
$(document).on("pagebeforeshow", function( event, data ) {
    $('#leftpanel').panel("open");
})
</script>

<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$(document).on("pagebeforecreate", "#page_home", function () {
  $( "#leftpanel" ).panel({ dismissible: true });
  $( "#leftpanel").panel("close");
});
}
</script>

<script>
$(document).on("pagecreate", "#page_home", function () {
 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
 setTimeout(function(){
    $('#leftpanel').panel("close");
}, 500);
 }
});
</script>

<script>
$(document).on("pagebeforecreate", "#page_home", function () {
  $( "#leftpanel" ).panel({ dismissible: false });
});
</script>

<script>
$(document).on("pagebeforecreate", "#page_download", function () {
  $( ".leftpanel" ).panel( "option", "dismissible", false );
  $('#leftpanel').panel("open");
});
</script>

<script>
$(document).on("pagebeforecreate", "#page_kodi", function () {
  $( "#leftpanel" ).panel( "option", "dismissible", false );
  $('#leftpanel').panel("open");
});
</script>

<script>
/* Left & Right swipe gestures to open panels*/
$(document).on("pagecreate", function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    $(document).on("swipeleft swiperight", function(e) {
        if ($(".ui-page-active").jqmData("panel") !== "open") {
            if (e.type === "swipeleft") {
                $("#rightpanel").panel("open");
            } else if (e.type === "swiperight") {
                $("#leftpanel").panel("open");
            }
        }
    });
    }
});
</script>

我已将所有这些放入我的 HTML 文件中。

HTML面板：

<div style="margin-top: 0px; background-color: #212120;" class="customlist panel-open" data-role="panel" data-position="left" data-dismissible="" data-display="overlay" data-theme="none" id="leftpanel">
    <ul data-role="listview" data-inset="false">
MY CONTENT HERE
</ul>
</div>

data-dismissible="" 我这样说是因为当你用 JS 手动设置它时，这是有效的，或者我已经读过。如果我将它设置为 false 或 true，它不起作用。

基本上我在这里尝试做的是始终让面板在大屏幕上打开并关闭，并选择在小屏幕上滑动打开它。这现在有效。我遇到的问题是，当我从首页转到另一个页面时，面板无法按预期运行并关闭，但如果我从另一个页面转到首页则不会。

PS：我也将面板放在我的两个页面之间，如下所示：

page_home

-- 面板 -- 一些弹出窗口

page_download

page_kodi

在此先感谢您提供的所有帮助，对文字墙感到抱歉。

Answer 1

假设您使用的是 single-page 模型，这里是一个 JQM 项目的简单存根，它具有 Panel 可以在不同页面之间保持打开状态。默认行为是通过覆盖 mobile.panel 小部件的 _bindPageEvents 函数来参数化的，因此您可以动态地为此设置一个标志。

您可以根据需要设置 stayAlwaysOpen 标志，通过欺骗 useragent 字符串或（可能更好）检查视口宽度，由您决定。您还可以为此目的检查 CSS 断点。

为了保持 header 导航并使面板更舒适，我还使用了函数 scalePanelToContent 来自：jQuery mobile panel between header and footer (credits: Omar).

var stayAlwaysOpen = true;

$.widget("mobile.panel", $.mobile.panel, {
  _bindPageEvents: function() {
    var self = this;

    this.document
      // Close the panel if another panel on the page opens
      .on("panelbeforeopen", function(e) {
        if (self._open && e.target !== self.element[0]) {
          self.close();
        }
      })
      // On escape, close? might need to have a target check too...
      .on("keyup.panel", function(e) {
        if (e.keyCode === 27 && self._open) {
          self.close();
        }
      });
    if (!this._parentPage && this.options.display !== "overlay") {
      this._on(this.document, {
        "pageshow": function() {
          this._openedPage = null;
          this._getWrapper();
        }
      });
    }
    // Clean up open panels after page hide
    if(stayAlwaysOpen) return;
    if (self._parentPage) {
      this.document.on("pagehide", ":jqmData(role='page')", function() {
        if (self._open) {
          self.close( true );
        }
      });
    } else {
      this.document.on("pagebeforehide", function() {
        if (self._open) {
          self.close( true );
        }
      });
    }
  }
});

function scalePanelToContent() {
  var screenH = $.mobile.getScreenHeight();
  var headerH = $(".ui-header").outerHeight() - 1;
  var footerH = $(".ui-footer").outerHeight() - 1;
  var panelH = screenH - headerH - footerH;
  $(".ui-panel").css({
    "top": headerH,
    "bottom": footerH,
    "min-height": panelH
  });
}

$(document).ready(function() {

  $("[data-role='header'], [data-role='footer']").toolbar({
    theme: "a",
    position: "fixed",
    tapToggle: false
  });

  $("#nav-panel").panel({
    theme: "b",
    display: "overlay",
    position: "left",
    positionFixed: true,
    swipeClose: false,
    dismissible: false
  }).enhanceWithin();

  $("#nav-panel").on("panelbeforeopen", function(event, ui) {
    scalePanelToContent();
    $(".ui-content").animate({
      "margin-left": "17em"
    }, 300, "swing");
  });

  $("#nav-panel").on("panelbeforeclose", function(event, ui) {
    $(".ui-content").removeClass("panel-shrink").animate({
      "margin-left": "0"
    }, 300, "swing", function() {
      $(this).removeAttr("style");
    });
  });

  scalePanelToContent();
});

$(window).on("resize", function() {
  scalePanelToContent();
});


$(document).on("pagecontainerbeforeshow", function(e, ui) {
  var isPanelOpen = $("#nav-panel").hasClass("ui-panel-open");
  $(".ui-content").toggleClass("panel-shrink", isPanelOpen);
});

.panel-shrink {
  margin-left: 17em !important;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div data-role="header">
    <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
    <h2>Header</h2>
  </div>
  <div data-role="footer">
    <h2>Footer</h2>
  </div>

  <div data-role="page" id="page-1">
    <div data-role="content">
      <form>
        <fieldset data-role="controlgroup">
          <legend>Vertical:</legend>
          <input name="checkbox-v-2a" id="checkbox-v-2a" type="checkbox">
          <label for="checkbox-v-2a">One</label>
          <input name="checkbox-v-2b" id="checkbox-v-2b" type="checkbox">
          <label for="checkbox-v-2b">Two</label>
          <input name="checkbox-v-2c" id="checkbox-v-2c" type="checkbox">
          <label for="checkbox-v-2c">Three</label>
        </fieldset>
      </form>
    </div>
  </div>
  <div data-role="page" id="page-2">
    <div data-role="content">
      <ul data-role="listview" data-inset="true">
        <li><a href="#">Acura</a></li>
        <li><a href="#">Audi</a></li>
        <li><a href="#">BMW</a></li>
        <li><a href="#">Cadillac</a></li>
        <li><a href="#">Ferrari</a></li>
      </ul>
    </div>
  </div>
  <div data-role="page" id="page-3">
    <div data-role="content">
      Page 3
    </div>
  </div>
  <div data-role="panel" id="nav-panel">
    <ul data-role="listview">
      <li><a href="#page-1">Link #1</a>
      </li>
      <li><a href="#page-2">Link #2</a>
      </li>
      <li><a href="#page-3">Link #3</a>
      </li>
    </ul>
  </div>

</body>

</html>

最后一点提示：

您可以在滑动事件中使用相同的 stayAlwaysOpen 标志，以便面板在移动设备和桌面浏览器中保持相同的行为，对于较小的 window 尺寸也是如此。

jQuery-移动端外面板始终在页面间打开

jQuery-Mobile external Panel always open among pages

html

javascript

jquery

jquery-mobile

page_home

page_download

page_kodi