IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

insertion d'une icone cliquable sur menu JS


Sujet :

JavaScript

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    291
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 291
    Points : 49
    Points
    49
    Par défaut insertion d'une icone cliquable sur menu JS
    Bonjour.J'ai une page avec un menu déroulant affichant mes catégories et mes pages dont le script est celui ci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    <html>
    <head>
    <body background="img.jpg">
     
    <h1><font color="white"><div align= "center"> E.C&T ( Eaux Collectives & Traitements )</div></font></h1> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
     
    <script type="text/javascript" src="ddaccordion.js"></script>
     
    <script type="text/javascript">
     
     
    ddaccordion.init({
    	headerclass: "submenuheader", //Shared CSS class name of headers group
    	contentclass: "submenu", //Shared CSS class name of contents group
    	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
    	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
    	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: true, //persist state of opened contents within browser session?
    	toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	//togglehtml: ["suffix", "<img src='images/plus.gif' class='statusicon' />", "<img src='images/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    		//do nothing
    	},
    	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		//do nothing
    	}
    })
    </script>
     
    <style type="text/css">
     
    .glossymenu{
    margin: 5px 0;
    padding: 0;
    width: 170px; /*width of menu*/
    border: 1px solid #9A9A9A;
    border-bottom-width: 0;
    }
     
    .glossymenu a.menuitem{
    background: black url(glossyback.gif) repeat-x bottom left;
    font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: white;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
    width: auto;
    padding: 4px 0;
    padding-left: 10px;
    text-decoration: none;
    }
     
     
    .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
    color: white;
    }
     
    .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
    position: absolute;
    top: 5px;
    right: 5px;
    border: none;
    }
     
    .glossymenu a.menuitem:hover{
    background-image: url(glossyback2.gif);
    }
     
    .glossymenu div.submenu{ /*DIV that contains each sub menu*/
    background: white;
    }
     
    .glossymenu div.submenu ul{ /*UL of each sub menu*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
     
    .glossymenu div.submenu ul li{
    border-bottom: 1px solid blue;
    }
     
    .glossymenu div.submenu ul li a{
    display: block;
    font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: black;
    text-decoration: none;
    padding: 2px 0;
    padding-left: 10px;
    }
     
    .glossymenu div.submenu ul li a:hover{
    background: #DFDCCB;
    colorz: white;
    }
    </style> 
    </head>
    <body>
     
    <?php
     
    error_reporting(E_ALL);
    	$host="localhost";
    	$user="root"; 
    	$pass="";
    	$db="ect";
     
    mysql_connect($host,$user,$pass) or die("Impossible de se connecter &agrave; la base de donn&eacute;e : $db");
    mysql_select_db($db) or die("Impossible de se connecter &agrave; la base de donn&eacute;e");
     
     
    $r_cat = mysql_db_query($db,"SELECT * FROM cat ORDER BY ordre ASC");
    while($cat = mysql_fetch_assoc($r_cat))
        {
     
       $r_pages= mysql_db_query($db,"SELECT * FROM pages WHERE id_cat= '$cat[id]' ORDER BY ordre ASC");
       $n=mysql_num_rows($r_pages);
       if($n>=1)
      		{
     
       $class='menuitem submenuheader';
       $debut='<div class="submenu"><ul>';
       $fin='</ul></div>';
       	 	}
    	else
    			{
    	$class='menuitem';
    	$debut='';
    	$fin='';
    			}
     
        echo '<div class="glossymenu"><a class="'.$class.'">'.$cat['nom_fr'].'</a>'; 
     
        echo $debut;
        while($pages = mysql_fetch_assoc($r_pages))
    				{
        echo '<li>'.$pages['id'].'<br>'.$pages['titre_fr'].'/'.$pages['titre_en'].'</a></li>'; 
      				}
        echo $fin.'</div>';
     
    	}	
    mysql_close();
    ?> 
    </body>
    </html>
    J'aimerai qu'une petite icone "modifier" s'affiche à coté de chaque catégorie et que quand je clique dessus bé j'ai les pages associées et seulement associées à la catégorie qui s'affiche. J'ai déjà fait ça avec une liste déroulante mais j'aimerai maintenant le faire en cliquant sur une petite icone. Cependant je ne sais pas comment faire cela, ou ajouter le code pour l'insertion de l'icone, dans le javascript, le css ? Merci de me répondre.

    PS: En cliquant sur l'une des catégories du menu, j'ai déjà une action qui s'effectue à savoir le déroulement des pages associées à ma catégorie, c'est là mon premier problème. Mon 2éme sera comment récupérer l'id de la catégorie sur laquelle j'ai appuyé sur l'icone modifier pour pouvoir ensuite utiliser cet id pour le traitement de mes pages !

  2. #2
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Points : 15 059
    Points
    15 059
    Par défaut
    Salut,
    Dans 'li', ton lien n'a pas de balise ouvrante.
    echo '<li>'.$pages['id'].'<br>'.$pages['titre_fr'].'/'.$pages['titre_en'].'</a></li>';
    Essaye de mettre l'icone dans une balise img dans le lien.
    Montre nous le code HTML généré.

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    291
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 291
    Points : 49
    Points
    49
    Par défaut
    La ligne de code que tu m'as montré est celle de l'affichage de mes pages. Je ne veux pas que l'icone s'affiche sur mes onglets pages mais sur les onglets catégories :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    echo '<div class="glossymenu"><a class="'.$class.'">'.$cat['nom_fr'].'</a>';
    .

  4. #4
    Membre du Club
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    291
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 291
    Points : 49
    Points
    49
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     echo '<div class="glossymenu"><a class="'.$class.'">'.$cat['nom_fr'].'<a href= "adminpages2.php"><img src="images.jpg"></a></a>';

    Voilà ce que j'ai fait. L'icone s'affiche meme si elle ne le fait pas comme je souhaite. Mais ça c'est un détail. Maintenant comment faire pour que quand je clique par exemple sur l'icone modifier au niveau de ma première catégorie, seulement les pages liées à cette catégorie dans ma table s'affiche et si jappuie sur l'icone modifier de la 2eme seulement les pages associées à elle s'affiche et etc ...

  5. #5
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Points : 15 059
    Points
    15 059
    Par défaut
    Utilises AJAX dans ce cas, ou bien un système d'onglet.

    http://pckult.developpez.com/tutorie...-onglets-web2/

  6. #6
    Membre du Club
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    291
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 291
    Points : 49
    Points
    49
    Par défaut
    En fait je voudrais garder l'architecture de mon menu en JS, il n'y a pas d'autres méthodes?

  7. #7
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Points : 15 059
    Points
    15 059
    Par défaut
    Dans ce cas utilise AJAX.

    http://ajax.developpez.com/cours/

  8. #8
    Membre du Club
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    291
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 291
    Points : 49
    Points
    49
    Par défaut
    Trop compliqué pour moi, je ne fais que débuter, je ne sais pas ou chercher. Je n'ai pas tellement le temps d'appréhender un nouveau langage, j'ai déjà assez de problèmes avec le JS et le PHP .

  9. #9
    Membre du Club
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    291
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 291
    Points : 49
    Points
    49
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     echo '<form method="post" action="adminpages2.php"><input name="imageField" type="image" value="'.$cat['id'].'" src="images.jpg" border="0"><div class="glossymenu"><a class="'.$class.'">'.$cat['nom_fr'].'</a>';

    J'essaie de créer un formulaire dont le submit serait mon icone modifier, l'icone s'affiche mais quelque soit la catégorie ou j'appuie sur modifier, ça me mène toujours à la meme page et donc ça ne m'affiche pas les pages associées à la catégorie sur laquelle j'ai appuyé sur l'icone modifier.

    Tout ça parce que je n'arrive pas (en cliquant sur mon icone "modifier" à récupérer l'id de ma catégorie) et donc pouvoir m'en servir pour afficher les pages corrrespondantes sur l'autre page ! Aidez moi SVP !

  10. #10
    Membre du Club
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    291
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 291
    Points : 49
    Points
    49
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    echo'<form method="post" action="adminpages2.php" name="categories"><input type="hidden" name="id" value="'.$cat['id'].'" /><input type=image src=images.jpg /></form>';

    Est ce que cette méthode est la bonne à votre avis ?

    J'ai fait ceci, ça affiche les icones mais ça maffiche toujours la meme page quelque soit la catégorie sur laquelle jappuie sur l'icone modifier. En gros je n'arrive pas à récupérer l'id de la catégorie sur laquelle j'ai appuyé sur l'icone modifier.

Discussions similaires

  1. insertion d'une icone sur une liste déroulante
    Par developpeur_débutant dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 01/07/2008, 11h03
  2. Insertion d'une icone dans le SystemTray
    Par Vow dans le forum MFC
    Réponses: 23
    Dernier message: 25/01/2008, 14h50
  3. Ajout icone cliquable sur image
    Par Mengué georges dans le forum 2D
    Réponses: 1
    Dernier message: 24/01/2008, 15h05
  4. [VB.Net] Ajouter une icone dans un menu
    Par developpeur_débutant dans le forum Windows Forms
    Réponses: 2
    Dernier message: 07/11/2006, 22h32
  5. Réponses: 1
    Dernier message: 24/05/2006, 23h27

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo