seboss666 Posté(e) le 9 mai 2013 Partager Posté(e) le 9 mai 2013 Bonsoir à tous, Je développe actuellement dans mon coin une petite application php/mysql pour gérer les dvd et blurays. Pour cette partie, tout va bien. Pour l'interface, après plusieurs tatonnages et ébauches histoire de développer la base, je me suis tourné vers jQuery Mobile, qui propose dans ses cartons d'afficher un panel latéral soit en cliquant sur un lien, soit avec un swipe (swiperight dans mon cas). Sauf que j'ai un souci, si le swipe fonctionne correctement sur une page classique, avec du texte simple, tout va bien. Par contre, si la page en question est une liste de liens (typiquement la liste des dix derniers films ajoutés à la base), le swipe ne veut pas fonctionner (le bouton continue son office, lui). Concrètement, là ça marche : <body> <div data-role="page" data-theme="b"><!-- Bloc du menu de gauche activable avec le bouton de la bannière --> <div data-role="panel" id="leftpanel" data-theme="b"> <form action="#" method="post"> <input type="text" name="titre" placeholder="Chercher un titre" /> <input type="submit" value="Rechercher" /> </form> <ul data-role="listview"> <li><a href="index.php">Derniers ajouts</a></li>(d'autres liens) </ul> </div> <!-- Panel --> <!-- Bannière affichant le titre de la page et le bouton qui découvre le menu --> <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b"> <a href="#leftpanel"><i class='icon-list'></i></a> <h1>Détail de Sherlock Holmes 2</h1> </div> <!-- header --><!-- Div globale (oui, c'est l'id) avec le contenu de la page --> <div id="global" data-role="content" data-theme="b"> <div class="inset"> <form action="#" method="post"> <ul data-role="listview" data-inset="true"> <li data-role="fieldcontain"> <h3>Année</h3> <p> 2011</p> </li> <li data-role="fieldcontain"> <h3>Type</h3> <p> Bluray</p> </li> <li data-role="fieldcontain"> <h3> Disponible</h3> </li> <li data-role="fieldcontain"> <h3>Date d'ajout</h3> <p> 09/05/2013</p> </li> </ul> <input type="submit" value="Modifier" /> </form> </div> <!-- #inset" --> </div> <!-- #global --> <script type='text/javascript'>$(document).on('pageinit',function(){ $("#global").on("swiperight",function(){ $("#leftpanel").panel( "open"); });});</script> Collect © Seboss666, 2013 </div><!-- #page --> </body> Et là, ça veut plus marcher : <body> <div data-role="page" data-theme="b"><!-- Bloc du menu de gauche activable avec le bouton de la bannière --> <div data-role="panel" id="leftpanel" data-theme="b"> <form action="#" method="post"> <input type="text" name="titre" placeholder="Chercher un titre" /> <input type="submit" value="Rechercher" /> </form> <ul data-role="listview"> <li><a href="index.php">Derniers ajouts</a></li> ... </ul> </div> <!-- Panel --> <!-- Bannière affichant le titre de la page et le bouton qui découvre le menu --> <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b"> <a href="#leftpanel"><i class='icon-list'></i></a> <h1>Derniers ajouts</h1> </div> <!-- header --><!-- Div globale (oui, c'est l'id) avec le contenu de la page --> <div id="global" data-role="content" data-theme="b"> <div class="inset"> <ul data-role="listview" data-inset="false" data-icon="false" data-divider-theme="b"> <li> <a href="http://"><h2>Sherlock Holmes 2</h2> <p class="ui-li-aside">09/05/2013</p> </a> </li>...(d'autres liens construits pareils)</ul> </div> <!-- #inset" --> </div> <!-- #global --> <script type='text/javascript'>$(document).on('pageinit',function(){ $("#global").on("swiperight",function(){ $("#leftpanel").panel( "open"); });});</script> Collect © Seboss666, 2013 </div><!-- #page --> </body> Alors soit j'ai merdé, soit ça veut pas marcher sur les liens (ce qui est tout à fait possible). J'ai beau avoir cherché tout seul, je sèche (même avec Google). Ou alors, est-ce qu'il y a moyen de contourner (je pense notamment à détecter l'event sur le header plutot que le global) ? Vous avez déjà eu le problème ? EDIT : je vais partiellement m'auto répondre, ça fonctionne quand je concentre l'attention sur la bannière, mais l'idée c'est de pouvoir swipe n'importe où, donc la question reste valable, à savoir pourquoi ça marche pas sur les liens ? Lien vers le commentaire Partager sur d’autres sites More sharing options...
maximeK Posté(e) le 14 mai 2013 Partager Posté(e) le 14 mai 2013 Salut seboss666, Alors déja il y a des petits truc qui pique les yeux :) <li> <a href="http://"><h2>Sherlock Holmes 2</h2> <p class="ui-li-aside">09/05/2013</p> </a></li> Bon le href ... surement un oublie pour cacher tes liens mais après ^^ Le <h2> ne doit pas être englobé dans une balise <a>. Tu ne doit pas mettre de balise <p> dans une balise <a> mais plutôt un span, après sa marche mais comme JQM reskin tes éléments et rajoute des spans de partout ca deviens vite nimp. Noublie pas tes data-role pour tes liens <a> Pour ton swipe met le plutot sur ta page <div data-role="page"> Après ca reste une appli web mobile rien a voir avec une appli résidente ( check cordova phonegap si tu veux faire une appli web en résidente ) regarde ici sinon : http://eightmedia.github.io/hammer.js/ http://blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/ Lien vers le commentaire Partager sur d’autres sites More sharing options...
seboss666 Posté(e) le 14 mai 2013 Auteur Partager Posté(e) le 14 mai 2013 En fait, je me suis basé sur les exemples fourni par le développeur du thème pour les balises. Mais l'exemple du panel n'utilise pas de listes de lien comme contenu d'exemple : <li><img src="http://www.placehold.it/150x150"><h2><a href='#'>Linked Title</a></h2><p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p><p class="ui-li-aside"><strong>9:18</strong>AM</p></li> Concernant l'event sur "page", il est déconseillé de le mettre pour éviter les comportements étranges (genre swipe sur le panel une fois déployé, mais j'ai pas testé du coup). Je pourrais mettre quoi comme data-role sur les liens ? (vraie question, comme ça marche comme ça, j'ai pas cherché plus loin) Je cherche simplement à ce que ça soit utilisable sur tout et n'importe quoi (en pratique au moins mes appareils, dans l'absolu tout ce qui a un navigateur récent, j'ai testé ça marche même sur la Xbox ). J'ai déjà suffisamment de mal à faire le code actuel (un vrai développeur trouverait certainement une blinde à redire), alors je vais pas forcer pour l'instant :) PS : Merci pour la réponse Lien vers le commentaire Partager sur d’autres sites More sharing options...
Messages recommandés
Archivé
Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.