J’aime de plus en plus utiliser la librairie jQuery, c’est pourquoi je vous présente aujourd’hui un plugin : « Feature List ».

Démonstration

Pour vous aider à voir le résultat, voici un aperçu :

Et une démo

Pour l’intégration, c’est très simple :

• Ajoutez les librairies javascript :

 <script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.featureList-1.0.0.js"></script>

• les feuilles de style :

 <link
      rel="stylesheet" type="text/css"
      href="http://fonts.googleapis.com/css?family=Reenie+Beanie">

• Affichez votre page HTML :

<div id="feature_list">
			<ul id="tabs">
				<li>
					<a href="javascript:;">
						<img src="services.png" />
						<h3>Services</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="programming.png" />
						<h3>Programming</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="applications.png" />
						<h3>Applications</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
			</ul>
			<ul id="output">
				<li>
					<img src="sample1.jpg" />
					<a href="#">See project details</a>
				</li>
				<li>
					<img src="sample2.jpg" />
					<a href="#">See project details</a>
				</li>
				<li>
					<img src="sample3.jpg" />
					<a href="#">See project details</a>
				</li>
			</ul> 

		</div>

• Lancez le code javascript :

// On attend le chargement de la page
$(document).ready(function() {

	// On crée la "feature list"
	$.featureList(
		$("#tabs li a"),
		$("#output li"), {
			start_item : 1
		}
	);
});

Télécharger un exemple
Accéder au site du créateur

Souvent utilisé dans les forums, voilà un façon très simple pour apprendre à utiliser Google.

Voici un exemple pour retrouver facilement mon blog

Pour créez le votre, ça se passe ici : http://www.lmgtfy.com/

Vous voulez skier à Vancouver comme les professionnels ?
Google vous le permet !
Découvrez les pistes et plus encore dans Street View.

Voilà une façon idéale pour visualiser les pistes de ski canadiennes tranquillement assis dans votre salon à l’autre bout du monde.

Skier avec Google !