logo标签列表

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

javascriptjqueryjquery-mobile
3

我正在开发一个应用程序，需要在选中某些内容时从底部滑出面板。我在jquery mobile slide panel中看到可以将位置设置为左侧或右侧，但如何设置到底部呢？

当用户从地图中选择某些内容时，我希望它能从底部向上滑动。 - Seth
2
请看我的问题，如果有帮助的话： https://dev59.com/VmQn5IYBdhLWcg3wETk5 - Muath
3个回答
3

请查看https://github.com/jquery/jquery-mobile/pull/5770

不幸的是，arschmitz说：

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

2
创建一个自定义面板作为一个盒子，将其放置在内部盒子的下方100%，以启用滚动。或者使用Iscroll插件进行滚动。
演示：

http://jsfiddle.net/7pttcgvw/

Jquery（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;
}
1
使用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提供的正确解决方案。这是一个面板，另一个带有盒子的不是面板。 - Peter Wraae Marino
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接