菜单解决方案中的Jquery-mobile幻灯片

Question

菜单解决方案中的Jquery-mobile幻灯片

Hel*_*ode 11 jquery-mobile cordova

您好我试图使用jquery mobile构建一个phonegap应用程序.我想在facebook应用程序中创建菜单中的幻灯片.

我搜索了很多,但所有的插件或解决方案都很旧,有些甚至不在演示中工作.有什么建议怎么做？我的想法是在jquery移动页面的标题左侧应该有一个按钮,当按下它时,它从左侧滑动菜单,同时将页面推到右侧.

Answer 1

fre*_*ent 12

你试过这个:

Facebook风格滑出菜单

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

Jquery Mobile Popup SideMenu

这两者都应该做你需要的.

JQM在1.3beta上,包括一个面板小部件,与Facebook菜单[面板]相同(http://jquerymobile.com/test/docs/panels/index.html) (7认同)

Answer 2

Nat*_*ink 9

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

归档时间：	13 年，2 月前
查看次数：	53250 次
最近记录：	8 年，11 月前