jQuery-mobile coulissant menu d'en-tête

Je viens de m'inscrire en jQuery mobile, et vu la prochaine exemple

Est-il possible de faire la coulissantes menu apparaît sous l'en-tête? (dans les lignes rouges sur l'image)

jQuery-mobile coulissant menu d'en-tête

un code s'il vous plaît? Peut-être un violon? 🙂
Voici un lien vers mon blog original qui a le violon et le tutoriel: objectpartners.com/2013/05/13/...

OriginalL'auteur NickF | 2013-06-10

  1. 12

    Remplacer .ui-panel style en changeant top position et min-height valeurs

    Démo

    Calculer l'en-tête de .outerHeight() et du comité .height().

    var header = $('[data-role=header]').outerHeight(); 
var panel = $('.ui-panel').height();

    Donner un nouveau min-height afin de ne pas causer de page pour faire défiler

    var panelheight = panel - header;

    Remplacer le panneau de style

    $('.ui-panel').css({
    'top': header,
    'min-height': panelheight
});

    OriginalL'auteur Omar

  2. 2

    Il peut être fait encore mieux:

    Cela fonctionne pour la situation suivante:

    • : Panneau de data-display="push"
    • : Panneau de data-position="left"
    • En-tête: data-position="fixed"

    et de modifier le code css suivant les styles:

    .ui-panel {
    top: 41px;
    height: calc(100% - 41px);
}

.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

    La première consiste à déplacer le panneau un peu vers le bas de sorte qu'il se déplace sous l'en-tête tandis que le second rend l'en-tête de rester toujours à la place de la également le déplacement sur le côté.

    Je suppose que pour les différents Panel et Header paramètres d'une combinaison différente de classes CSS est utilisé. Vous aurez besoin de jouer avec cela.

    démo: http://jsbin.com/avuviy/2/

    OriginalL'auteur Tech-Junkie

  3. 1

    Avec l'excellente réponse de Omar, vous pourriez envisager ces options également comme une solution.

    • Vous utilisez le premier élément dans la listview comme un bouton pour fermer votre panneau. (Oui, les utilisateurs de l'amour quand vous ajoutez un bouton de fermeture, voir ce question). Juste ajouter une balise d'ancrage à l'intérieur dans le premier li élément et vous vous êtes fixés. 

      <li data-icon="false"><a href="#my-header" data-rel="close" data-icon="delete"></a></li>

    • Vous pourriez quitter cet endroit à être vide. (oui, je sais, les sons un peu boiteux, mais il l'habitude de nuire à votre design - de l'onu-obstrusive. Il suffit d'ajouter le vide h1 balise pour la première li:

      <li data-icon="false"><h1></h1></li>

    Voici une démo : http://jsbin.com/avuviy/1/edit

    +1 pour une lame de corrigé 😛 j/k
    Merci @omar sirji 🙂
    Bienvenue bhai 😉
    Hey @Omar, je suis en utilisant le code ci-dessus sa fonctionne bien.. mais je veux savoir comment faire. ce panneau défilant . mon contenu dans le panneau de exceding au-delà de l'écran que je veux faire c'scorllable .. merci de me dire comment résoudre
    Salut, merci de poster une question et d'ajouter des détails pour être en mesure de vous aider 🙂

    OriginalL'auteur krishgopinath