jQuery Girl
  1. jQuery Girl
  3. jQuery Mobile Scrollview
Intereting Posts
Soumettre un formulaire sans bouton de soumission et sans rafraîchissement de la page? Comment centrer un div relatif horizontalement en utilisant jQuery sur le redimensionnement de la fenêtre? Y a-t-il des différences entre ‘et “ Comment effectuer une demande Ajax auprès de CouchDB (http: // .couchone.com /) Carrousel de hibou et onglet bootstrap sur une page Remplir une table à partir de JSON avec jQuery Supprimer tous les éléments après un index Emberjs ne chargera pas jquery / javascript, exécutez le code lorsque html est inséré dans la page comment changer la couleur de fond d’une page externe chargée dans iframe AngularJS et le plugin jQuery après le rendu Éditeur de texte et position du curseur pouvant être modifiés changer le focus en particulier div Comment accédez-vous à un atsortingbut de modèle dans jQuery? Est-ce possible Webmasortingx CRUD dans la même page en utilisant Ajax Javascript / JQuery exécute cette fonction lorsque l’utilisateur fait défiler l’écran vers le bas de la page

jQuery Mobile Scrollview

J’essaie donc de faire une liste déroulante: 

 
       
  •  
     
     
       
     
    •

inclus dans: tag

J’utilise les scripts suivants:

http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.js

http://jquerymobile.com/test/experiments/scrollview/scrollview.js

En plus de jqm et jq. Le problème est que sur le PC, le défilement ne fonctionne pas (mais ce n’est pas si grave), mais sur iPad, tout le site défile en plus de listview. L’utilisateur peut également faire défiler SUR le site et voir le bg gris, jusqu’à ce que le safari cesse de défiler.

EDIT: De plus, ces 2 JS font que la fonction jQuery ‘toggleClass ()’ ne fonctionne pas.

Je viens de terminer l’implémentation de cela sur Android (2.2 et 3.2) et sur iphone (pas d’ipad) pour que scrollview fonctionne correctement; vous devez inclure le fichier css et le script d’accélération de jquery .

Les scripts doivent être inclus dans cette commande:

  1. jquery
  2. jquery.mobile
  3. jquery.easing
  4. jquery.mobile.scrollview
  5. scrollview

Le fichier css vous donne les barres de défilement, jquery.easing donne une animation fluide (un projet impressionnant par lui-même), jquery.mobile.scrollview fait le gros du travail, scrollview gratte la page et ajoute suffisamment de balises pour que le scrollview puisse prendre le dessus.

Je suis sûr que je n’ai pas besoin de vous dire que c’est «expérimental» pour une raison (comportement étrange lors du défilement dans une liste, cela empêche également de cliquer sur les boutons et dans les zones de texte du navigateur Chrome – je ne sais pas ». t testé d’autres navigateurs), cependant, j’ai trouvé très peu de problèmes avec cela sur les appareils mobiles. J’aime beaucoup le fait que cela me permette de garder les tabs en haut de la page tout le temps. L’imbrication de nombreuses vues de défilement est également intéressante.

Je ne peux pas dire que j’ai remarqué des problèmes avec la fonction toggleClass, cependant cela pourrait avoir quelque chose à voir avec scrollview et l’ajout de balises.

REMARQUE: à compter de la version la plus récente de jQuery mobile rc2, les boutons et les entrées de texte devraient fonctionner.

MODIFIER

À partir de jQuery Mobile 1.1.0, il est recommandé d’utiliser les en- têtes fixes en utilisant l’atsortingbut data-position="fixed" dans l’en-tête (ou le pied de page) et de supprimer complètement scrollview.

Je l’ai essayé moi-même et cela fonctionne beaucoup mieux (pour Android 2.2+ et iOS5 – BlackBerry OS n’a pas été testé par moi, mais le blog affirme que cela devrait fonctionner pour BB7). Il est plus rapide et plus fluide que la solution js et présente moins de bugs graphiques. Assurez-vous de supprimer tous les fichiers js, css et toutes les références supplémentaires à data-scroll car ils interfèrent / cassent tout.

Pour les versions non sockets en charge et les systèmes d’exploitation, vous aurez peut-être toujours besoin de scrollview js / css, etc., mais d’après mon expérience, les emplacements qui ne prennent pas en charge les en-têtes fixes étaient trop lents pour exécuter la version js de toute façon.

Beau fil ici, tiens à consortingbuer une petite note:

Si vous souhaitez que les zones grises de Safari disparaissent dans les pages de jQuery Mobile lorsque vous les faites défiler, vous pouvez utiliser: 

 document.ontouchmove = function(e){ e.preventDefault(); }

Plus important encore, cela vous permettra de travailler plus efficacement avec des bases de données hors connexion, car normalement, l’interface utilisateur (événement touchmove) interrompt les fonctions de firebase database SqlLite sur les périphériques mobiles, ce qui permet d’éviter les interruptions.