Sondage du mois

Sondage du mois
 

  La connaissance ne vaut que si elle est partagée par tous




 
  Astuce Adobe Photoshop : Raccourci transformer librement : Ctrl T




Les tutoriaux: Index » Jquery » ScriptsJquery » Feature List

Introduction

  • Tutoriel posté par Sky
  • 1239 lectures
  • Mis en ligne le 05-08-2010
  • Dernière mise à jour le 05-09-2010
  • Ce tutoriel a été estimé comme simple.


Automatic Translations:
Translate Into English Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Nous allons voir dans cet article la possibilité de faire une liste "interactive" avec un plugin Jquery. Très simple à mettre en place et d'un valeur ajoutée non négligeable pour vos sites web.

Source du script : jqueryglobe.com


Méthodologie

Comment ça marche ?

Il vous faut inclure la librairie Jquery '1.3' ou plus. Il vous faut également inclure le plugin développé par jQueryGlobe
CODE

A noter que vous pouvez utiliser celle mise à disposition par Google ou bien télécharger le fichier directement et copier le en local.

La partie CSS

CODE CSS


	
		h3 {
			margin: 0;	
			padding: 7px 0 0 0;
			font-size: 16px;
			text-transform: uppercase;
		}

		div#feature_list {
			width: 750px;
			height: 240px;
			overflow: hidden;
			position: relative;
		}

		div#feature_list ul {
			position: absolute;
			top: 0;
			list-style: none;	
			padding: 0;
			margin: 0;
		}

		ul#tabs {
			left: 0;
			z-index: 2;
			width: 320px;
		}

		ul#tabs li {
			font-size: 12px;
			font-family: Arial;
		}
		
		ul#tabs li img {
			padding: 5px;
			border: none;
			float: left;
			margin: 10px 10px 0 0;
		}

		ul#tabs li a {
			color: #222;
			text-decoration: none;	
			display: block;
			padding: 10px;
			height: 60px;
			outline: none;
		}

		ul#tabs li a.current {
			background:  url('feature-tab-current.png');
			color: #FFF;
		}

		ul#tabs li a.current:hover {
			text-decoration: none;
			cursor: default;
		}

		ul#output {
			right: 0;
			width: 463px;
			height: 240px;
			position: relative;
		}

		ul#output li {
			position: absolute;
			width: 463px;
			height: 240px;
		}

		ul#output li a {
			position: absolute;
			bottom: 10px;
			right: 10px;
			padding: 8px 12px;
			text-decoration: none;
			font-size: 11px;
			color: #FFF;
			background: #000;
			-moz-border-radius: 5px;
		}
		
		ul#output li a:hover {
			background: #D33431;
		}


La partie Jquery

CODE


La partie HTML

CODE


Notes

  Evaluez le tutorial (0 Votes)

0
0
0

Source du script : jqueryglobe.com

Pour les questions ou d'éventuelles remarques, dirigez vous vers le forum.

Réagir sur ce tutoriel - [Jquery] Feature List

DERNIÈRES PUBLICATIONS DE OPEN-MOUTHED

En direct de open-mouthed.com