web-dev-qa-db-fra.com

Jquery-mobile slide in solution de menu

Salut, je suis en train de créer une application phonegap utilisant jquery mobile . Je voudrais créer une diapositive dans le menu comme dans l'application facebook.

j'ai beaucoup cherché, mais tous les plugins ou solutions sont anciens et certains ne fonctionnent même pas dans les démos . des suggestions comment faire cela? L'idée est qu'il doit y avoir un bouton sur le côté gauche de l'en-tête d'une page JQuery Mobile. Lorsque vous appuyez dessus, il se glisse dans le menu du côté gauche en poussant simultanément la page vers le côté droit.

cordovajquery-mobile
11
HellOfACode

Avez-vous essayé ceci:

Menu Facebook Style Slide Out

de plus, la fenêtre contextuelle JQM peut être utilisée comme un menu déroulant:

Menu contextuel Jquery Mobile Popup

Tous deux devraient faire ce dont vous avez besoin.

12
frequent

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'informations, voici un article 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/

9
Nate Flink

Je pense que ce que vous cherchez est un moyen simple et rapide. si je ne me trompe pas, vous devriez utiliser cette démo jquery mobile il explique le positionnement et tout ce dont vous pourriez avoir besoin, si vous voulez qu’il soit parfait, combinez simplement cette démo avec celui-ci

le second explique comment utiliser un curseur latéral en utilisant un balayage.

je les ai utilisés tous les deux pour mon application phonegap, j'espère que vous aussi.

0
pouya

Utilisez les panneaux jQuery ... inclus avec jQuery.

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

0
EddieB