page_home

Question

我试图四处寻找，但没有发现我能理解的相关主题。我一般不熟悉Javascript或编码。

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

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

链接：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>

数据可取消=＆＃34;＆＃34;我已经这样说了，因为当你用JS手动设置它时，它是什么有用，或者我已经读过了。如果我将其设置为false或true，则无效。

基本上我在这里尝试做的事情总是让面板在较大的屏幕上打开并关闭，并选择通过在较小的屏幕上滑动来打开它。这个工作截至目前。我遇到的麻烦是当更换页面时，面板不能按预期运行，当我从头版到另一页时关闭，但是如果我从另一页到另一页则不会关闭。

PS：我还将小组放在我的两个页面之间：

page_home

- 小组 - 一些弹出窗口

page_download

page_kodi

提前感谢您提供的所有帮助，并对文本墙感到抱歉。

Answer 1

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

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

为了保持标题导航并使面板更加愉悦，我还使用了来自jQuery mobile panel between header and footer的函数scalePanelToContent（来源：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标记，以便面板在移动设备和桌面浏览器中保持相同的行为，也适用于较小的窗口大小。

jQuery-Mobile外部面板总是在页面之间打开

page_home

page_download

page_kodi

1 个答案: