【问题标题】: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 移动滑动面板中看到您可以将位置设置为左或右,但是您如何设置为底部?

【问题讨论】:

标签: 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 的正确解决方案。这是一个面板,另一个带框的不是面板。
      猜你喜欢
      • 1970-01-01
      • 2012-08-27
      • 1970-01-01
      • 2015-10-04
      • 1970-01-01
      • 2021-10-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多