11515 sujets

JavaScript, DOM et API Web HTML5

Une fonction pour faire tout ce dont j'ai besoin

Bonjour,

Depuis que j'utilise javascript je me suis aperçu que finalement j'utilise toujours les mêmes fonctions:

- faire déplier des sous menus,
- des minis menus à onglets,
- faire déplier un petit texte sous un titre.

Comme j'ai souvent plusieurs de ces fonctions par site, je voudrais faire une unique fonction qui me permettre de faire ces trois fonctions
Ces trois fonctions utilise ces trois méthodes :
- changer la classe du lien que l'on clique
- changer la classe d'un groupe de bloc ou d'une liste entiére
- changer la classe d'un élement appelé par une id

Chaques fonctions utilisent quatres classes:
- classdesliens
- classdeslienson

- classdeselements
- classdeselementson

la class avec "on" étant la classe "active", par exemple pour le menu à onglet, l'onglet actif.

La fonction est appelée par un évenement onClick(this,'id')

Le javascript vat donc faire passer la classe de l'ensemble des élements de ma liste du statut actif à inactif, tout simplement en enlevant le "on"

Voilà la fonction ChangeClass(classname) :


function ChangeClass(clas) {

var tags = document.getElementsByTagName('*');

for (var i = 0; ii < tags.length; ii++) {

//on trouver classe demandé avec "on" et on la change
  if (tags[ii].className == clas+'on'){
   tags[ii].className = clas;
   }
  }
}


ma fonction est appelée par un évenement :

onClick="MagicMenu(this,'monid')


this envoie le lien sur lequel on click et 'monid' est l'id de l'élement dont on veut changer la classe.


function MagicMenu(link,id) {

//Changer la classe de la liste
ChangeClass('classdesliens');

//Changer la classe du lien
link.className = 'classdeslienson';

//faire disparaitre l'ensemble des menus 
//et apparaitre le sousmenu que l'on click
ChangeClass('classdeselements');
var show = document.getElementById(id);
show.className = 'classdeselementson';

}


Sur ce principe je peut donc faire toute les fonctions dont j'ai besoin, je suis pas compliqué, je n'ai besoin de rien d'autre. C'est ça que j'aime dans cette méthode c'est qu'avec les feuilles de styles on peut faire tout ce qu'on veut, changer de forme de couleur de typo...
Tout ça pour dire que cette fonction "ChangeClass()" serait en quelque sorte ma librairie javascript. Du coup j'ai envie qu'elle soit bien et c'est pour cela que je solicite vos commentaires surtout pour savoir si les méthodes que j'utilise sont correctes et valides sur les differents navigateurs

Voilà une page de test avec un menu à onglets et des menus dépliants:
http://www.smart-com.com.mx/spip.php?page=java&id_article=68
Modifié par matmat (15 Nov 2006 - 04:26)
Merci de ta réponse,
Je suis pas sur de bien comprendre, est ce que la méthode consiterais a mettre a la place de 


link.className = 'classdeslienson';


ça?


function addClass(link, 'classdeslienson') {

	if (!node.className) {

		node.className = className;

	} else if (!belongsToClass(node, className)) {

		node.className += " " + className;

	}

}


ce qui ferait que mon élement au lieu d'avoir seulement la classe

.classdeslienson{}


aurait la classe:

.classe initiale .classdeslienson{}

Modifié par matmat (14 Nov 2006 - 18:23)
Salut,

Euh non, ma méthode consisterait tout simplement à remplacer
link.className = 'classdeslienson';
par
removeClass(link, 'classdesliens');
addClass(link, 'classdeslienson');
en ayant bien évidemment défini les fonctions nécessaires avant. Ceci dit, je ne suis pas bien sûr d'avoir compris ce que tu veux, donc je dis sans doute n'importe quoi. Smiley cligne
Modifié par Eldebaran (14 Nov 2006 - 19:54)
Effectivement, je me suis trompé (j'ai parler sans tester), j'ai fait des tests avec ta méthode, ça marche super. Cela ne correspond pas complétement à mon usage parceque je n'utiliserais pas toute les fonctions, et que mes classes ne se superposent pas. Par contre avec tes fonctions, on pourait presque faire un interface de design web, c'est asser rigolo de passer d'une classe à l'autre avec des boutons.

Mon usage est plus basique et c'est pour cela que j'essaye de le simplifier. Avec ta méthode j'y arrive mais il faut que je rajoute une fonction getElementsByClassName() pour selectionner le "node" de tout les élements à "desactiver", ce qui me fait encore plus de fonctions. Par contre c'est plus générique donc peut-être plus interressant, j'y refléchi...

J'ai mit deux exemples plus clairs pour comprendre exactement ce que je veux faire:

http://www.smart-com.com.mx/spip.php?page=navmenu&id_article=68

http://www.smart-com.com.mx/spip.php?page=magicmenu&id_article=68

Comme les deux vont cohabiter sur les mêmes sites, je ne veux pas qu'ils interférent, mais par contre qu'ils utilisent les mêmes fonctions. je veux aussi qu'ils soient simples et faciles à appliquer dans n'importequel contexte et sur un élement précis. Ils fonctionnent sur IE5 et + et tout les autres navigateurs normaux, j'ai pas encore testé sur safari.
Modifié par matmat (17 Nov 2006 - 04:35)
Sujet clos
Aller à