IPB

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> Vue style springboard, effet springboard page web
Options
Titivay75
posté 14 Apr 2012, 12:11
Message #1


Nouveau Membre


Groupe : Membres
Messages : 35
Inscrit : 4 Apr 2012
Membre no 175 725



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.

Ce message a été modifié par Titivay75 - 14 Apr 2012, 12:13.
Fichier(s) joint(s)
Fichier joint  ModeleVue.png ( 15.92 Ko ) Nombre de téléchargements : 13
 
Go to the top of the page
 
+Quote Post
scoch
posté 29 Apr 2012, 12:41
Message #2


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
Inscrit : 1 Jul 2010
Membre no 156 073



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>


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



Nous sommes le : 28th March 2024 - 20:41