VerticalSlider, afficher de longues listes avec JQuery

montagne

Une longue liste à afficher? Un manque de place? VerticlaSlider va pouvoir vous aider. Ce plugin JQuery fait s’aficher une liste d’une façon plutôt élégante. Mode d’emploi…

Comme d’habitude, on va commencer par inclure jquery et les copains :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="[VOTRECHEMIN]/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="[VOTECHEMIN]/mbVerticalSlider.js"></script>

Ensuite, il faut insérer le code d’initialisation du plugin, soit dans un js à part, soit dans le header :

<script type="text/javascript">
	$(function(){
		$(".slider").mb_vSlider({ //default attributes of the mb.vSlider
        		template:"searchResult.html"
        		,totalElements:120 //this param is used only in ajax modality and should be set dynamically.
        		,easing:"easeOutExpo"
        		,slideTimer:1000
        		,nextEl:".vSnext"
        		,prevEl:".vSprev"
        		,height:200
        		,width:200
             	},{ //data passed in the ajax query string
		    	elementsPerPage:5
	    		,actualPage:0
	    		,foo:100
    	    	})
    	});
 </script>

On continue avec un poil de CSS :

body{
	background: #fff;
}
.slider{
	-moz-box-shadow: 0px 0px 5px #555;
	-webkit-box-shadow: 0px 0px 5px #555;
	background:
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
.slider p{
	padding:4px;
	padding-left:10px;
	margin:0;
	min-height:30px;
}
.slider p:hover{
	background: #4EB6BF;
	color: #4F403D;
	-moz-box-shadow: 0px 0px 5px #555;
	-webkit-box-shadow: 0px 0px 5px #555;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
.slider p:hover.selected{
	background: transparent;
	color: white;
}
.slider p.selected{
	color: white;
}
.slider p a{
	display:block;
	min-height:30px;
	color:#4EB6BF;
	text-decoration:none;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
.slider p a:hover{
	color:#4F403D;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
.slider p.selected a{
	color: #333;
	font-weight:bold;
}
.vSprev, .vSnext{
	width: 50px; height: 22px;
	background: #FF8000;
	color: #4F403D;
	border: 1px solid #4F403D;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-box-shadow: 0px 0px 3px #555;
	-webkit-box-shadow: 0px 0px 3px #555;
}
button[disabled]{
	background: #ccc;
	color: #888;
	border: 1px solid  #888;
}

Ensuite on va écrire le corps de la page. Il se compose de :

<div id="wrapper">
	<button class="vSprev" onclick="$('.slider').vsPrevPage()"><<<</button>
	<button class="vSnext" onclick="$('.slider').vsNextPage()">>>></button>
	<div class="slider">
		<span class="page">
			<p class="result"><a href="#">aciarinn&nbsp;<i>(Castasegna)</i></a></p>
			<!--...-->
		</span>
	</div>
	<button class="vSprev" onclick="$('.slider').vsPrevPage()"><<<</button>
	<button class="vSnext" onclick="$('.slider').vsNextPage()">>>></button>
</div>

Nous avons les boutons précédents et suivants en haut et en bas. Dans le span de classe « page », on va rentrer au fur et à mesure nos éléments sous la forme de <p> ayant pour classe « result »,  chaque élément devant en outre porter une ancre <a>. Voilà ce que ça donne :

2 commentaires

  1. pourquoi ne pas utiliser plutôt des listes à puces ?
    pourquoi ne voit on pas le nombre d’écrans différents ?
    pourquoi dupliquer les boutons de navigation ?
    pourquoi ne pas mettre un bouton qui scroll directement à la fin ?
    pourquoi doit on attendre la fin du scroll quand on clique trop rapidement ?

    Sinon super !

    1. Bonjour et merci de ton commentaire 🙂 D’abord j’ai oublié mais pour télécharger le business : http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-verticalslider/

      Je vais essayer d’apporter des éléments de réponses que je me suis moi-même posées 🙂
      Partant du principe que les objectifs principaux de ce plugin tels que je les vois ce sont d’abord l’esthétique, puis de pouvoir réduire la taille de la liste dans une page, alors je dirais que :

      • La liste à puce présente l’inconvénient dans le cas d’une looongue liste de rallonger la page web
      • on ne voit pas le nombre d’écran différents c’est vrai, mais ça peut se corriger :
      • – dans la page html, rajouter sous les boutons un div avec un id « pagecourante »
        – dans le fichier mbVerticalSlider il faut rajouter
        $("#pagecourante").html("page courante : "+(vSlider.data.actualPage+1));
        et ceci à la fin des fonctions init (vers la ligne 78), nextPage (vers la ligne 149) et prevPage (168).
        – si tu veux rajouter le nombre de page total, le voici : vSlider.opt.totalElements/vSlider.data.elementsPerPage

      • les boutons de navigation sont dupliqués pour que ça fasse joli, mais ce n’est pas indispensable
      • Pour le coup du scrolling à la fin, je n’ai pas trouvé ^^
      • Enfin, on doit attendre pour éviter les double clicks malencontreux, mais en commentant le test if($.vSlider.isSliding) return; des fonctions nextPage et prevPage, tout roule!

      Voilà, j’espère avoir répondu comme il faut. Je sais que ce plugin n’est pas parfait hein, mais je le trouve quand même vachement bien foutu!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *