Cordova Jquery移动滑入菜单解决方案_Cordova_Jquery Mobile

Cordova Jquery移动滑入菜单解决方案

cordova jquery-mobile

Cordova Jquery移动滑入菜单解决方案,cordova,jquery-mobile,Cordova,Jquery Mobile,嗨，我正在尝试使用jquery mobile构建一个phonegap应用程序。我想创建一个类似于facebook应用程序的滑入菜单我搜索了很多，但所有的插件或解决方案都是旧的，有些甚至在演示中不起作用。有什么建议吗？其想法是，当按下jquery mobile页面标题左侧的按钮时，它会在菜单中从左侧滑动，同时将页面推到右侧。您是否尝试过以下方法：此外，JQM弹出窗口可以像滑出菜单一样使用：这两种方法都可以满足你的需要。我最近也需要做同样的事情。下面是我用于一个简单示例的代码： <

嗨，我正在尝试使用jquery mobile构建一个phonegap应用程序。我想创建一个类似于facebook应用程序的滑入菜单

我搜索了很多，但所有的插件或解决方案都是旧的，有些甚至在演示中不起作用。有什么建议吗？其想法是，当按下jquery mobile页面标题左侧的按钮时，它会在菜单中从左侧滑动，同时将页面推到右侧。

您是否尝试过以下方法：

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

这两种方法都可以满足你的需要。

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

<!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>


计算机世界
/*此块应该放在styles.css文件中*/
.ui面板内部{
填充：0px；/*使按钮边到边齐平*/
}
.ui控制组{
边距：0；/*使按钮与顶部齐平*/
}
#标题{
高度：54px；
}
#条形按钮{
利润率：7px；
}

有关更多详细信息，请参阅以下博客：

下面是一个演示：

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

我想你要找的是快速简便的方法。如果我是对的，你应该用它来解释定位和其他你可能需要的东西，如果你想它是完美的，就把演示和

第二个解释了如何使用侧滑滑动

我的phonegap应用程序也使用了这两个选项。

Facebook风格的滑出菜单效果非常好，只是它使用的是jquery mobile 1.0rc2，当前版本是1.2.0。如果切换到新版本，则样式不正确。你知道为什么吗？JQM是1.3beta版的，包括一个面板小部件，它与Facebook菜单一样漂亮。。。但是有没有办法把菜单按钮改成垂直省略号？目前，当我试图修改CSS时，我面临一些问题。你能帮帮我吗？