rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Résolu

[Javascript] Ajout de code onclick sur 1 lien

Posté par neo673, le mercredi 12 septembre 2007 à 17:48:05
Bonjour à tous :))

Sur mon site, j'ai un menu que j'aimerais rendre un peu interactif avec javascript :)

Sur mon menu j'ai un lien Accueil. J'aimerais, quand je clique dessus, les sous-menus s'affichent à la suite.

En d'autres termes plus simples, j'aimerais ajouter quand je clique sur accueil, ce bout de code : 
  <td bgcolor=#336185" class="liensousmenu">
    <img src="entre_ss_titre.png" alt=""/>
    <img src="fleche.png" alt=""/><a class="menuitems" href="index.php?page=identification">Identifica­tion</a>
  </td>
</tr>




Mon lien accueil se présente comme ceci : 
<a class="menuitems" href="index.php?page=news" onclick="ouvre_ss_menu">Accueil</a>



Merci pour votre aide car je suis vraiment mauvais en javascript :)
Configuration: Windows XP
Firefox 2.0.0.6
Répondre à neo673  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
neo673, le mercredi 12 septembre 2007 à 17:49:33
Si c'est possible de le faire en php je suis pas contre , au contraire :))
   
Répondre à neo673

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
PhP, le mercredi 12 septembre 2007 à 18:08:23
Bsr

Oui c'est possible d'ajouter du code HTML dynamiquement avec Javascript.

Mais je ne comprends pas très bien ce que tu veux faire. Lorsque tu cliques sur ton lien Accueil ça te charge déjà la page index.php?page=news non ? Donc ça rique de recharger également ton menu à moins que tu n'utilises des frames.

Pourrais tu poster l'adresse de ta page histoire d'accèder à tout le code ?


PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...
   
Répondre à PhP

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
neo673, le mercredi 12 septembre 2007 à 18:31:03
oui effectivement ca me charge directement la page news, cependant, sous accueil, j'aurai d'autres sections, genre Identification, Recherche Utilisateur etc... et je pensais que ca pouvais être sympa :)

voici le lien : www.duotone.ch/neo/AnciensEtudiants/

Je suis sur que le script ou le code php doit etre tout con :p
   
Répondre à neo673

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
PhP, le jeudi 13 septembre 2007 à 11:09:34
Bonjour

heu non ajouter dynamiquement du code à un tableau en manipulant DOM via Javascript n'est pas une mince affaire .... :-(


En Php c'est assez simple tu passes une variables à ta page et en fonction de sa valeur vrai/faux par ex tu inclus ou tu n'inclus pas le sous-menu. Cependant dès que tu as plusieurs sous-menu ça devient vite compliqué ...


Une autre façon de faire en JavaScript + feuille de style CSS est de jouer sur l'affichage/le masquage des sous-menus grace à l a propriété display. Ta page contient toujours le code des sous-menus : son contenu ne change plus dynamiquement et ça change tout :-) Par contre il faut virer les styles intégrés directement dans les balises (quelle horreur !!!!) et utiliser les feuilles de style.

Ex : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt­d">
<html>
<head>

<style>

*
{
	font-family : arial;
}

.menu
{
	font-size : 12pt;
	font-weight : bold;
	font-color : #0000C0;
}

.sous_menu 
{
	font-size : 10pt;
	font-weight : normal;
	font-color : #0000C0;
	margin-left : 20px;
	display : none;
}

</style>


<script type="text/javascript">
<!--
function toggle(menuID)
{
	var elt = document.getElementById(menuID);


	// Recherche du style en cours : attention le style en cours est read-only!
	var eltStyle = elt.currentStyle || window.getComputedStyle(elt, null);

	if (eltStyle.display == "none")
	{
		elt.style.display = "block";
	}
	else
	{
		elt.style.display = "none";
	}

}

//-->
</script>

</head>

<body>
<table class="menu">
	<tr>
		<td>
			<a href="javascript:void(0);" onclick="toggle('accueil')">Accueil</a>	

			<table id="accueil" class="sous_menu">
				<tr>
					<td>
						<a href="javascript:void(0);">Identification</a­>	
					</td>
				</tr>
				<tr>
					<td>
						<a href="javascript:void(0);">Recherche</a>	­
					</td>
				</tr>
			</table>
					
		</td>
	</tr>
	

	<tr>
		<td>
			<a href="javascript:void(0);" onclick="toggle('etudiant')">Etudiants</a>­;	

			<table id="etudiant" class="sous_menu">
				<tr>
					<td>
						<a href="javascript:void(0);">Sous-menu 1</a>	
					</td>
				</tr>
				<tr>
					<td>
						<a href="javascript:void(0);">Sous-menu 2</a>	
					</td>
				</tr>
			</table>
					
		</td>
	</tr>

</table>

</body>
</html>



je te laisse essayer et t'en inspirer


tester sous IE et FF

Voilà

PhP
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...
   
Répondre à PhP

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
neo673, le jeudi 13 septembre 2007 à 14:32:03
waouh!!!! merci bien :)


cependant comment fait l'utilisateur pour naviguer si les urls sont :

<a href="javascript:void(0);" onclick="toggle('etudiant')">Etudiants</a>­;

je peux pas les redirigé comme ici dans ton exemple vers une page étudiants.


Merci beaucoup pour ton aide en tout cas :))
   
Répondre à neo673

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
PhP, le jeudi 13 septembre 2007 à 15:48:26
Lorsqu'une option d'un menu permet de masquer/afficher des sous-menus comme par ex l'option Etudiant on n'associe généralement pas de lien avec. Seules les sous-options du sous-menu sont censées rediriger vers un lien.
En effet si lorsque tu cliques sur Etudiant tu affiches le sous-menu qui disparâit aussitôt pour laisser la place à une nouvelle page à quoi bon ?

Normalement un menu ne devrait jamais être rechargé. Cependant afin de ne pas se brider avec les frames c'est souvent ce qu'on fait.



Par contre en PhP on peut éventuellemnt changé de pages en pré-déroulant un menu donné.

Par ex
1 : Tu charges ta page d'accueil avec le menu : aucun sous-menu n'est affiché
2 : Tu cliques sur le lien Etudiant
3 : La page Etudiant est alors chargée : cette page contient également le menu et affiche le sous-menu étudiant

Ce qui donne :

styles.css (feuille de styles) : 


*
{
	font-family : arial;
}

.menu
{
	font-size : 12pt;
	font-weight : bold;
	font-color : #0000C0;
}

.sous_menu 
{
	font-size : 10pt;
	font-weight : normal;
	font-color : #0000C0;
	margin-left : 20px;
}

.titre
{
	font-size : 18pt;
	font-weight : bold;
}





main.php (page de démarrage) : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt­d">
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>
<?php
include('menu.php');
?>
</body>
</html>




menu.php : 

<?php
$menuID="";
if (isset($_GET["menuID"])) $menuID=$_GET["menuID"];
?>
<table class="menu" width="200px">
	<tr>
		<td>
			<a href="page_accueil.php?menuID=accueil">Accueil&­lt;/a>	
			<?php
				if ($menuID == "accueil")
				{

					include("sousmenu_accueil.php");
				}
			?>
					
		</td>
	</tr>
	

	<tr>
		<td>
			<a href="page_etudiant.php?menuID=etudiant">Etudia­nts</a>	

			<?php
				if ($menuID == "etudiant")
				{

					include("sousmenu_etudiant.php");
				}
			?>
					
		</td>
	</tr>
</table>




page_acccueil.php : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt­d">
<html>
<head>
<title>Page accueil</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>
<table>
	<tr>
		<td>
		<?php 
			include('menu.php');
		?>
		</td>
		
		<td>
			<p class="titre">Vous êtes sur la page accueil ! </p>
		</td>
	</tr>
</table>
</body>
</html>



page_etudiant.php : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt­d">
<html>
<head>
<title>Page étudiant</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>
<table>
	<tr>
		<td>
		<?php 
			include('menu.php');
		?>
		</td>
		
		<td>
			<p class="titre">Vous êtes sur la page étudiant ! </p>
		</td>
	</tr>
</table>
</body>
</html>




Copie toutes les pages dans un sous-répertoire accessible à ton serveur PHP en les nommants comme indiqué puis lance
http://(adresse de ton serveu PHP)/main.php


PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...
   
Répondre à PhP

7


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
neo673, le vendredi 14 septembre 2007 à 11:14:48
merci encore pour ton aide ;)

je l'ai fais selon ton exemple en php,ca fonctionne pas mal !!

http://www.duotone.ch/neo/AnciensEtudiants/index.php

ps : les erreurs d'include c'est normal j'ai pas encore mis les pages derrière ;)

Problème résolu donc ;) merci !!
   
Répondre à neo673

8


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 PhP, le vendredi 14 septembre 2007 à 18:02:09
Bjr

Oui en effet c nickel comme ça ;-)

En plus avec le haut débit on a l'impression d'avoir affaire à un vrai menu.


Bon développement.

@+

PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...
   
Répondre à PhP
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger Taskbar Repair Tool Plus! 1.1.1Taskbar Repair Tool Plus! - Taskbar Repair Tool Plus! est un logiciel uniquement valable pour Windows XP. Il vous permet de personnaliser la barre des...Catégorie: Personnalisation
Licence: Freeware/gratuit
Télécharger CustomizeGoogle 0.54CustomizeGoogle - Comme beaucoup de monde, vous êtes probablement utilisateur de Google. Mais Google n'est pas parfait. Cette extension vous...Catégorie: Extensions Firefox
Licence: Open Source
Télécharger SpaceTime 1.0SpaceTime - Pour plus de fluidité et d'ergonomie dans vos recherches sur le web, en mode interactif, c'est encore mieux. Space Time est...Catégorie: Internet
Licence: Freeware/gratuit
Télécharger Vista Codec Package 4.7.2Vista Codec Package - Vista Codec Package regroupe une collection impressionnante de codecs (audio et vidéo), permettant d'ouvrir la plupart...Catégorie: Codecs
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « [Javascript] Ajout de code onclick sur 1 lien »