Jquery-mobile diapositive dans le menu de la solution

Hi im essayant de construire une application phonegap à l'aide de jquery mobile.
je voudrais créer une diapositive dans le menu comme dans le facebook de l'application.

j'ai beaucoup cherché mais tous les plugins ou les solutions sont vieux et certains même ne fonctionnent pas dans les démos.
toutes les suggestions comment faire? l'idée est qu'il doit y avoir un bouton sur le côté gauche de l'en-tête de jquery mobile de la page, une fois pressé, il glisse dans le menu de gauche simultanément poussant la page sur le côté droit.

OriginalL'auteur HellOfACode | 2012-10-25

  1. 12

    Avez-vous essayé ceci:

    Facebook Style De Menu Coulissant

    aussi, le JQM popup peut être utilisé comme un menu coulissant:

    Jquery Mobile Popup SideMenu

    Deux qui devrait très bien faire ce dont vous avez besoin.

    Facebook style de menu coulissant a très bien fonctionné, sauf que c'est à l'aide de jquery mobile 1.0rc2, et la version actuelle est la version 1.2.0. Il n'a pas de style correctement si vous passez à la nouvelle version. Aucune idée pourquoi pas?
    JQM est sur la bêta 1.3, et comprend un panneau de widget qui est le même que Facebook menu panneaux>

    OriginalL'auteur

  2. 9

    J'ai récemment eu besoin de faire exactement la même chose. Voici le code que j'utilise pour un exemple simple:

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

    Pour plus d'info voici un post de blog: http://www.objectpartners.com/2013/05/13/adding-a-sliding-menu-to-your-jquery-mobile-app/

    Voici une Démo: http://jsfiddle.net/nateflink/NWHjB/

    Un gentil... Mais est-il possible que je peux changer le bouton de Menu de sélection verticale? Actuellement, je suis confronté à certains problèmes lorsque je tente de modifier le CSS. Pouvez-vous m'aider s'il vous plaît?

    OriginalL'auteur

  3. 0

    Utiliser jQuery Panneaux... inclus avec jQuery.

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

    OriginalL'auteur

  4. 0

    Je pense que ce que vous cherchez un moyen rapide et simple. si je suis de droite, vous devez utiliser cette jquery mobile de démonstration il a expliqué le positionnement et tout le reste u pourriez avoir besoin, si vous voulez qu'il soit parfait, il vous suffit de combiner cette démo avec cette une

    second explique comment avoir un côté curseur à l'aide de balayage.

    je les ai utilisés pour mon app phonegap espère que vous aussi.

    Merci, fonctionne pour moi

    OriginalL'auteur