46 votes

Curseur de balayage horizontal avec prise en charge de jQuery et des appareils tactiles?

J'ai besoin de faire un produit curseur comme ceci ( voir la zone rouge ) faites glisser un curseur avec de l'élan.

Il devrait fonctionner sur des ordinateurs de Bureau, d'un iPad et d'un navigateur Mobile. Savez-vous tout jquery/jquery mobile plugin pour atteindre cet objectif.

enter image description here

L'effet que je veux c'est presque la même chose que ce http://manos.malihu.gr/tuts/jquery_thumbnail_scroller.html (mais il n'est pas tactile compatible)

et exactement comme "Top 25" de la rubrique Apple iPad application nommée "Remorques"

enter image description here

18voto

Jaime Fernandez Points 701

À mon avis iosSlider est incroyable. Il travaille dans presque n'importe quel appareil et il est bien documenté. Il est gratuit pour une utilisation personnelle, mais pour des sites commerciaux, les coûts de licence de 20$.

Également une bonne option est touchCarousel ou RoyalSlider du même auteur. Ces deux-là ont tout ce dont vous aurez besoin, mais aussi de ne pas libres et ont un prix de $10-12

16voto

Thomas Points 682

Je recommanderais également http://cubiq.org/iscroll-4

MAIS si vous ne creusez pas dessus, essayez ce plugin

http://www.zackgrossbart.com/hackito/touchslider/

il fonctionne très bien et utilise par défaut une barre de défilement horizontale sur le bureau - il n’est pas aussi élégant sur le bureau que l’iscroll-4, mais il fonctionne très bien sur les appareils tactiles

BONNE CHANCE!

15voto

jancha Points 3071

Si j'étais vous, je voudrais mettre en œuvre ma propre solution basée sur le cas des spécifications. En fait, ce passage - c'est de la manipulation de contact vers le bas, touchez, touchez des événements. voici un extrait de ma propre bibliothèque pour la manipulation iPhone touch événements:

touch_object.prototype.handle_touchstart = function(e){
    if (e.targetTouches.length != 1){
        return false;
    }
    this.obj.style.zIndex = 100;
    e.preventDefault();
    this.startX = e.targetTouches[0].pageX - this.geometry.x;
    this.startY = e.targetTouches[0].pageY - this.geometry.y;
    /* adjust for left /top */
    this.bind_handler('touchmove');
    this.bind_handler('touchend');
}
touch_object.prototype.handle_touchmove = function(e) {
    e.preventDefault();
    if (e.targetTouches.length != 1){
        return false;
    }
    var x=e.targetTouches[0].pageX - this.startX;
    var y=e.targetTouches[0].pageY - this.startY;
    this.move(x,y);

}
touch_object.prototype.handle_touchend = function(e){
    this.obj.style.zIndex = 10;
    this.unbind_handler('touchmove');
    this.unbind_handler('touchend');
}

J'ai utilisé ce code pour "bouger les choses". Mais, au lieu de se déplacer, vous pouvez créer votre propre algorithme pour, par exemple, le déclenchement de rediriger vers un autre emplacement, ou vous pouvez utiliser ce mouvement de "déplacer/glisser" l'élément sur lequel le passage à un autre emplacement.

ainsi, il aide vraiment à comprendre les notions de base de la façon dont les choses fonctionnent et ensuite créer plus compliqué solutions. cela peut aider ainsi.

J'ai utilisé cette, de créer ma solution:

http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

10voto

Marcus Points 177

Avez-vous essayé iosSlider? Il peut faire exactement ce dont vous avez besoin.

http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/

4voto

dSquared Points 5832

Jetez un oeil à iScroll v4 ici: http://cubiq.org/iscroll-4

Ce n'est peut-être pas jQuery, mais cela fonctionne très bien sur Desktop Mobile et sur iPad; Je l'ai utilisé sur de nombreux projets et combiné avec jQuery.

Bonne chance!

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X