jquery-mobile 滑动菜单解决方案答案

【问题标题】：Jquery-mobile slide in menu solutionjquery-mobile 滑动菜单解决方案
【发布时间】：2012-10-25 08:43:41
【问题描述】：

您好，我正在尝试使用 jquery mobile 构建 phonegap 应用程序。我想在 facebook 应用程序中创建一个菜单幻灯片。

我搜索了很多，但所有的插件或解决方案都是旧的，有些甚至在演示中不起作用。任何建议如何做到这一点？这个想法是在jquery移动页面的标题左侧应该有一个按钮，当按下它时，它会从左侧在菜单中滑动，同时将页面推到右侧。

【问题讨论】：

标签： cordova jquery-mobile

【解决方案1】：

你试过了吗：

Facebook Style Slide Out Menu

此外，JQM 弹出窗口可以像滑出菜单一样使用：

Jquery Mobile Popup SideMenu

两者都应该满足您的需求。

【讨论】：

Facebook 风格的滑出菜单运行良好，除了它使用的是 jquery mobile 1.0rc2，当前版本是 1.2.0。如果您切换到新版本，则样式不正确。知道为什么不？
JQM 是 1.3beta 版，包括一个与 Facebook 菜单相同的面板小部件panels

【解决方案2】：

我最近需要做同样的事情。这是我用于一个简单示例的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Computer World</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <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>
        /*this block should go in the styles.css file*/
        .ui-panel-inner {
            padding:0px; /*make the buttons flush edge to edge*/
        }
        .ui-controlgroup {
            margin:0; /*make the buttons flush to the top*/
        }
        #header {
            height:54px;
        }
        #bars-button {
            margin:7px;
        }
    </style>
</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 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>
        </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>
    </div>
</div>
</body>
</html>

有关更多详细信息，请参阅博客文章：http://www.objectpartners.com/2013/05/13/adding-a-sliding-menu-to-your-jquery-mobile-app/

这是一个演示：http://jsfiddle.net/nateflink/NWHjB/

【讨论】：

不错...但是有什么方法可以将菜单按钮更改为垂直省略号？目前，当我尝试修改 CSS 时，我遇到了某些问题。你能帮帮我吗？

【解决方案3】：

使用 jQuery 面板...包含在 jQuery 中。

http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/index.html

【讨论】：

【解决方案4】：

我认为您正在寻找的是快速简便的方法。如果我是对的，您应该使用this jquery mobile demo 它解释了定位和您可能需要的所有其他内容，如果您希望它完美，只需将该演示与this one 结合使用

第二个解释了如何使用滑动来设置侧边滑块。

我将它们都用于我的 phonegap 应用程序，希望你也这样做。

【讨论】：