Écrit par : Titivay75 14 Apr 2012, 12:11
Bonjour à tous,
Je commence à développer mon site web et j'aimerais bien savoir comment intégrer ce qui ressemble assez au système de l'iPhone (page d'accueil : le springboard).
J'espère que la capture ci-jointe sera davantage intelligible.
Merci par avance,
Thomas.
Écrit par : scoch 29 Apr 2012, 12:41
Voici une solution en javascript (jQuery) qui fonctionne avec la souris ainsi qu'avec le geste tactile swipe (toucher-glisser). Tu peux simuler sur le Mac le geste tactile en faisant un cliquer-glisser (vers la gauche et vers la droite) sur les blocs de couleurs.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Springboard cliquable et tactile avec jQuery animate et touchSwipe</title>
<!-- Initialisation du viewport pour les mobiles -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Charger la librairie jQuery à http://code.jquery.com/jquery-1.7.2.min.js -->
<script src="js/jquery-1.7.2.min.js"></script>
<!-- Charger le plug-in jquery.touchSwipe à https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/blob/master/jquery.touchSwipe-1.2.5.js -->
<script src="js/jquery.touchSwipe-1.2.5.js"></script>
<style>
#conteneur {width:400px; margin:0 auto; overflow:hidden;}
#springboard {width:2000px; height:300px; overflow:hidden;}
nav {width:360px; margin:0 auto; padding:20px; background-color:#ccc; text-align:center;}
.bloc {width:400px; height:300px; float:left;}
/* Couleurs pour différencier les blocs */
.bleu {background-color:blue;}
.jaune {background-color:yellow;}
.rouge {background-color:red;}
.rose {background-color:pink;}
.orange {background-color:orange;}
</style>
</head>
<body>
<div id="conteneur">
<div id="springboard">
<div id="blocs">
<div class="bloc bleu"></div>
<div class="bloc jaune"></div>
<div class="bloc orange"></div>
<div class="bloc rose"></div>
<div class="bloc rouge"></div>
</div>
</div>
<nav>
<a href="#" id="prec"><<<</a> |
<a href="#" class="lienNav">0</a> -
<a href="#" class="lienNav">1</a> -
<a href="#" class="lienNav">2</a> -
<a href="#" class="lienNav">3</a> -
<a href="#" class="lienNav">4</a> |
<a href="#" id="suiv">>>></a>
</nav>
</div>
<script>
// Variables
// L'index du bloc actif
var bA = 0;
// Nombre d'éléments de classe .bloc dans #blocs
var nbEnfants = 5;
// Largeur des éléments de classe .bloc
var wBloc = 400;
// Durée d'animation exprimée en millisecondes
var duree = 1000;
// Définition des options de swipe :
// La fonction glisser sera notifiée lorsque l'événement swipe sera diffusé
// Une zone minimum de glisser de 50px pour que l'événement swipe soit diffusé
var swipeOptions=
{
swipe:glisser,
threshold:50
}
// Fonctions
$(function()
{
// On assigne le swipe à l'élément #springboard en passant les options en paramètre
$("#springboard").swipe( swipeOptions );
});
// La fonction glisser notifiée lorsque l'événement swipe est diffusé
// Cette fonction reçoit en paramètre l'événement et la direction du glisser
function glisser(event, direction)
{
if(direction == "left") {
if(bA > -(nbEnfants-1)){
bA--;
deplacer(bA);
}
} else if(direction == "right"){
if(bA < 0){
bA++;
deplacer(bA);
}
}
}
// La fonction appelée depuis glisser
// Le paramètre reçu correspond à l'index du bloc à afficher
function deplacer(pIndex) {
bA = pIndex;
$("#blocs").animate({ marginLeft: wBloc * pIndex}, duree );
}
// Cette fonction sera déclenchée une fois que le DOM sera chargée
$(document).ready(function(){
// Assigner le click aux liens de classe lienNav
$(".lienNav").each(function( i ){
$(this).click(function(){
deplacer(-i);
event.preventDefault();
});
});
// Assigner le click des liens SUIV et PREC
$("a#prec").click(function(event){
if(bA < 0){
bA++;
deplacer(bA);
}
event.preventDefault();
});
$("a#suiv").click(function(event){
if(bA > -(nbEnfants-1)){
bA--;
deplacer(bA);
}
event.preventDefault();
});
});
</script>
</body>
</html>