Défilement Horizontal et vertical de défilement dans JqueryMobile
Je veux mettre en œuvre le défilement horizontal vertical coulissant .Quelque chose comme l'image ci-dessous.
Pour en faire de même, je recherche et trouvé cette http://developingwithstyle.blogspot.co.uk/2010/11/jquery-mobile-swipe-up-down-left-right.html
Mais le code écrit dans ce blog ne fait pas de sens pour moi.
J'ai aussi téléchargé la démo fournis à http://www.idangero.us/sliders/swiper/ et essayer de modifié en fonction de mes besoins. Mais ne pouvait pas en mesure de faire de même.
Si quelqu'un a une Idée ou un lien ou un projet de démonstration alors s'il vous plaît aider moi.
Ce qui concerne les!
vous êtes à la recherche pour les horizontales et les verticales combinées ensemble?
Oui exactement la même chose que vous pensez.
etc. Cette question n'est pas hors-sujet. L'utilisateur a démontré une enquête sur le problème. mais avec une compréhension limitée de la technologie.
Oui exactement la même chose que vous pensez.
etc. Cette question n'est pas hors-sujet. L'utilisateur a démontré une enquête sur le problème. mais avec une compréhension limitée de la technologie.
OriginalL'auteur Dinesh Chandra | 2013-12-13
Vous devez vous connecter pour publier un commentaire.
Mise à jour
J'ai fait ceci plutôt compliqué code basé sur les événements tactiles
touchstart
ettouchend
, horizontalement et verticalement. Le code intercepte les événements tactiles et ensuite de les interpréter dans balayez jusqu', droit, bas et gauche.Images sont échangés avec
.animate()
selon le balayage de la direction. Balayez jusqu' et gauche, charger des images suivantes dans tableau; bas et droit de charge précédents.C'est en quelque sorte de longue durée, et ont une trop grande marge d'amélioration. Par exemple, vous pouvez calculer le temps écoulé entre deux événements évènements touchstart et touchend pour s'assurer que le contact était suffisant pour déclencher la coutume de glisse.Je vais passer par le code des principales parties pour plus d'explication.
HTML
CSS
Wrapper - hauteur et largeur doivent être ajustés en fonction de votre besoin:
Emballage intérieur - Pour ajouter des images à:
Transition wrappers - Utilisé pour les images de transition dans et hors:
Masquer les images comprises:
JS
Les Variables et les paramètres par défaut:
Précharger les images:
Envelopper chacun dans
holder
et puis les ajouter àinner
div, surpageinit
événement ou tout autre jQM page événements.Événements tactiles interprétation - lier les événements Tactiles à
inner
div:Touch durée et distance sont ajoutés à la comparaison.
Transition
showImg(image index, swipe type)
fonction:Ajouté opacité à l'animation.
(1) Testé sur iPad 2 et iPhone 5 - v7.0.4
Je suis content que cela a bien fonctionné pour vous. Si vous êtes un expert en JS, vous pouvez faire quelques modifications qui le rend encore mieux 🙂
OriginalL'auteur Omar
Actuellement, je suis au travail donc n'a pas eu beaucoup de temps pour travailler somethnig. mais les créé une peu de chose de 2 projets combinés.
ajouté le horizental défilement à la page 3.
http://jsfiddle.net/BL33k/
utilisées le néerlandais dans je de javascript pour:
Code est très sale et il y a beaucoup de unessecery choses, mais n'avez pas le temps d'aller la dépression qui maintenant. Espérons qu'il vous aide tho.
OriginalL'auteur Merijn dk
Vous pouvez réaliser cela avec CSS simple et quelques manipulations du DOM http://jsfiddle.net/zTGS9/1/
Pas le temps de mettre en œuvre des événements tactiles, mais j'espère que vous avez compris l'idée 🙂
OriginalL'auteur tnt-rox
Vous avez besoin d'appliquer du css pour la balise body .
pour y défiler, voir ce http://sigmamobility.com/examples/appexamples.jsp.
notez que l'application ci-dessus ne donneront pas les résultats escomptés, à moins que vos contrôles sont vraiment dépassement de la fenêtre de largeur /hauteur.
Vous pouvez tester votre code par Sigma de la Mobilité, qui permet la création d'applications mobiles et facilement injecter css /js code avec prévisualisation en temps réel.
OriginalL'auteur Mobile Dev Expert