Maison > interface Web > js tutoriel > Résumé des problèmes rencontrés dans jquery.mobile common layout_jquery

Résumé des problèmes rencontrés dans jquery.mobile common layout_jquery

WBOY
Libérer: 2016-05-16 16:14:58
original
969 Les gens l'ont consulté

Un projet récent a utilisé jquery.mobile pour créer un affichage simple sur un téléphone mobile. Je ne connaissais que ce framework auparavant, mais je n'avais jamais joué avec.

Surtout en termes de liaison d'événements, par rapport au système de bureau, le navigateur est très inconfortable et ne comprend pas l'essentiel.

Comme indiqué ci-dessous, lorsque vous travaillez sur le système backend, le côté gauche est généralement rempli de modules et d'éléments de menu subordonnés, qui peuvent être développés et repliés.

Mon problème est bloqué dans les avis accumulés Afin de réutiliser la page, une iframe est intégrée dans les avis accumulés pour l'affichage des commentaires.

Le premier seuil

Les étudiants qui ont de l'expérience en développement WEB mobile doivent savoir que lorsqu'il y a trop de contenu dans l'iframe sous le navigateur IOS, la barre de défilement n'apparaîtra pas et le contenu semblera coupé.

Après avoir vérifié les informations, j'ai finalement compris. Après tout, l'écran du téléphone portable est petit lorsqu'il y a beaucoup de commentaires, il est impossible d'avoir une rangée de boutons qui tournent la page comme la page du navigateur de l'ordinateur. c'est vraiment mauvais.

De nos jours, le chargement progressif est généralement utilisé. Écrivez la DÉMO et exécutez-la d'abord sur l'ordinateur. J'ai changé de téléphone portable et je l'ai d'abord essayé avec un téléphone Android. Cela fonctionne, je pense que cela fonctionnera.

Le passage à l'iPhone n'a résolu que le problème de la barre de défilement, mais mon chargement par défilement est toujours là. J'ai glissé à plusieurs reprises et je n'ai toujours pas reçu de réponse, ce qui m'a glacé le cœur. Je veux dire quelque chose de bizarre ici. C'est autorisé dans QQ et WeChat.

Il n'y aura aucun résultat si vous continuez à le gaspiller comme ça, vous devriez donc trouver un autre moyen. La première idée a été de le faire sur une page séparée. Nous avons donc rencontré le deuxième seuil.

Copier le code Le code est le suivant :


                             

                                                                                                                                                                                                                            
  • Évaluations cumulées

  •                                                                                                                                                                                                                                

Ce qui précède correspond à la partie évaluation cumulative. Après avoir cliqué, le style de la page est complètement chamboulé et les événements js ne sont pas exécutés. En regardant le code avec f12, à l'exception des éléments html dans le corps, de la partie dans l'en-tête et du js en bas de la page, tous ont disparu.

Est-ce que tu vas être si stupide ? J'ai demandé à mes collègues s'ils avaient rencontré un tel problème. Ils m'ont dit que ce serait bien s'ils ajoutaient rel="external", mais cela n'a pas vraiment fonctionné. Le code devient donc le suivant :

                             

                                                                                                                                                                                                                            
  • Évaluation cumulative

  •                                                                                                                                                                                                                                


    Remarque : rel='external' est similaire à target=''_blank'', ce qui signifie ouvrir dans une nouvelle page
Le troisième seuil est le problème mentionné dans le titre (la photo de tête est l'effet final)

listview pliable Les deux partenaires sont incompatibles entre eux et ils ne peuvent pas obtenir un meilleur effet de mise en page. J'ai ajouté un pliable vide en bricolant et cela a fonctionné. Je les ai enfin réunis. L'icône pliable est par défaut , et l'élément listview est une flèche droite pour unifier les icônes. Par défaut, l'évaluation cumulée n'est pas celle indiquée dans l'image ci-dessus.

Copier le code

Le code est le suivant :

Ce problème a été résolu. La page complète est la suivante :

Copier le code

Le code est le suivant :

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
http://www.w3.org/1999/xhtml">

   
   
   
   
   
   
   
   
   
   


   

       

           
data-expanded-icon="arrow-u" data-collapsed-icon="arrow-d">
               

                   

医院介绍


                   


               

               

                   

套餐相关信息


                   


               

               

                   

使用须知


                   


               

               

                   

查看地图


                   


               

               

               

                                                                                                                                                                                                                      

                             

                                                                                                                                                                                                                            
  • Évaluation cumulative

  •                                                                                                                                                                                                                                                                                                                                                                                                                                            






Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal