1 - L'accordéon Dynamic Drive

Un accordéon aux possibilités de customisation impressionnantes. Absolument parfait dans la sidebar d'un blog, par exemple.
Source

2 - Design Reviver Horizontal Accordion

Un de mes préférés. Lorsque vous passez la souris sur une image, il laisse voir la légende. Particulièrement adapté pour créer des animations "Featured posts" comme on en trouve sur la homepage de ce blog.
Source

3 - jQuery UI Accordion

Parfait pour créer un menu ou sous menu, même si plutôt limité dans l'ensemble.
Source

4 - Simple jQuery Accordion Menu

Même genre que celui dont je viens de parler en plus complexe et avec des tas d'options. Il peut notamment être utilisé comme menu, mais pas seulement. Une petite visite sur le site de l'auteur vous donnera un avant gout de ce dont ce petit plugin est capable.
Source

5 - Accordion menu using jQuery

Un autre accordéon dédié à la création d'un menu de navigation. Extrêmement simple, il se révèle particulièrement adapté au débutant. A noter, il est très simple de définir l'ouverture du menu soit au clic, soit au rollover.
Source

6 - Xbox 360-like horizontal jQuery accordion

Comme son nom l'indique, ce plugin est une réplique d'un slideshow que l'on retrouve sur la console x-box. Si vous cherchez à créer une galerie "featured" d'articles sur votre blog, il est une excellente alternative au "Smoothgallery" que l'on voit un peu partout.
Source

7 - Simple horizontal jQuery accordion

Un accordéon horizontal simplissime mais extrêmement personnalisable. Bien qu'il soit assez moche par défaut, vous pouvez lui donnez un look d'enfer grâce aux CSS.
Source

8 - HoverAccordion jQuery Plugin

Vous aimez le site d'Apple? Si oui, alors vous aimerez à coup sur cet accordéon qui imite plutôt bien celui qu'on trouve sur le site du constructeur Américain.
Source

Et voilà pour aujourd'hui. Des idées pour rallonger cette liste ?

C'est un peu pénible surtout qu'il faut alors ressaisir les mots de passe qui se sont effacés, et le code de vérification anti-robot.

Il y a pourtant une technique simple, qui existe depuis longtemps et qui fonctionne à merveille : L'AJAX et son XMLHttpRequest.

AJAX : Asynchronous JavaScript and XML, c'est un nom qui a été donné à un ensemble de techniques qui permettent de modifier les informations d'une page web sans avoir à la recharger. Le "client" est donc sollicité un peu plus et le "serveur" un peu moins.

Concrètement, dès qu'une personne a saisi le pseudo désiré, une requête va être automatiquement envoyée au serveur afin de vérifier que ce pseudo n'est pas déjà utilisé.
En retour on affichera un flag vert à côté du champ pseudo s'il est libre et une croix rouge s'il existe déjà. Dans ce cas on verrouillera la possibilité de valider le formulaire en affichant une alerte javascript.

La classe XMLHttpRequest

Attributs

readyState
code d'état qui passe successivement de 0 à 4 indiquant qu'il est "prêt"
status
200 si tout est ok et 404 si page non trouvée
responseText
la réponse sous forme d'une chaîne de caractères
responseXml
la réponse sous forme xml on utilisera  les méthodes de DOM pour les extraire
onreadystatechange
on lui assigne une fonction qui sera appelée lors d'un changement d'état

Méthodes

open (mode, url, boolean)
- mode : 2 valeurs possibles qui sont GET ou POST
- url : la page à appeler
- boolean : true pour asynchrone et false pour synchrone
send("arg")
- des parametres, en général les données à analyser

La création de cet objet est différente selon le navigateur :

if(document.all) var XhrObj = new ActiveXObject("Microsoft.XMLHTTP"); //IE
else var XhrObj = new XMLHttpRequest(); //Mozilla

On indique l'endroit d'affichage de la réponse :

content = document.getElementById("pseudo_check"); 	//zone d'affichage

On aura donc dans le code html de notre page, à droite du champ à vérifier

<span id="pseudo_check"></span>

Ce qui concrètement ressemblera à ça, notre champ de saisie, l'appel par un onblur à notre fonction javascript de contrôle dès que la personne quitte le champ, et la zone de la réponse du contrôle :

<input type="text" name="pseudo" value="" onblur="req_pseudo(this.value);"> <span id="pseudo_check"></span>

Voyons comment va se faire la requête vers le serveur,
on indique le nom de la page php qui fait le contrôle d'existence et la méthode (POST ou GET) :

  XhrObj.open("POST", "verification_pseudo.php");

L'envoi de la requête vers le serveur en passant le pseudo à contrôler :

  XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  XhrObj.send('p='+pseudo);

La page php qui aura à charge de faire une requête dans la base de données afin de vérifier l'existence ou non du pseudo.
Si le pseudo est absent, elle retournera 'OK' sinon elle retournera 'FAIL'. On va tester ces réponses dans notre javascript

XhrObj.onreadystatechange = function()
{
  if (XhrObj.readyState == 4 && XhrObj.status == 200) {
    if (XhrObj.responseText == 'OK') {
      // ok nouveau pseudo
      content.innerHTML='<img src="images/accepter.png" alt=""/> Ok';
    } else {
      // erreur pseudo déjà existant
      content.innerHTML='<img src="images/refuser.png" alt=""/> Déjà pris';
    }
  }
}

La fonction au complet :

var bPseudo = false; // servira pour empêcher de poster le formulaire si vérification pseudo non ok
function req_pseudo(pseudo) {

  //XMLHttpRequest est supporté par Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Netscape 7
  if(document.all) var XhrObj = new ActiveXObject("Microsoft.XMLHTTP"); //Internet Explorer
  else var XhrObj = new XMLHttpRequest(); //Mozilla

  content = document.getElementById("pseudo_check"); 	//zone d'affichage

  XhrObj.open("POST", "verif_pseudo.php");

  //Ok pour la page cible
  XhrObj.onreadystatechange = function()
  {
    if (XhrObj.readyState == 4 && XhrObj.status == 200) {
      if (XhrObj.responseText == 'OK') {
        // ok nouveau pseudo
        content.innerHTML='<img src="images/accepter.png" alt=""/> Ok';
      } else {
        // erreur pseudo déjà existant
        content.innerHTML='<img src="images/refuser.png" alt=""/> Déjà pris';
      }
    }
  }

  XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  XhrObj.send('p='+pseudo);

}

La page verification_pseudo.php

<?php
$pseudo = htmlentities(addslashes($_POST['p']));
if (!empty($pseudo)) {
  $res = mysql_query("select * from users where pseudo='".$pseudo."'");
  echo (($row = mysql_fetch_array($res)) ? 'FAIL' : 'OK');
}
?>

Pour verrouiller l'envoi du formulaire tant que le pseudo n'est pas unique, il suffira de tester une variable bPseudo mise à jour lors du contrôle ajax.

function testChamps(f) {
  if (!bPseudo) return false;
  return true;
}

Pour les plus exigeants afin d'éviter qu'une personne ayant modifié son pseudo juste avant d'appuyer sur Valider passe au travers des contrôles :

function testChamps(f) {
  bPseudo = false; // on va revalider le champ
  req_pseudo(f.pseudo.value);
  if (!bPseudo) {
    alert('Erreur pseudo');
    return false;
  }
}

Cette fonction est bien entendu appelée lors de la demande soumission du formulaire.

<form method="post" onSubmit="return testChamps(this);">

Vous pouvez tester ce code sur cette page Test AJAX.

Vous savez maintenant comment vérifier les données d'un formulaire avec AJAX.

Première partie: Création du document HTML

Une fois que vous avez téléchargé l'archive de Noobslide, créez un document html que vous nommerez sample7.html, dans le répertoire class.noobSlide.js.
Nous devons inclure les feuilles de style, ainsi que les classes Mootools nécessaires au fonctionnement de Noobslide:

<link rel="stylesheet" href="_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="_mootools.js"></script>
<script type="text/javascript" src="_class.noobSlide.js"></script>

Nous pouvons maintenant créer le html pour notre galerie. Collez le code ci-dessous dans la partie body de votre document html.

<h2>Sample 7</h2>
<div class="sample">
	<div class="mask6">
		<div id="box7">
			<span><img src="img1.jpg" alt="Photo" /></span>
			<span><img src="img2.jpg" alt="Photo" /></span>
			<span><img src="img3.jpg" alt="Photo" /></span>
			<span><img src="img4.jpg" alt="Photo" /></span>
			<span><img src="img5.jpg" alt="Photo" /></span>
			<span><img src="img6.jpg" alt="Photo" /></span>
			<span><img src="img7.jpg" alt="Photo" /></span>
			<span><img src="img8.jpg" alt="Photo" /></span>
		</div>
	</div>

	<div id="thumbs7">
		<div class="thumbs">
			<div><img src="img1.jpg" alt="Photo Thumb" /></div>
			<div><img src="img2.jpg" alt="Photo Thumb" /></div>
			<div><img src="img3.jpg" alt="Photo Thumb" /></div>
			<div><img src="img4.jpg" alt="Photo Thumb" /></div>
			<div><img src="img5.jpg" alt="Photo Thumb" /></div>
			<div><img src="img6.jpg" alt="Photo Thumb" /></div>
			<div><img src="img7.jpg" alt="Photo Thumb" /></div>
			<div><img src="img8.jpg" alt="Photo Thumb" /></div>
		</div>

		<div id="thumbs_mask7"></div>

		<p id="thumbs_handles7">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</p>
	</div>
</div>

Ce bout de html est loin d'être parfait en terme de sémantique, même si ça ira parfaitement pour cet exemple. D'ailleurs, pourquoi ne pas réécrire ce code avec une meilleure structure en guise d'exercise?

Deuxième partie: Javascript

On va pouvoir s'amuser Voici donc le fameux code qui animera notre contenu.
Vous n'avez qu'à le coller dans la partie head de votre document html, ou mieux, le placer dans un fichier .js séparé.

<script type="text/javascript">
	window.addEvent('domready',function(){
		var startItem = 3; // First item to be displayed
		var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*60-568)+'px').setOpacity(0.8);
		var fxOptions7 = {duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}
		var thumbsFx = new Fx.Style(thumbs_mask7,'left',fxOptions7);
		var hs7 = new noobSlide({
			box: $('box7'),
			items: [0,1,2,3,4,5,6,7],
			handles: $ES('span','thumbs_handles7'),
			fxOptions: fxOptions7,
			onWalk: function(currentItem){
				thumbsFx.start(currentItem*60-568);
			},
			startItem: startItem
		});
		hs7.walk(0);
	});
</script>

Et voilà! Vous diposez désormais d'un magnifique slideshow. Si vous avez des commentaires, des questions ou des idées d'amélioration, n'hésitez pas à m'en faire part

C'est parti!

Commençons d'emblée par une petite capture d'écran histoire de vous montrer ce que vous pourrez faire de beau avec Noobslide:

Si vous n'êtes toujours pas convaincus, ou que vous voulez voir le script en action (pour un slideshow c'est quand même mieux ) c'est ici que ça se passe.
Comme on peut le voir sur la démo, Noobslide propose pas moins de 8 slides différents. Il est bien entendu possible de les customiser à votre guise.

Mise en place

Pour ce tuto, j'ai choisi le premier exemple de la série. C'est à la fois le plus simple à mettre en place et le plus courant.

Nous allons bien entendu commencer par récupérer l'archive de Noobslide.
Une fois dézippée, l'archive contient quelques images (très jolies, d'ailleurs) d'exemple, les scripts js, les css et le framework Mootools.

Nous allons donc inclure tout ce beau monde dans la partie head de notre document html:

<link rel="stylesheet" href="_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="_mootools.js"></script>
<script type="text/javascript" src="_class.noobSlide.js"></script>

Dans la partie body de notre document html, nous allons créer notre contenu:

<h2>Slideshow</h2>
<div class="sample">
	<div class="mask1">
		<div id="box1">
			<span><img src="img1.jpg" alt="Photo" /></span>
			<span><img src="img2.jpg" alt="Photo" /></span>
			<span><img src="img3.jpg" alt="Photo" /></span>
			<span><img src="img4.jpg" alt="Photo" /></span>
			<span><img src="img5.jpg" alt="Photo" /></span>
			<span><img src="img6.jpg" alt="Photo" /></span>
			<span><img src="img7.jpg" alt="Photo" /></span>
			<span><img src="img8.jpg" alt="Photo" /></span>
		</div>
	</div>
</div>

Voilà pour le contenu. Nous avons créé trois conteneurs: sample, box1 et mask1, le dernier faisant comme son nom l'indique office de masque.
Sémantiquement parlant, j'aurais préféré utiliser une liste non-ordonnée (<li>), plutôt que cette longue suite de <span> sans fin, mais pour être honnête je m'en suis à l'heure actuelle tenu à décortiquer les exemples fournis par l'auteur.

Dernière étape: le javascript. Il est temps de donner vie à notre slideshow. Ajoutez le code qui suit dans la partie head de votre document html, ou mieux dans un fichier .js séparé:

<script type="text/javascript">
	window.addEvent('domready',function(){
		var hs1 = new noobSlide({
			box: $('box1'),
			items: [1,2,3,4],
			size: 480,
			autoPlay: true
		});
	});
</script>

Observons ce bout de code de plus près:
La méthode window.addEvent() permet de charger ce code dès que le navigateur à fini de charger l'arbre dom. On gagne donc on performance étant donné que nous n'avons pas besoin d'attendre le chargement complet de la page (et de toute les images!) pour charger ce script. J'avais déja parlé de cette méthode fort utile dans cet article.

Ensuite, nous allons créer une instance de la classe noobSlide. Voyons ce que ça donne au niveau des paramètres:

• box: l'id de l'élément contenant nos images. Dans notre exemple, il s'agit donc de box1. Notez que le sign $ n'est autre qu'un raccourci Mootools de la fonction document.getElementById().
• items: Le nombre de pas du début à la fin du slideshow.
• size: la longueur du slideshow, en pixels.
• autoPlay: Réglé à true, ce paramètre permet, comme son nom l'indique, le défilement automatique.

Pour ce qui est du styling css, étant donné que cet exemple utilise les ids et classes définies par défaut dans la feuille de style fournie, le rendu visuel sera identique à celui des exemples en ligne. Pour ce qui est de la personnalisation, c'est à vous de jouer

Conclusion

Autant être clair, je suis sous le charme de ce script. D'ailleurs, je pense faire d'autres tutos dans la veine de celui-ci, comme par exemple l'étude des exemples du site ou encore l'intégration de noobslide dans Wordpress.
N'hésitez pas à me dire ce qui vous intéresserais!

Mocha UI

Si vous aimez les fenêtres, vous aimerez Mocha UI: En effet, qu'elles soient modales, fixes, flottantes ou redimensionnables, Mocha UI propose toutes sortes de fenêtres pour sublimer l'expérience utilisateur dans votre application web.

Mootable

J'ai découvert Mootable sur le blog d'X-or: Il s'agit d'un script permettant de traiter un tableau html de la même manière qu'un tableau provenant d'une application desktop. Il devient ainsi possible de redimensionner les colonnes, de trier les éléments du tableau, de souligner la ligne sur laquelle passe la souris...
Bref, le must pour les tableaux de votre prochaine appli!

Slimbox

On ne présente plus ces fenêtres modales servant essentiellement à afficher du contenu multimedia. Il existe Lightwindow, Lightbox...Voici Slimbox, qui en plus d'être basé sur Mootools, se révèle est très légère.

MooEditable

MooEditable est un éditeur wysiwyg dans le style de TinyMCE ou FckEditor. Il pèse moins de 10kb et est totalement cross-browser. Sa légèreté ainsi que son extensibilité en font selon moi un bon choix face à des éditeurs beaucoup plus lourds et pas nécessairement plus intuitifs pour l'utilisateur.
Le rendu est correct pour du wysiwyg, mais bien entendu n'espérez pas obtenir un html aussi propre que si il avait été codé à la main.

Mooflow

Les utilisateurs de Leopard, dernier OS d'Apple, apprécient énormément Coverflow, cette fonction permettant d'afficher les fichiers d'une manière esthétique et très intuitive. Alors, pourquoi ne pas en faire profiter les utilisateurs de votre site? A noter, ce script est un peu lourd, donc à utiliser avec parcimonie.

Date Picker Widget

Si vous travaillez avec des dates, ce Date picker vous simplifiera la tâche tout en améliorant le coté user-friendly.

Calendar

Ce script fait un peu double emploi avec le date picker que nous venons de voir, mais c'est pour la bonne cause: Proposé en trois déclinaisons, (Noire, bleue et blanche) Calendar est le genre de script que l'on aimerait trouver sur tous les sites qui utilisent des dates: Très léger, esthétique et faisant également office de validation côté client, (impossible de rentrer une date invalide) que demander de plus?

Mootools UI Menu

Je ne suis pas spécialement fan des menus contextuels apparaissant au clic droit en lieu et place du menu du navigateur, mais je me suis dit que ce script pourrait intéresser certains d'entre vous. A noter, il est également possible d'utiliser ce script pour faire apparaitre un menu lors d'un évènement, comme un clic sur un bouton, par exemple.

Roar Notifications

Une interface utilisateur à très souvent besoin d'avertir l'utilisateur: Champ mal renseigné, opération impossible...Bien sûr, la bonne vieille fonction alert() permet d'afficher des messages à l'attention de l'utilisateur, mais si vous recherchez une manière beaucoup plus esthétique de transmettre ce genre d'information, Roar Notifications est fait pour vous.

Checkboxes and Lists

J'avais déja présenté un script équivalent lors de mon article intitulé 8 scripts Javascript pour sublimer votre site. Bien qu'il ne s'agisse ici que d'esthétisme pur et non d'amélioration des fonctionnalités existantes,

SmoothGallery

Qu'on se le dise, SmoothGallery est vraiment représentatif des possibilités offertes par les frameworks Javascript tel que Mootools ou encore JQuery. Il y a quelques années, ce genre de galerie n'aurait été réalisable qu'avec du Flash, balourd et mal optimisé pour le référencement. Désormais, grâce à Mootools, nous allons pouvoir créer une galerie d'images aux effets de toute beauté.
Comme je suis sûr que vous êtes impatient de voir à quoi cela ressemble, je vous invite donc à aller voir de ce pas la page de démonstration sur le site de Jonathan Schemoul, créateur de SmoothGallery.

Convaincu ? Dans ce cas, il ne reste plus qu'à mettre le script en place sur votre site, ce qui est d'une simplicité enfantine. Après avoir téléchargé et décompressé l'archive, éditez le fichier dans lequel vous souhaitez voir apparaitre la gallerie et incluez les deux fichiers Javascript ainsi que la feuille de style css :

<script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />

Désormais, nous allons inclure le xhtml de la galerie. Le code ci-dessous listera deux images différentes. Si vous souhaitez en mettre davantage, rajoutez un div imageElement pour chaque nouvelle image.

<div id="myGallery">
    <div class="imageElement">
        <h3>Titre du premier item</h3>
        <p>Description du premier item</p>
        <a href="mypage1.html" title="open image" class="open"></a>
        <img src="images/brugges2006/1.jpg" class="full" />
        <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
    </div>
    <div class="imageElement">
        <h3>Titre du second item</h3>
        <p>Description du second item</p>
        <a href="mypage2.html" title="open image" class="open"></a>
        <img src="images/brugges2006/2.jpg" class="full" />
        <img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
    </div>
</div>

A ce stade, la galerie est pratiquement opérationnelle. Il ne reste plus qu'à faire démarrer le script. Placez ce code dans la partie head de votre page html, ou encore mieux, dans un fichier .js que vous lierez à la page :

<script type="text/javascript">
function startGallery() {
    var myGallery = new gallery($('myGallery'), {
        timed: false
    });
}
window.addEvent('domready', startGallery);
</script>

Comme vous l'aurez sans doute remarqué, nous utilisons ici du Javascript non intrusif. Ca fait du bien un beau code bien propre
Et voilà, notre galerie est prête et vous pouvez admirer le résultat. Toutefois, notons l'existence de paramètres permettant de régler la galerie assez finement.
Dans le code ci-dessous, repérez la ligne 4. Vous incluerez vos paramètres supplémentaires à cet endroit.

• timed: true | false Réglé à true, les images défilerons toutes seules. Sur false, uniquement si l'utilisateur clique sur les flèches.
• showArrows: true | false Montre (true) ou non (false) les flèche permettant de passer à l'image suivante/précédente.
• showCarousel: true | false Permet de voir des vignettes des images si il est réglé à true.

Plugin Wordpress SmoothGallery : Featured Content Gallery

Avec la mode des thèmes Magazine, il est bon ton de pouvoir présenter à ses lecteurs une sélection mise en évidence de ses meilleurs articles. Si vous avez aimé SmoothGallery, alors le plugin Featured Content Gallery est fait pour vous.
Le principe est simple : Après avoir installé le plugin, un nouvel onglet apparaitra dans le menu Options de votre interface d'administration Wordpress. Il vous sera proposé de renseigner les titres, descriptions, et images pour 5 – Pas un de plus, pas un de moins – articles à mettre en évidence.
Même si on peut regretter le manque de souplesse du procédé (Il aurait été intéressant, selon moi d'utiliser une catégorie "Featured" dédiée aux articles à mettre en évidence) l'avantage est que le tout est particulièrement simple et sera accessible à tous.

Téléchargez l'archive, décompressez-là et uploadez le répertoire content-gallery dans le répertoire wp-content/plugins de votre install Wordpress.
Rendez-vous dans votre panneau d'administration et activez le plugin. Il ne vous reste plus qu'à placer la ligne suivante sur l'un des fichiers de votre thème pour générer la galerie :

<?php include (ABSPATH . '/wp-content/plugins/content-gallery/gallery.php'); ?>

Si vous souhaitez ne montrer la galerie que sur une page spécifique de votre blog (Par exemple, la homepage) n'hésitez pas à lire cet article traitant des fonctions conditionnelles de Wordpress.

MoreCSS est disponible au téléchargement sur cette page. Une fois rapatrié sur votre machine ou votre serveur, incluez le fichier MoreCSS.js dans votre document HTML. A noter, il est nécessaire que votre feuille de style CSS soit inclue avant le fichier Javascript:

<link rel="MoreCSS" href="style.css" />
<script type="text/javascript" src="MoreCSS.js"></script>

Dès lors vous pourrez bénéficier des nombreuses "propriétés" supplémentaires proposées par MoreCSS. Notons en vrac: tooltip, target, execute, opacity...La liste complète des propriétés disponibles ainsi que leur usage se trouve sur le site du projet.

D'une manière générale, MoreCSS s'utilise entièrement dans la feuille de style. On est donc ici en plein Javascript non-intrusif, ce qui est une plutôt une bonne nouvelle.
Petit exemple avec la propriété target:

a:active {
    target: popup;
    target-width: 800px;
    target-height: 600px;
}

Ici, nous avons défini l'ouverture de tous les liens actifs dans une pop-up de 800*600. Il s'agit bien entendu d'un exemple, implémenter ceci sur votre site serait une très mauvaise idée

A noter également, il est conseillé, pour des questions de performance, d'utiliser des sélecteurs uniques (IDs) plutôt que des classes.

Je note toutefois un problème de taille à l'utilisation de cette lib : Vous vous doutez bien qu'une propriété définie par MoreCSS, comme target, n'est pas valide w3c et ne passe donc pas au validateur. Un bon compromis serait de créer une feuille de style à part et d'y mettre uniquement les propriétés MoreCSS. A vous de voir!

Un peu de théorie

L'emploi de raccourcis clavier en javascript – et sur le web en général– reste relativement marginal. Selon moi, c'est bien dommage car les raccourcis clavier sur une appli web peuvent être extrêmement pratiques à conditions d'être à la base bien pensés par les développeurs.
Le facteur le plus important à prendre en compte est bien entendu de ne pas créer de raccourcis claviers qui rentreraient en conflit avec ceux du navigateur de l'internaute. Par exemple, sous Firefox, le raccourci Ctrl+U permet d'afficher le code source de la page web. Que se passera t'il si vous définissez la même combinaison de touches comme raccourci dans votre application? L'une des deux actions sera effectuée, mais pas les deux, et probablement pas celle qu'attendait le visiteur... D'une manière générale – Et bien que les exemples ci-dessous ne se tiennent pas à cette règle – je déconseille d'utiliser la touche Ctrl pour créer des raccourcis claviers en Javascript: Cette touche est utilisée par pratiquement tous les browsers pour leur raccourcis claviers internes. Préférez-y une touche comme Tab, par exemple.

Parmi les gestionnaires d'événements proposés par Javascript, nous nous intéresseront ici à onkeyup, qui permet de déclencher une fonction dès que l'utilisateur presse une touche. Il suffira alors de comparer la valeur retournée au code clavier correspondant à la touche qui nous intéresse.

Les codes claviers quand à eux, sont des codes numériques à deux ou trois chiffres. A chaque touche du clavier correspond un code clavier, par exemple la touche Ctrl qui à pour code clavier 17.
Pour une liste complète des correspondances touches/codes clavier, rendez-vous à la fin de cet article.

Exemples

Dans ces exemples, nous allons simplement vérifier les touches pressées par l'utilisateur. Si il s'agit de la combinaison Ctrl+S, alors une fonction sera déclenchée.
Le premier exemple est en Javascript "traditionnel" tandis que le second utilise la bibliothèque JQuery.

var isCtrl = false;
document.onkeyup=function(e) {
    if(e.which == 17) isCtrl=false;
}document.onkeydown=function(e){
    if(e.which == 17) isCtrl=true;
    if(e.which == 83 && isCtrl == true) {
         // Votre fonction à déclencher au Ctrl+S
         return false;
    }
}

Exemple avec JQuery:

var isCtrl = false;$(document).keyup(function (e) {
if(e.which == 17) isCtrl=false;
}).keydown(function (e) {
    if(e.which == 17) isCtrl=true;
    if(e.which == 83 && isCtrl == true) {
        // Votre fonction à déclencher au Ctrl+S
 	return false;
 }
});

Dans ces deux exemples, nous vérifions tout d'abord que la touche Ctrl est bien pressée par l'utilisateur. Si c'est le cas, alors nous changeons la valeur de la variable isCtrl à true. Si les touches sont relâchées, isCtrl reprendra sa valeur initiale, c'est à dire false.
Ensuite, il convient de vérifier que la seconde touche pressée par l'utilisateur corresponds bien à la touche S. De plus, comme il doit s'agir d'une combinaison de touches (Dans cet exemple, Ctrl+S) il convient de vérifier que la variable isCtrl à bien true comme valeur.
Si ces deux conditions sont remplies, alors nous pouvons déclencher la fonction désirée pour la combinaison de touche Ctrl+S.

Equivalences touches/codes clavier

A partir de là, on pourrait facilement implémenter une fonction qui nous permettrais de savoir sur quelle touche le visiteur à appuyé en utilisant un tableau Javascript. Pour ma part, je m'arrêterais ici. Bon coding

Bien entendu, il faut télécharger le script, ainsi qu'éventuellement la feuille de style utilisée pour mettre en forme les exemples. Notez toutefois que cette feuille de style n'est absolument pas necessaire pour créer vos dégradés en javascript. Vous trouverez les deux sur cette page.
Il vous reste désormais à inclure le fichier .js dans la partie head de votre document html:

<script type="text/javascript" src="gradient.js"></script>

Supposons maintenant que vous souhaitez appliquer un dégradé du blanc au noir sur un élément h1:

<h1 class="gradient ffffff 000000 horizontal">Un beau dégradé</h1>

Comme vous l'avez remarqué, le contrôle du dégradé se fait au moyen de classe css:

• gradient indique au script que vous souhaitez mettre en place un dégradé.
• ffffff est la couleur de départ, soit ici le blanc.
• 000000 est la couleur d'arrivée, ici le noir.
• horizontal est comme son nom l'indique, le sens du dégradé.

Bien entendu, rien ne vous empêche de rajouter vos propres classes css afin de donner un style supplémentaire à l'élément. Ainsi le code suivant sera parfaitement fonctionnel:

<h1 class="gradient ffffff 000000 horizontal title">Un beau dégradé</h1>

Notez toutefois que les 4 premières classes doivent absolument être les 4 paramètres requis pour l'application du dégradé. Vous pouvez rajouter autant de classes que vous le souhaitez, mais celles-ci doivent obligatoirement se trouver après les 4 classes relatives au dégradé.

Un petit mot sur le fonctionnement: Si le visiteur utilise IE, gradient.js utilisera les propriétés css proprio de Microsoft afin de donner l'effet désiré. Par contre, si l'internaute est sous un autre navigateur, le script génèrera une série de div qui seront positionnés en tant qu'enfant de l'élément. Ces div en-veux-tu-en-voilà sont heureusement totalement invisibles dans la source du document html.

Bien sur, les possibilités offertes par gradient.js ne sont pas aussi nombreuses qu'elles le sont avec une image, et on peut rester dubitatif quand à l'utilisation de Javascript là ou on en à pas réellement besoin.
Toutefois, le gain de temps et la relative propreté du code en font une bonne alternative au manque de temps ou de connaissance en édition graphique.

Construit autour de la désormais célèbre librairie JS Prototype, Starbox se présente sous la forme d'un fichier Javascript et d'une css à linker à votre document html. L'archive téléchargeable contient également quelques images qui dans la plupart des cas, correspondront à l'usage que l'on souhaite en faire.
Outre sa grande simplicité, j'ai fortement apprécié la facilité avec laquelle Starbox permet d'envoyer une requete Ajax: il suffit d'indique, dans le paramètre onRate, la fonction js à appeller pour lancer la requête.

Utilisation de base

La première chose à faire et de lier le fichier starbox.js et starbox.css ainsi que les librairies prototype et scriptaculous (si vous souhaiter utiliser les effets) à votre document html, comme montré ci-dessous:

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/starbox.js'></script>
<link rel="stylesheet" type="text/css" href="css/starbox.css" />

Ensuite, il vous faudra éditer le fichier starbox.js et renseigner le chemin des images. Recherchez cette ligne

overlayImages: '../images/starbox/',

et modifier le chemin à votre convenance.
Pour afficher une Starbox, insérez simplement le code suivant dans votre fichier html:

<div id='id_element'></div>
<script type='text/javascript'>
     new Starbox('id_element', 1);
</script>

Le premier paramètre est l'id de l'élément à transformer en Starbox, le second est le nombre auquel commencera la notation.

Un grand nombre d'options sont disponibles et permettent de paramètrer finement le Starbox. Voyez pour celà le site du projet, qui explique également comment utiliser starbox.css pour styler votre Starbox à votre guise.

Un bien beau projet, qui rendra de fiers services au développeurs soucier de réutiliser du code open-source plutot que de toujours réécrire les mêmes fonctions. Merci, Nick Stakenburg!