Se connecter / S'enregistrer
Votre question

Javascript : oncontextmenu non globals

Tags :
  • Programme
  • Programmation
Dernière réponse : dans Programmation
27 Juin 2007 21:58:12

Bonjour,
je programme (ou plutôt j'assemble) un systeme d'onglet en js auquel je voudrais integrer un menu contextuel seulement pour les onglets :pfff: 
  1. //Ceci marche :
  2. document.oncontextmenu=showmenuIE
  3. // THEORIQUEMENT ceci marche ...
  4. GetElement("Onglet1").oncontextmenu=showmenuIE

En fait il faut un menu different (on passera des parametres)
pour chaque onglet
(pour l'instant on se contente d'un onglet :heink:  ).
Voici la code complet de la page :
  1. <html>
  2. <head>
  3. <title>Exemple d'onglet</title>
  4. <script type="text/javascript">
  5. // - - - - - - - - - - - - - - - - - - - - - -
  6. // fonctions js pour les cookie
  7. // origine : <a href="http://www.w3schools.com/js/js_cookies.asp" rel="nofollow" target="_blank">http://www.w3schools.com/js/js_cookies.asp</a>
  8. // juste quelques modifs...
  9. // - - - - - - - - - - - - - - - - - - - - - -
  10. var NCookie = 'TestOnglet'
  11.  
  12. function getCookie(){
  13. if (document.cookie.length>0){
  14. c_start=document.cookie.indexOf(NCookie + "=")
  15. if (c_start!=-1){
  16. c_start=c_start + NCookie.length+1
  17. c_end=document.cookie.indexOf(";",c_start)
  18. if (c_end==-1) c_end=document.cookie.length
  19. return unescape(document.cookie.substring(c_start,c_end))
  20. }
  21. }
  22. return ""
  23. }
  24.  
  25. function setCookie(value){
  26. var Expirdate=new Date()
  27. Expirdate.setDate(Expirdate.getDate()+365)
  28. document.cookie=NCookie+ "=" +escape(value)+"; expires="+Expirdate.toGMTString()
  29. }
  30.  
  31. function loadCookie(){
  32. SaveOnglet=getCookie()
  33. if (SaveOnglet!=null && SaveOnglet!=""){
  34. InfoOnglet=SaveOnglet.split('||');
  35. for (var i=1; i < InfoOnglet.length; i++){
  36. NewOnglet(InfoOnglet[i], 'False')
  37. }
  38. } else {
  39. NewOnglet('include.php', 'False')
  40. }
  41. }
  42. // - - - - - - - - - - - - - - - - - - - - - -
  43. // Fonctions inspirées de <a href="http://www.editeurjavascript.com/scripts/scripts_navigation_3_182.php" rel="nofollow" target="_blank">http://www.editeurjavascript.com/scripts/scripts_naviga...</a>
  44. // et pour LoadContent de <a href="http://www.developpez.net/forums/showthread.php?t=293533" rel="nofollow" target="_blank">http://www.developpez.net/forums/showthread.php?t=29353...</a>
  45. // - - - - - - - - - - - - - - - - - - - - - -
  46.  
  47. var NumberOnglet = 1;
  48. var AdrOnglet = new Array("ErrorPage");
  49. var NomOnglet = new Array("Error");
  50.  
  51. function LoadContent(File,Content){
  52.  
  53. if(window.XMLHttpRequest) // FIREFOX
  54. xhr_object = new XMLHttpRequest();
  55. else if(window.ActiveXObject) // IE
  56. xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
  57. else
  58. NewContenu = 'false';
  59.  
  60. xhr_object.open("GET", File, false);
  61. xhr_object.send(null);
  62. if(xhr_object.readyState == 4)
  63. NewContenu = xhr_object.responseText;
  64. else
  65. NewContenu = 'False';
  66.  
  67. NewContenu = NewContenu.split('[Separator]');
  68. if (Content == 'Titre'){
  69. return NewContenu[0];
  70. }
  71. else {
  72. return NewContenu[1];
  73. }
  74. }
  75.  
  76. function NewOnglet(Url, Register){
  77. AdrOnglet['Onglet'+NumberOnglet] = LoadContent(Url,'Contenu')
  78. NomOnglet['Onglet'+NumberOnglet] = LoadContent(Url,'Titre')
  79. var Code = '<a id="Onglet'+NumberOnglet+'" class="ongletInactif" href="javascript:OngletStatus(\'Onglet'+NumberOnglet+'\')">'+NomOnglet['Onglet'+NumberOnglet]+'</a>';
  80. if (document.getElementById("Onglet")){
  81. div = document.getElementById("Onglet");
  82. div.innerHTML = div.innerHTML+Code;
  83. NumberOnglet++;
  84. if (Register != 'False') {
  85. setCookie(getCookie()+'||'+Url);
  86. }
  87. }
  88. TempNumber = NumberOnglet;
  89. TempNumber--;
  90. OngletStatus('Onglet'+TempNumber);
  91. }
  92.  
  93. function OngletStatus(Name){
  94. var NumOnglet = 1;
  95. while (document.getElementById("Onglet" + NumOnglet)){
  96. SetOnglet = document.getElementById("Onglet" + NumOnglet);
  97. if (SetOnglet){
  98. SetOnglet.className = 'ongletInactif';
  99. }
  100. NumOnglet++;
  101. }
  102. document.title=(NomOnglet[Name]);
  103. LinkOnglet = document.getElementById(Name);
  104. //LinkOnglet.className = ( LinkOnglet.className == 'ongletActif' ) ? 'ongletInactif' : 'ongletActif';
  105. LinkOnglet.className = 'ongletActif';
  106. if (document.getElementById("Content")){
  107. div = document.getElementById("Content");
  108. div.innerHTML = AdrOnglet[Name];
  109. }
  110. }
  111.  
  112.  
  113. </script>
  114. <style type="text/css">
  115.  
  116. .ongletInactif {
  117. position:relative ;
  118. font-size : 16px ;
  119. float:left ;
  120. width:125px ;
  121. height:28px ;
  122. /* top:1px ; Baisser l'onglet */
  123. background : url(OngletInactif.png) bottom no-repeat ; /* image de fond de la boite float, calée en bas */
  124. text-align:center} /* Le texte des onglets est centré */
  125.  
  126. a.ongletInactif:hover {color:pink} /* lors du survol d'un lien, la police devient verte */
  127.  
  128. .ongletActif { /* style de l'onglet de la page active */
  129. position:relative ; /* l'onglet inactif est mis en position relative */
  130. float:left ; /* boite en mode float, pour pouvoir en définir la largeur */
  131. width:125px ; /* largeur de la boite float */
  132. height:28px ;
  133. background : url(OngletActif.png) bottom no-repeat;
  134. text-align:center} /* Le texte des onglets est centré */}
  135.  
  136. </style>
  137. <style>
  138. <!--
  139.  
  140. /* Context menu Script- © Dynamic Drive (<a href="http://www.dynamicdrive.com" rel="nofollow" target="_blank">www.dynamicdrive.com</a>) Last updated: 01/08/22
  141. For full source code and Terms Of Use, visit <a href="http://www.dynamicdrive.com" rel="nofollow" target="_blank">http://www.dynamicdrive.com</a> */
  142.  
  143. .skin0{
  144. position:absolute;
  145. width:165px;
  146. border:2px solid black;
  147. background-color:menu;
  148. font-family:Verdana;
  149. line-height:20px;
  150. cursor:default;
  151. font-size:14px;
  152. z-index:100;
  153. visibility:hidden;
  154. }
  155.  
  156. .menuitems{
  157. padding-left:10px;
  158. padding-right:10px;
  159. }
  160. -->
  161. </style>
  162. </head>
  163. <body onLoad="loadCookie();">
  164. <a href="javascript:NewOnglet('include.php','True')">Nouvel onglet</a>
  165. <a href="javascript:NewOnglet('salut.txt', 'False')">Nouvel onglet2</a>
  166. <br>
  167. <br>
  168. <div id="Onglet"><!-- début de la boite contenant les onglets -->
  169. </div>
  170. <!--
  171. <script language="JavaScript">
  172. GetElement("Onglet3").oncontextmenu = ContextMenu()
  173. </script>
  174. -->
  175. <br>
  176. <br>
  177. <div id="Content"><!-- début de la boite contenant la page -->
  178. </div>
  179.  
  180. <div id="IEmenu" class="skin0" onMouseover="highlightIE(event)" onMouseout="lowlightIE(event)" onClick="jumptoIE(event)" display:none>
  181. <div class="menuitems" url="<a href="http://dynamicdrive.com" rel="nofollow" target="_blank">http://dynamicdrive.com</a>">Dynamicdrive.com</div>
  182. <div class="menuitems" url="<a href="http://dynamicdrive.com/new.htm" rel="nofollow" target="_blank">http://dynamicdrive.com/new.htm</a>" target="newwin">What's New?</div>
  183. <div class="menuitems" url="<a href="http://dynamicdrive.com/hot.htm" rel="nofollow" target="_blank">http://dynamicdrive.com/hot.htm</a>">What's Hot?</div>
  184. <div class="menuitems" url="<a href="http://wsabstract.com/cgi-bin/Ultimate.cgi" rel="nofollow" target="_blank">http://wsabstract.com/cgi-bin/Ultimate.cgi</a>">Message Forum</div>
  185. <div class="menuitems" url="<a href="http://dynamicdrive.com/faqs.htm" rel="nofollow" target="_blank">http://dynamicdrive.com/faqs.htm</a>">FAQs</div>
  186. <div class="menuitems" url="<a href="http://dynamicdrive.com/submitscript.htm" rel="nofollow" target="_blank">http://dynamicdrive.com/submitscript.htm</a>">Submit</div>
  187. <hr>
  188. <div class="menuitems" url="mailto:dynamicdrive@yahoo.com">Email Us</div>
  189.  
  190. </div>
  191.  
  192. <script language="JavaScript1.2">
  193.  
  194. var IE=document.all&&document.getElementById
  195. var NS=document.getElementById&&!document.all
  196.  
  197. if (IE||NS)
  198. var menuobj=document.getElementById("IEmenu")
  199.  
  200. function showmenuIE(e){
  201. movemenuIE(e);
  202. menuobj.style.visibility="visible"
  203. return false;
  204. }
  205. function movemenuIE(e){
  206. //Find out how close the mouse is to the corner of the window
  207. var rightedge=IE? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX
  208. var bottomedge=IE? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY
  209. //if the horizontal distance isn't enough to accomodate the width of the context menu
  210. if (rightedge<menuobj.offsetWidth){
  211. //move the horizontal position of the menu to the left by it's width
  212. menuobj.style.left=IE? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth
  213. } else {
  214. //position the horizontal position of the menu where the mouse was clicked
  215. menuobj.style.left=IE? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX
  216. }
  217.  
  218. //same concept with the vertical position
  219. if (bottomedge<menuobj.offsetHeight){
  220. menuobj.style.top=IE? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight
  221. } else {
  222. menuobj.style.top=IE? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY
  223. }
  224. }
  225.  
  226. function hidemenuIE(e){
  227. menuobj.style.visibility="hidden"
  228. }
  229.  
  230. function highlightIE(e){
  231. var firingobj=IE? event.srcElement : e.target
  232. if (firingobj.className=="menuitems"||NS&&firingobj.parentNode.className=="menuitems"){
  233. if (NS&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node
  234. firingobj.style.backgroundColor="highlight"
  235. firingobj.style.color="white"
  236. }
  237. }
  238.  
  239. function lowlightIE(e){
  240. var firingobj=IE? event.srcElement : e.target
  241. if (firingobj.className=="menuitems"||NS&&firingobj.parentNode.className=="menuitems"){
  242. if (NS&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node
  243. firingobj.style.backgroundColor=""
  244. firingobj.style.color="black"
  245. window.status=''
  246. }
  247. }
  248.  
  249. function jumptoIE(e){
  250. var firingobj=IE? event.srcElement : e.target
  251. if (firingobj.className=="menuitems"||NS&&firingobj.parentNode.className=="menuitems"){
  252. if (NS&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode
  253. if (firingobj.getAttribute("target"))
  254. window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target"))
  255. else
  256. window.location=firingobj.getAttribute("url")
  257. }
  258. }
  259.  
  260. if (IE||NS){
  261. menuobj.style.display=''
  262. document.oncontextmenu=showmenuIE
  263. // decomenter la ligne suvante pour bouger le menu avec la souris
  264. //document.onmousemove=movemenuIE
  265. document.onclick=hidemenuIE
  266. }
  267.  
  268. </script>
  269. </body>
  270. </html>

Merci de m'aider [:dedemycat]

Autres pages sur : javascript oncontextmenu globals

28 Juin 2007 21:51:39

coucou c'est moi ...
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS