Jquery-手机滑动菜单面板+滚动-6ren

Jquery-手机滑动菜单面板+滚动

转载作者：行者123 更新时间：2023-12-01 02:43:16

25

4

我是 jQuery Mobile 新手。我需要向我的应用程序添加 Facebook 滑动面板功能。

我经历了 sliding menu panel ，它工作正常，但我在菜单面板中的内容超出了窗口大小，我想让它可滚动。

请告诉我如何修复它。

代码引用

<!DOCTYPE html>
<html>
<head>
<title>FB Style Menu</title>
<meta id="extViewportMeta" name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<style>
    .ui-panel-inner {
    overflow: hidden !important;
    padding: 0px;
}
.ui-controlgroup {
    margin: 0;
}
#header {
    height: 54px;
}
#bars-button {
    margin: 7px;
}
.panel-content {
    overflow-y: scroll !important
}
</style>

<script>
    $(document).on('pageshow', '#home', function(event) {
        alert("init");
    init(); //$.mobile.hidePageLoadingMsg();    
    });    
    function init() {    
        var header = $('[data-role=header]').outerHeight();
        var panel = $('.ui-panel').height();
        var panelheight = panel - header;
        $('.ui-panel').css({
            'top' : header,
            'min-height' : panelheight
        });    
    }
</script>
</head>
<body>
<div data-role="page" id="home" data-theme="b">
    <div data-role="panel" id="navpanel" data-theme="a" data-display="overlay" data-position="right">
        <div class="panel-content">
            <div data-role="controlgroup" data-corners="false"> <a href="#" data-role="button">Business</a>
                <a href="#" data-role="button">Numbers</a>
                <a href="#" data-role="button">Money</a>
                <a href="#" data-role="button">People</a>
                <a href="#" data-role="button">Business</a>
                <a href="#" data-role="button">Numbers</a>
                <a href="#" data-role="button">Money</a>
                <a href="#" data-role="button">People</a>
                <a href="#" data-role="button">Business</a>
                <a href="#" data-role="button">Numbers</a>
                <a href="#" data-role="button">Money</a>
                <a href="#" data-role="button">People</a>
            </div>
        </div>
    </div>
<div id="header" data-role="header" data-theme="b"> 
    <a id="bars-button" data-icon="bars" class="ui-btn-right" style="margin-top:10px;" href="#navpanel">Menu</a>


<!-- /About -->
</div>
</body>
</html>

最佳答案

在我看来，jQuery Mobile 的滑动面板(类似 FB)还没有准备好。我在固定导航栏和固定页脚方面遇到了一些问题。这就是为什么我开始寻找更好的替代方案来解决这个问题。

以下是我找到的一些链接:

我知道它不能解决你的问题，但它可能对你 future 的发展有所帮助:)

关于Jquery-手机滑动菜单面板+滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18739240/

25

4

0

文章推荐： jquery - $(this) 在函数中不起作用？

文章推荐： python - 检查json对象中的路径是否存在？

文章推荐： jQuery，使下拉菜单在单击其他地方时隐藏

文章推荐： python - 在 azure 存储上创建连接时如何处理错误

javascript - 面板 : Both glyphicons toggle when inner panel is clicked 中的 Bootstrap 面板
我有一个 Bootstrap 面板，里面有另一个面板。两者在面板标题中都有一个字形图标。默认情况下，面板是折叠的。当面板折叠时，将设置 glyphicon-unchecked。当我点击这个字形图标时，
Grafana 自动刷新仪表板布局/面板？
使用 Grafana 时，我们会在某些电视上使用它。有谁知道制作它的方法，如果有人添加面板，更改布局等，它不仅会自动刷新数据，还会自动刷新实际仪表板？我们真的厌倦了不断要求具有远程访问权限的人登录并
java - java中的隐藏标签/面板
基本上，我试图让屏幕底部有 3 个按钮，然后在屏幕中间有一个包含文字的标签。但是，我似乎无法同时在 GUI 中同时拥有按钮和标签。我是一名初学者，对布局了解不多(即使我已经阅读过它们)，因此任何帮助/
java - 面板/按钮和重新绘制令人头痛
作为学校的类(class)作业，我们必须提出一个自定义项目，我选择了一个原本打算在 ActionScript 上编写的游戏创意，但决定在 Java 上插入它。最初进展顺利，游戏代码正常运行， Spri
Java 面板/框架图形不工作
我正在尝试使用 Java Graphics 制作一个生命模拟游戏，但是当运行我的代码时，屏幕的左侧三分之一是灰色的。我希望整个屏幕是白色的，黑色方 block 代表生命方 block 。我对所有 ja
javascript滑动(侧)面板
下面是动态驱动的一个不错的“下拉面板”。 http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm 如您所见，它是一个面板，在打开时
javascript - 只打开一个弹出窗口(面板)
所以我有这个函数 onDisplayError ，如果请求失败，每次都会调用它。这意味着如果用户按下保存按钮并且 3 个请求失败，我当前会收到 3 个弹出消息。我的目标是此函数检查我的弹出窗口是否已打
Java GUI 面板
我正在尝试为我的一个类(class)制作一款游戏，但在实现一些我想做的事情时遇到了麻烦。本质上，我希望在同一个图形用户界面窗口中包含多个不同的部分。据我了解，我会使用 JPanel 来创建这些不同的
Jquery 面板 + 从顶部检测滚动？
我目前正在测试这种类型的面板 jquery: http://codyhouse.co/gem/css-slide-in-panel/ 但是当我想检测从顶部滚动以显示一个 div 时:没办法:( 一种检
c# - 面板——滚动条可见事件
我可能正在搜索错误的问题，但我找不到这个问题的答案。我有一个 AutoScroll 设置为 true 的面板。控件动态添加到面板。我需要在滚动条可见时触发一个事件，但我找不到这样的事件。如有任何建
html - 通过连接器连接 Bootstrap 面板
我有一堆 Bootstrap 面板，其中一些是相互关联的。有点像 Panel A -> Panel B -> Panel C 当用户单击面板 B 时，将显示面板 C，当单击面板 C 时，将显示面板 D
panel - 根据选定的模板变量隐藏 grafana 面板
我正在尝试开发一种带有指标的下拉列表，并相应地针对应该出现在仪表板上的选定指标特定面板。反之亦然，如果未选择指标，则面板应隐藏。我找到了链接 http://search-devops.com/m/k
dynamic - ExtJs 面板 - 添加动态组件
我有一个窗口，窗口里面有面板。我动态地向面板添加组件。这些组件采用“hbox”布局，以便它们水平排列。单击按钮后，我将在“hbox”布局中再向面板添加一行类似组件。这里的问题是我想在第一行下面添加第二
jquery - 展开验证错误时的 Accordion 面板
我使用 jQuery Accordion 将表单拆分为多个面板，并使用 jQuery 验证来检查所需字段。只要验证字段位于打开的面板中，它就可以很好地显示已验证字段中的错误。举个例子。假设我有三个
jQuery Mobile 面板 - 检查它是否打开
我正在尝试检查我的面板是打开还是关闭。我尝试过这样的: $(document).on('open', '.ui-panel', function(){ console.log('open');
macos - 如何制作在全屏模式下消失的 float 面板
我有一个面板，我想将其 float 在所有窗口之上并出现在所有空间中。这可以通过轻松完成 [self.panel setLevel:kCGUtilityWindowLevel]; [self.win
r - 具有分组回归线的叠加 xyplot 面板
我想在格子中的单个面板上叠加多个组，并且想要独立的回归线。获得多个面板相当容易，每个面板都有一条使用条件因子的回归线: xyplot( Petal.Width ~ Petal.Length |
Delphi:滑动(动画)面板
Delphi 有滑动(动画)面板组件吗？例如可以在 Raize Components 中找到它(带有“热点”或隐藏/显示按钮的左侧面板)。我不需要一个可调整大小的面板，而是一个可以从左向右水平平滑
javascript - 验证事件的 Accordion 面板
我有一个 Bootstrap Accordion : 我想禁用非事件面板中的所有输入控件。仅验证事件面板。我有一个检测事件选项卡的功能: $(".panel").on("show.bs.collap
java - 不同尺寸的 Swing 面板
我正在尝试将组件放入不同尺寸的面板中。但是，我意识到 GridLayout 将大小相同的部分分开。如何实现如下图所示 enter image description here import java.

首页

博学

6Ren·AI

Jquery-手机滑动菜单面板+滚动