11548 sujets

JavaScript, DOM et API Web HTML5

[résolut]Menu déroulant javascript avec du php

J'ai un menu déroulant en javascript dont le menu son définit grace à ce fichier:

var MENU_ITEMS =(
("Municipalité", HREF="municipalite.htm",
["Petit historique", HREF="municipalite.htm"],
["Situation géographique", HREF="geo.htm"],
["Population", HREF="pop.htm"],
["Ressources naturelles", HREF="ressources.htm"],
["Patrimoine", HREF="patrimoine.htm"],
["Vitrine technologique", HREF="techno.htm"]
),

("Paroisse", HREF="paroisse.htm",
["Petit historique", HREF="paroisse.htm"],
["Biens de la fabrique", HREF="biens.htm"],
["Livre du 75ème", HREF="75eme.php"],
["Recherche d'un avenir", HREF="avenir.htm"]
],
("École", HREF="ecole.htm",
["Petit historique", HREF="ecole.htm"],
["École et communauté", HREF="communaute.htm"],
["Collaboration", HREF="collaboration.htm"],
["Travaux d'élèves", HREF="eleves.htm"],
),

("Forêt", HREF="foret.htm",
["Évolution et avenir", HREF="etat.htm"],
["Scierie actuelle", HREF="scierie.htm"],
["Lots privés", HREF="lots.htm"],
["Plantations", HREF="plantations.htm"]
),
("Agriculture", HREF="agriculture.htm",
["Production laitière", HREF="lait.htm"],
["Production bovine", HREF="boeuf.htm"],
["Production ovine", HREF="poulet.htm"],
["Production porcine", HREF="porc.htm"]
),

("Entreprises", HREF="entreprises.htm",
["new item", HREF="entreprises.htm"],
["new item", HREF="entreprises.htm"],
["new item", HREF="entreprises.htm"]
),
("O.B.N.L.", HREF="obnl.htm",
["new item", HREF="obnl.htm"],
["new item", HREF="obnl.htm"]
),

("Bloc-Notes", HREF="blocnote.htm",
),

("Liens", HREF="liens.htm",
)
);

J'appele ce fichier de cette manière
<script language="JavaScript" src="menu.js"></script>

La question est la suivant:

Au endroit où c'est écrit new item je doit entré les nom et les pages qu'une fonction php me revoie.

Comment je fait pour envoyer à ce fichier (menu.js) des paramètres et comment je fait pour récupérer ces paramètres.

Merci pour votre aide
Blackmetal
Modifié le 09 Feb 2005 - 22:26
Bonjour,

Merci d'utiliser les balises appropriées pour présenter du code dans les messages ([ code][ /code] sans les espaces.
Modifié le 07 Feb 2005 - 20:14
si c'est sa que tu voulais c'est correct sinon je vois pas ce que tu veux dire.
Pour l'indentation à veux pas passer je comprend pas
les tabulations passer pas au début je les est changer en espace et sa change rien.

Mais bon si le code te semble plus approprié à la lecture peux- tu me donner un coup de main.

Merci
BlackMetal

P.S je m'y connais en prog mais c'est la première fois que je me tente au javascript pace que je trouve pas sa assez compatible avec tout les navigateurs. Sa fait que scusé pour la non normalité du code.
Non, ce qu'il voulait dire, c'est que si tu as du code à poster, tu dois faire comme ça:
[ code]
(^ sans cet espace)

Ici, ton code <p>HTML</p>, <? echo "PHP"; ?> ou autre
[/ code]
( ^ et sans celui-là )

Ce qui donne.
Ici, ton code <p>HTML</p>, <? echo "PHP"; ?> ou autre


@+, HoPHP

P.S. Je n'ai pas vu ton code d'avant, mais idente ton code, ce sera beaucoup mieux et plus agréable à la lecture.
Modifié le 07 Feb 2005 - 20:50
ok je réexplique.
Mon code est déja indenté quand je l'ai écrit mais je sais pas pourquoi mais les espace en début de ligne n'apparaissent pas.
Donc pour l'indentation on laisse faire.

Et le code est la en entier
il est dans un fichier menu_item.js et il n'y a que sa dans le fichier pas de html ou php

ce que je fais je peut vous donner le code que j'utilise pour appeller cette cette objet

j'appelle le tout comme suit:

[code]
<html>

<head>
<p><a href="index.php"><img src="images/bandeau_01_stjos.jpg" width="755" height="100" border="0"></a>
<script language="JavaScript" src="menu.js"></script>
<script language="JavaScript" src="menu_items.js"></script>
<script language="JavaScript" src="menu_tpl2.js"></script>
<script language="JavaScript">
<!--//
new menu (MENU_ITEMS, MENU_POS, MENU_STYLES);
//-->
</script>
</p>

</head>

<body>

</body>

</html>

menu.js:

var menus = [];

// --- menu class ---
function menu (item_struct, pos, styles) {
// browser check
this.item_struct = item_struct;
this.pos = pos;
this.styles = styles;
this.id = menus.length;
this.items = [];
this.children = [];

this.add_item = menu_add_item;
this.hide = menu_hide;

this.onclick = menu_onclick;
this.onmouseout = menu_onmouseout;
this.onmouseover = menu_onmouseover;
this.onmousedown = menu_onmousedown;

var i;
for (i = 0; i < this.item_struct.length; i++)
new menu_item(i, this, this);
for (i = 0; i < this.children.length; i++)
this.children.visibility(true);
menus[this.id] = this;
}
function menu_add_item (item) {
var id = this.items.length;
this.items Smiley id = item;
return (id);
}
function menu_hide () {
for (var i = 0; i < this.items.length; i++) {
this.items[i].visibility(false);
this.items[i].switch_style('onmouseout');
}
}
function menu_onclick (id) {
var item = this.items Smiley id ;
return (item.fields[1] ? true : false);
}
function menu_onmouseout (id) {
this.hide_timer = setTimeout('menus['+ this.id +'].hide();',
this.pos['hide_delay'][this.active_item.depth]);
if (this.active_item.id == id)
this.active_item = null;
}
function menu_onmouseover (id) {
this.active_item = this.items Smiley id ;
clearTimeout(this.hide_timer);
var curr_item, visib;
for (var i = 0; i < this.items.length; i++) {
curr_item = this.items[i];
visib = (curr_item.arrpath.slice(0, curr_item.depth).join('_') ==
this.active_item.arrpath.slice(0, curr_item.depth).join('_'));
if (visib)
curr_item.switch_style (
curr_item == this.active_item ? 'onmouseover' : 'onmouseout');
curr_item.visibility(visib);
}
}
function menu_onmousedown (id) {
this.items Smiley id .switch_style('onmousedown');
}
// --- menu item Class ---
function menu_item (path, parent, container) {
this.path = new String (path);
this.parent = parent;
this.container = container;
this.arrpath = this.path.split('_');
this.depth = this.arrpath.length - 1;
// get pointer to item's data in the structure
var struct_path = '', i;
for (i = 0; i <= this.depth; i++)
struct_path += '[' + (Number(this.arrpath[i]) + (i ? 2 : 0)) + ']';
eval('this.fields = this.container.item_struct' + struct_path);
if (!this.fields) return;

// assign methods
this.get_x = mitem_get_x;
this.get_y = mitem_get_y;
// these methods may be different for different browsers (i.e. non DOM compatible)
this.init = mitem_init;
this.visibility = mitem_visibility;
this.switch_style = mitem_switch_style;

// register in the collections
this.id = this.container.add_item(this);
parent.children[parent.children.length] = this;

// init recursively
this.init();
this.children = [];
var child_count = this.fields.length - 2;
for (i = 0; i < child_count; i++)
new menu_item (this.path + '_' + i, this, this.container);
this.switch_style('onmouseout');
}
function mitem_init() {
document.write (
'<a id="mi_' + this.container.id + '_'
+ this.id +'" class="m' + this.container.id + 'l' + this.depth
+'o" href="' + this.fields[1] + '" style="position: absolute; top: '
+ this.get_y() + 'px; left: ' + this.get_x() + 'px; width: '
+ this.container.pos['width'][this.depth] + 'px; height: '
+ this.container.pos['height'][this.depth] + 'px; visibility: hidden;'
+' background: black; color: white; z-index: ' + this.depth + ';" '
+ 'onclick="return menus[' + this.container.id + '].onclick('
+ this.id + ');" onmouseout="menus[' + this.container.id + '].onmouseout('
+ this.id + ');" onmouseover="menus[' + this.container.id + '].onmouseover('
+ this.id + ');" onmousedown="menus[' + this.container.id + '].onmousedown('
+ this.id + ');"><div class="m' + this.container.id + 'l' + this.depth + 'i">'
+ this.fields[0] + "</div></a>\n"
);
this.element = document.getElementById('mi_' + this.container.id + '_' + this.id);
}
function mitem_visibility(make_visible) {
if (make_visible != null) {
if (this.visible == make_visible) return;
this.visible = make_visible;
if (make_visible)
this.element.style.visibility = 'visible';
else if (this.depth)
this.element.style.visibility = 'hidden';
}
return (this.visible);
}
function mitem_get_x() {
var value = 0;
for (var i = 0; i <= this.depth; i++)
value += this.container.pos['block_left'][i]
+ this.arrpath[i] * this.container.pos['left'][i];
return (value);
}
function mitem_get_y() {
var value = 0;
for (var i = 0; i <= this.depth; i++)
value += this.container.pos['block_top'][i]
+ this.arrpath[i] * this.container.pos['top'][i];
return (value);
}
function mitem_switch_style(state) {
if (this.state == state) return;
this.state = state;
var style = this.container.styles Smiley state ;
for (var i = 0; i < style.length; i += 2)
if (style[i] && style[i+1])
eval('this.element.style.' + style[i] + "='"
+ style[i+1][this.depth] + "';");
}

menu_tpl2.js

var MENU_POS = new Array();

MENU_POS['height'] = [20, 20];
MENU_POS['width'] = [84, 115];

MENU_POS['block_top'] = [115, 20];
MENU_POS['block_left'] = [10, 0];

MENU_POS['top'] = [0, 20];
MENU_POS['left'] = [84, 0];

MENU_POS['hide_delay'] = [200, 200];

menu_item.js

var MENU_ITEMS =[
["Municipalité", HREF="municipalite.htm",
["Petit historique", HREF="municipalite.htm"],
["Situation géographique", HREF="geo.htm"],
["Population", HREF="pop.htm"],
["Ressources naturelles", HREF="ressources.htm"],
["Patrimoine", HREF="patrimoine.htm"],
["Vitrine technologique", HREF="techno.htm"]
],
["Paroisse", HREF="paroisse.htm",
["Petit historique", HREF="paroisse.htm"],
["Biens de la fabrique", HREF="biens.htm"],
["Livre du 75ème", HREF="75eme.php"],
["Recherche d'un avenir", HREF="avenir.htm"]
],
["École", HREF="ecole.htm",
["Petit historique", HREF="ecole.htm"],
["École et communauté", HREF="communaute.htm"],
["Collaboration", HREF="collaboration.htm"],
["Travaux d'élèves", HREF="eleves.htm"],
],
["Forêt", HREF="foret.htm",
["Évolution et avenir", HREF="etat.htm"],
["Scierie actuelle", HREF="scierie.htm"],
["Lots privés", HREF="lots.htm"],
["Plantations", HREF="plantations.htm"]
],
["Agriculture", HREF="agriculture.htm",
["Production laitière", HREF="lait.htm"],
["Production bovine", HREF="boeuf.htm"],
["Production ovine", HREF="poulet.htm"],
["Production porcine", HREF="porc.htm"]
],
["Entreprises", HREF="entreprises.htm",
["new item", HREF="entreprises.htm"],
["new item", HREF="entreprises.htm"],
["new item", HREF="entreprises.htm"]
],
["O.B.N.L.", HREF="obnl.htm",
["new item", HREF="obnl.htm"],
["new item", HREF="obnl.htm"]
],
["Bloc-Notes", HREF="blocnote.htm",
],
["Liens", HREF="liens.htm",
]
];

Voici tout le code utilisé pour le menu déroulant
j'ai fait du copier coller si l'indentation est pas visible elle est pourtant visible.
La totalité du code est présent.[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
Bonjour blackmetal,

Surtout ne reposte pas de nouveau, tu peux intervenir dans ton message en utilisant le bouton "Editer" de ton post en ligne Smiley cligne

Ce que demande Igor, c'est que tu utilises le bouton "code" dans ton message afin de baliser ton code, il sera ainsi beaucoup plus lisible pour tous Smiley smile ... Et l'aide n'en sera que plus facile Smiley cligne

Merci d'avance !
Administrateur
Petite précision : si tu ne sais pas comment éditer / modifier tes messages, tu trouveras les explications dans la FAQ du forum... et si vraiment tu ne t'en sors pas, demande comment procéder, mais évite d'afficher une fois de plus ton code sans balisage approprié Smiley ohwell

a écrit :
Mon code est déja indenté quand je l'ai écrit mais je sais pas pourquoi mais les espace en début de ligne n'apparaissent pas.
Donc pour l'indentation on laisse faire.

Cela sera réglé lorsque tu auras utilisé le bouton [ CODE] en éditant tes messages Smiley smile
On va gagner du temps.

<html>

<head>
<p><a href="index.php"><img src="images/bandeau_01_stjos.jpg" width="755" height="100" border="0"></a> 
<script language="JavaScript" src="menu.js"></script>
<script language="JavaScript" src="menu_items.js"></script>
<script language="JavaScript" src="menu_tpl2.js"></script>
<script language="JavaScript">
<!--//
new menu (MENU_ITEMS, MENU_POS, MENU_STYLES);
//-->
</script>
</p>

</head>

<body>

</body>

</html>

menu.js:

var menus = [];

// --- menu class ---
function menu (item_struct, pos, styles) {
// browser check
this.item_struct = item_struct;
this.pos = pos;
this.styles = styles;
this.id = menus.length;
this.items = [];
this.children = [];

this.add_item = menu_add_item;
this.hide = menu_hide;

this.onclick = menu_onclick;
this.onmouseout = menu_onmouseout;
this.onmouseover = menu_onmouseover;
this.onmousedown = menu_onmousedown;

var i;
for (i = 0; i < this.item_struct.length; i++)
new menu_item(i, this, this);
for (i = 0; i < this.children.length; i++)
this.children.visibility(true);
menus[this.id] = this;
}
function menu_add_item (item) {
var id = this.items.length;
this.items  = item;
return (id);
}
function menu_hide () {
for (var i = 0; i < this.items.length; i++) {
this.items.visibility(false);
this.items.switch_style('onmouseout');
}
}
function menu_onclick (id) {
var item = this.items  ;
return (item.fields[1] ? true : false);
}
function menu_onmouseout (id) {
this.hide_timer = setTimeout('menus['+ this.id +'].hide();',
this.pos['hide_delay'][this.active_item.depth]);
if (this.active_item.id == id)
this.active_item = null;
}
function menu_onmouseover (id) {
this.active_item = this.items  ;
clearTimeout(this.hide_timer);
var curr_item, visib;
for (var i = 0; i < this.items.length; i++) {
curr_item = this.items;
visib = (curr_item.arrpath.slice(0, curr_item.depth).join('_') ==
this.active_item.arrpath.slice(0, curr_item.depth).join('_'));
if (visib)
curr_item.switch_style (
curr_item == this.active_item ? 'onmouseover' : 'onmouseout');
curr_item.visibility(visib);
}
}
function menu_onmousedown (id) {
this.items  .switch_style('onmousedown');
}
// --- menu item Class ---
function menu_item (path, parent, container) {
this.path = new String (path);
this.parent = parent;
this.container = container;
this.arrpath = this.path.split('_');
this.depth = this.arrpath.length - 1;
// get pointer to item's data in the structure
var struct_path = '', i;
for (i = 0; i <= this.depth; i++)
struct_path += '[' + (Number(this.arrpath) + (i ? 2 : 0)) + ']';
eval('this.fields = this.container.item_struct' + struct_path);
if (!this.fields) return;

// assign methods 
this.get_x = mitem_get_x;
this.get_y = mitem_get_y;
// these methods may be different for different browsers (i.e. non DOM compatible)
this.init = mitem_init;
this.visibility = mitem_visibility;
this.switch_style = mitem_switch_style;

// register in the collections
this.id = this.container.add_item(this);
parent.children[parent.children.length] = this;

// init recursively
this.init();
this.children = [];
var child_count = this.fields.length - 2;
for (i = 0; i < child_count; i++)
new menu_item (this.path + '_' + i, this, this.container);
this.switch_style('onmouseout');
}
function mitem_init() {
document.write (
'<a id="mi_' + this.container.id + '_'
+ this.id +'" class="m' + this.container.id + 'l' + this.depth 
+'o" href="' + this.fields[1] + '" style="position: absolute; top: '
+ this.get_y() + 'px; left: ' + this.get_x() + 'px; width: '
+ this.container.pos['width'][this.depth] + 'px; height: '
+ this.container.pos['height'][this.depth] + 'px; visibility: hidden;'
+' background: black; color: white; z-index: ' + this.depth + ';" '
+ 'onclick="return menus[' + this.container.id + '].onclick('
+ this.id + ');" onmouseout="menus[' + this.container.id + '].onmouseout('
+ this.id + ');" onmouseover="menus[' + this.container.id + '].onmouseover('
+ this.id + ');" onmousedown="menus[' + this.container.id + '].onmousedown('
+ this.id + ');"><div class="m' + this.container.id + 'l' + this.depth + 'i">'
+ this.fields[0] + "</div></a>\n"
);
this.element = document.getElementById('mi_' + this.container.id + '_' + this.id);
}
function mitem_visibility(make_visible) {
if (make_visible != null) {
if (this.visible == make_visible) return;
this.visible = make_visible;
if (make_visible)
this.element.style.visibility = 'visible';
else if (this.depth)
this.element.style.visibility = 'hidden';
}
return (this.visible);
}
function mitem_get_x() {
var value = 0;
for (var i = 0; i <= this.depth; i++)
value += this.container.pos['block_left']
+ this.arrpath * this.container.pos['left'];
return (value);
}
function mitem_get_y() {
var value = 0;
for (var i = 0; i <= this.depth; i++)
value += this.container.pos['block_top']
+ this.arrpath * this.container.pos['top'];
return (value);
}
function mitem_switch_style(state) {
if (this.state == state) return;
this.state = state;
var style = this.container.styles  ;
for (var i = 0; i < style.length; i += 2)
if (style && style[i+1])
eval('this.element.style.' + style + "='" 
+ style[i+1][this.depth] + "';");
}

menu_tpl2.js

var MENU_POS = new Array();

MENU_POS['height'] = [20, 20];
MENU_POS['width'] = [84, 115];

MENU_POS['block_top'] = [115, 20];
MENU_POS['block_left'] = [10, 0];

MENU_POS['top'] = [0, 20];
MENU_POS['left'] = [84, 0];

MENU_POS['hide_delay'] = [200, 200];

menu_item.js

var MENU_ITEMS =[
["Municipalité", HREF="municipalite.htm",
["Petit historique", HREF="municipalite.htm"],
["Situation géographique", HREF="geo.htm"],
["Population", HREF="pop.htm"],
["Ressources naturelles", HREF="ressources.htm"],
["Patrimoine", HREF="patrimoine.htm"],
["Vitrine technologique", HREF="techno.htm"]
],
["Paroisse", HREF="paroisse.htm",
["Petit historique", HREF="paroisse.htm"],
["Biens de la fabrique", HREF="biens.htm"],
["Livre du 75ème", HREF="75eme.php"],
["Recherche d'un avenir", HREF="avenir.htm"]
],
["École", HREF="ecole.htm",
["Petit historique", HREF="ecole.htm"],
["École et communauté", HREF="communaute.htm"],
["Collaboration", HREF="collaboration.htm"],
["Travaux d'élèves", HREF="eleves.htm"],
],
["Forêt", HREF="foret.htm",
["Évolution et avenir", HREF="etat.htm"],
["Scierie actuelle", HREF="scierie.htm"],
["Lots privés", HREF="lots.htm"],
["Plantations", HREF="plantations.htm"]
],
["Agriculture", HREF="agriculture.htm",
["Production laitière", HREF="lait.htm"],
["Production bovine", HREF="boeuf.htm"],
["Production ovine", HREF="poulet.htm"],
["Production porcine", HREF="porc.htm"]
],
["Entreprises", HREF="entreprises.htm",
["new item", HREF="entreprises.htm"],
["new item", HREF="entreprises.htm"],
["new item", HREF="entreprises.htm"]
],
["O.B.N.L.", HREF="obnl.htm",
["new item", HREF="obnl.htm"],
["new item", HREF="obnl.htm"]
],
["Bloc-Notes", HREF="blocnote.htm",
],
["Liens", HREF="liens.htm",
]
];
blackmetal a écrit :
La question est la suivant:

Au endroit où c'est écrit new item je doit entré les nom et les pages qu'une fonction php me revoie.

Comment je fait pour envoyer à ce fichier (menu.js) des paramètres et comment je fait pour récupérer ces paramètres.


La fonction php doit être utilisée dans le fichier menu.js (qui devient du coup un menu.php) pour écrire les noms des pages. Et c'est horrible.
Laisser faire j'ai régler le problème le simple fait de m'avoir dit de changer mon *.js en *.php a tout régler sa fait que sa server à rien de critiquer le code que j'avais mis puis qu'il été inutile à la résolution du problème.

Blackmetal
Administrateur
blackmetal a écrit :
sa server à rien de critiquer le code que j'avais mis puis qu'il été inutile à la résolution du problème.

Personne n'a critiqué ton code.
Tout ce que les membres ont essayé de dire depuis le début, c'est que tu ne l'affichais pas correctement sur ce forum.
Pour cela, tout le monde te l'a indiqué, il te suffisait de l'entourer avec les [ CODE], comme Laurent Denis l'a fait un peu plus haut.
C'était simplement ça. Rien à voir avec le fond, mais avec la forme.

Donc à l'avenir, merci d'utilier les boutons de forum CODE pour entourer les codes que tu montres, ok ? Smiley cligne
Bonjour blackmetal Smiley smile

En effet, il n'y avait aucune critique de ton code, mais seulement un malentendu sur la façon dont le code doit être affiché pour qu'il soit facilement lisible.

Si ton problème est résolu, peux tu placer, stp, dans le titre de ton sujet un [Résolu]... Facile Smiley cligne ... Il suffit juste de cliquer sur le bouton "Editer" de ton premier post, tout en haut de cette page et tu pourras faire la modif.

Merci d'avance ! Smiley smile
Sujet clos
Aller à