VerticalSlider, afficher de longues listes avec JQuery

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 :