#56 Un peu de javascript 02 Septembre 2005

Web

Attention, il est important de considérer que cet article est une archive, son contenu est probablement obsolète!

Beaucoup d'entre-vous se demandent pas mal de choses concernant le javascript. Vu son passé, certains restent hésitant quant à son utilisation de manière (massive pour la conception d'un site web par exemple). Lorsque l'on regarde les créations de google en matière : gmail par exemple, il faut se lier à l'évidence, le javascript permet beaucoup d'interactivité, et le Javax (une technologie dérivée) en démontre sa force.

Là, je vous propose un petit script maison, loin d'être terminé, qui permet de styliser les checkbox. Le principe est simple, mais il permettra à plusieurs d'entre-vous d'aborder l'univers Javascript en douceur. Vous pouvez bien évidement continuer votre visite en consultant un site de qualité, Aide Javascript. Pour les geeks, vous pouvez toujours bookmarker la Référence DOM.

Le code source en question n'est par terminé, mais les bases du code y sont. Il s'agit en fait d'une sorte d'exercice vous permettant de retaper le nom des fonctions pour les mémoriser et de faire des tests sous vos navigateurs. L'objectif est d'avoir un lien qui ai l'apparence personnalisée d'un checkbox (il faudra donc jouer avec les css et éventuellement définir une classe pour le lien). La partie codée, celle qui est ci dessous, coche et décoche la casse lorsque l'on clique sur "Check". Il vous reste donc toute la stylisation à faire. Ceci ne devrait pas être trop compliqué.

Bonne chance ;)

 window.onload = function() {
 	checkbox();
 } 
 //	checkbox()
 //	Recherche dans l'ensemble du document l'ensemble
 //	des balises <input> ayant pour la valeur check à
 //	l'attribut type. Elle crée ensuite le lien dont la fonction permettra
 //	de "checker" le champs.
 function checkbox() {
 	// Partie recherche
 	doc = document.getElementsByTagName('input');
 	for(i=0;i<doc.length;i++) {
 		// Partie création du lien
 		if(doc[i].type == 'checkbox') {
 			// Prise du parent
 			// cette fonction ne marche pas sous les anciens navigateurs
 			var parent = doc[i].parentNode;	 
 			// Génération des informations concernant le lien
 			var element = document.createElement("a");
 			element.innerHTML = 'check';
 			element.id = doc[i].id+'-link';
 			addEvent(element,'click',check);	 			
 			// On insère avant l'input le texte
 			parent.insertBefore(element,doc[i]);
 		}
 	}
 }
 
 //	check()
 //	cette fonction permet de dire si un élément est coché ou non
 //	dans ce test, nous mettons en avant un simple texte, mais il peut
 //	très bien être remplacé par une image. 
 function check(input) {
 	// Appel de scripts annexes
 	// Dans cette partie, les informations concernant l'élément cliqué sont
 	// reçus.
 	var input = getNodeWithTag(getEventTarget(input), "a"); 
 	// On supprime le -link installé dans le lien
 	// pour obtenir le nom complet du champs
 	var inputName = input.id.replace(/-link/,''); 		
 	// On va checker ou faire l'inverse en fonction des données
 	// déjà présentes
 	var input = document.getElementById(inputName);
 	if(input.checked == true) 			input.checked = false;
 	else if(input.checked == false) 	input.checked = true;
 } 	
 
 // addEvent()
 // by Scott Andrew
 // add an eventlistener to browsers that can do it somehow.
 function addEvent(obj, evType, fn) {
 	if (obj.addEventListener) {
 		obj.addEventListener(evType, fn, true);
 		return true;
 		} 	 		
 	else if (obj.attachEvent) {
 		var r = obj.attachEvent('on'+evType, fn);
 		return r;
 		}		
 	else {
 		return false;
 		}
 }
 // Fonctionnalitées reprises du script NiceTitle
 // getNodeWithTag()
 function getNodeWithTag(el, tag) {
 	// toLowerCase is for Gecko bug, supposed to be uppercase
 	tag = tag.toLowerCase();
 	while ( (el != null) && ( (el.nodeType != 1) || (el.tagName.toLowerCase() != tag) ) )
 		el = el.parentNode;
 	return el;
 } 	
 // getEventTarget()
 function getEventTarget(event) {
 	if (window.event && window.event.srcElement)
 		return window.event.srcElement;
 	else if (event && event.target)
 		return event.target;
 	return null;
 } 

Ce script fonctionne sous Firefox, mais n'a pas été testé sous IE, ni sous Safari.

Ajouter un commentaire

Nom :

Email :

Site web :

Commentaire :

Se souvenir de moi