发表新帖
发表新帖

Jquery-mobile slide in menu solution

后端 未结
关注
4 769
暗喜
暗喜 2021-02-04 11:11

Hi im trying to build a phonegap application using jquery mobile. i would like to create a slide in menu like in the facebook application.

i have searched a lot but all

相关标签:
4条回答
  • 庸人自扰
    2021-02-04 11:58

    I recently needed to do the exact same thing. Here is the code I use for a simple example:

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

    For more detailed info here is a blog post: http://www.objectpartners.com/2013/05/13/adding-a-sliding-menu-to-your-jquery-mobile-app/

    Here is a Demo: http://jsfiddle.net/nateflink/NWHjB/

    0 讨论(0)
  • 予麋鹿
    2021-02-04 11:59

    Use jQuery Panels... included with jQuery.

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

    0 讨论(0)
  • 情深已故
    2021-02-04 12:03

    Have you tried this:

    Facebook Style Slide Out Menu

    also, the JQM popup can be used like a slide out menu:

    Jquery Mobile Popup SideMenu

    Both of which should pretty much do what you need.

    0 讨论(0)
  • 不要未来只要你来
    2021-02-04 12:16

    I think what your looking for is fast and easy way. if I'm right you should use this jquery mobile demo it explained the positioning and everything else u might need, if you want it to be perfect just combine that demo with this one

    second one explained how to have a side slider using swipe.

    i used them both for my phonegap app hope you do too.

    0 讨论(0)
 看不清?
提交回复
热议问题