如何使用 Jquery Mobile Slide Panel 从底部向上滑动？答案

【问题标题】：How do I use Jquery Mobile Slide Panel to slide up from the bottom?如何使用 Jquery Mobile Slide Panel 从底部向上滑动？
【发布时间】：2022-02-07 21:21:12
【问题描述】：

我正在使用一个应用程序，我需要一个面板才能在选择某些内容时从底部滑动。我在 jquery 移动滑动面板中看到您可以将位置设置为左或右，但是您如何设置为底部？

【问题讨论】：

当他们从地图中选择某些东西时，我只想让它从底部向上滑动。
看我的问题如果这有帮助stackoverflow.com/questions/17131815/…

标签： javascript jquery jquery-mobile

【解决方案1】：

见https://github.com/jquery/jquery-mobile/pull/5770

不幸的是，阿施米茨说：

由于我们对面板所做的更改，这里存在许多冲突。虽然喜欢这个功能，并且很想尝试在 1.5 版本中实现这一点，我将关闭这个 PR，只是因为它现在已经过时了，但是希望与您合作，希望在下一个版本中实现它

【讨论】：

【解决方案2】：

将自定义面板创建为一个框，并将其 100% 放置在带有内框的位置下方以启用滚动。或者使用 Iscroll 插件进行滚动。

演示

http://jsfiddle.net/7pttcgvw/

jQuery

$(function() {

    $('#openpanel').click(function(){
            $('#box').animate({'bottom':'0'},300);
        });

    $('#close').click(function(){
        $('#box').animate({'bottom':'-100%'},300)        
    });

});

CSS

.box{
position:fixed;
bottom:-100%;
left:0%;
height:100%; 
background-color: #DBDBDB;
width: 17em;
display: block;
z-index:999999;
}

.box-inner {
    position: absolute;
    width:100%;
    top: 0px;
    bottom: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

【讨论】：

【解决方案3】：

使用 jQuery Mobile v1.4.5 创建底部覆盖面板。

.ui-panel-display-overlay[data-position="bottom"] {
  top: auto;
  bottom: 0px;
  width: 100% !important;
  height: auto !important;
  min-height: auto;
}
.ui-panel-animate.ui-panel-display-overlay[data-position="bottom"] {
  right: 0;
  -webkit-transform: translate3d(0, 100vh, 0);
  -moz-transform: translate3d(0, 100vh, 0);
  transform: translate3d(0, 100vh, 0);
}
.ui-panel-display-overlay[data-position="bottom"].ui-panel-display-reveal,
.ui-panel-display-overlay[data-position="bottom"].ui-panel-open {
  bottom: 0;
}
.ui-panel-animate.ui-panel-open.ui-panel-display-overlay[data-position="bottom"] {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -moz-transform: none;
}

<link rel="stylesheet" href="https://demos.jquerymobile.com/1.4.5/css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="https://demos.jquerymobile.com/1.4.5/_assets/css/jqm-demos.css">
<script src="https://demos.jquerymobile.com/1.4.5/js/jquery.js"></script>
<script src="https://demos.jquerymobile.com/1.4.5/_assets/js/index.js"></script>
<script src="https://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
<body
<div data-role="page" class="jqm-demos jqm-panel-page" data-quicklinks="true">
  <div role="main" class="ui-content jqm-content">
    <a href="#bottompanel1" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-btn-mini">Overlay</a>
  </div>
</div>
<!-- bottompanel1 -->
<div data-role="panel" id="bottompanel1" data-position="bottom" data-display="overlay" data-theme="a">
  <h3>Bottom Panel: Overlay</h3>
  <p>This panel is positioned at the bottom with the overlay display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
  <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
  <a href="#demo-links" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left ui-btn-inline">Close panel</a>
</div>
<!-- /bottompanel1 -->
</body>

【讨论】：

这是@john 的正确解决方案。这是一个面板，另一个带框的不是面板。