pruevas

1. language="javascript" type="text⁄javascript">  
2. ⁄⁄ MENU CONTEXTUAL  
3. ⁄⁄ by Iván Nieto  
4. ⁄⁄ Version 1.1 (01⁄11⁄2005)  
5. ⁄⁄  
6. ⁄⁄ Este script y otros muchos pueden  
7. ⁄⁄ descarse on-line de forma gratuita  
8. ⁄⁄ en El Código: www.elcodigo.com  
9.   
10. ⁄* DEFINICION DE LOS MENUS: MODIFICA LOS DATOS DE LOS ARRAYS PARA CREAR TUS PROPIOS MENUS *⁄  
11. ⁄* lista_menus es la lista con los nombres de los menus *⁄  
12. var lista_menus = new Array (  
13. "Menu1",        ⁄⁄menu numero 1  
14. "Menu2",        ⁄⁄menu numero 2  
15. "Menu3"         ⁄⁄menu numero 3  
16. )  
17.   
18. ⁄* Menu1: este menu se escribe con EscribeMenu( "Menu1", 1, datos_menu1 ); 
19.       este menu se abre con javascript:LanzaMenu('Menu1', 1); 
20.     "Menu1" es el nombre del menu, utilizado para referirse al menu en todo el script. 
21.     1 es el indice del elemento del array lista_menus que contiene el nombre anterior. 
22.     datos_menu1 es el nombre del array con los datos del menu. 
23. *⁄  
24. var datos_menu1 = new Array (  
25. ⁄*URL                               Texto del menu*⁄  
26. "http:⁄⁄www.elcodigo.com",                  "Inicio        ",  
27. "javascript:LanzaMenu('Menu2', 1);",                "Taller      > ",  
28. "http:⁄⁄www.elcodigo.com⁄tutoriales⁄tutoriales.html",       "Tutoriales    "    ⁄⁄OJO, el ultimo no lleva coma  
29. )  
30.   
31. ⁄* Menu2: este menu se escribe con EscribeMenu( "Menu2", 2, datos_menu2 );  
32.           este menu se abre con javascript:LanzaMenu('Menu2', 1);*⁄  
33. var datos_menu2 = new Array (  
34. "http:⁄⁄www.elcodigo.com⁄taller⁄javascript⁄indices.html",   "JavaScript         ",  
35. "http:⁄⁄www.elcodigo.com⁄taller⁄dhtml⁄indices.html",        "DHTML              ",  
36. "javascript:LanzaMenu('Menu3', 1);",                "Otros lenguajes  > "    ⁄⁄OJO, el ultimo no lleva coma  
37. )  
38.   
39. ⁄* Menu3: este menu se escribe con EscribeMenu( "Menu3", 3, datos_menu3 );  
40.           este menu se abre con javascript:LanzaMenu('Menu3', 1);*⁄  
41. var datos_menu3 = new Array (  
42. "http:⁄⁄www.elcodigo.com⁄taller⁄perl⁄indices.html",         "PERL        ",  
43. "http:⁄⁄www.elcodigo.com⁄taller⁄html⁄indices.html",         "CSS y HTML  "      ⁄⁄OJO, el ultimo no lleva coma  
44. )  
45.   
46.   
47. ⁄* NO HACE FALTA CAMBIAR NADA A PARTIR DE AQUI *⁄  
48. ⁄* Variables *⁄  
49. var xpos = 0  
50. var ypos = 0  
51. var TemporizadorDestino = null  
52. var origen = -1  
53. var destino = -1  
54.   
55. ⁄* 
56. Cuando se hace click en cualquier parte, ClickRaton() registra las coordenadas x e y,  
57. y las almacena en xpos e ypos. Si se pulso sobre un enlace, se creara un menu. 
58. La funcion PosicionaMenu() utiliza xpos e ypos para posicionarlo. 
59. *⁄  
60. function ClickRaton(e){  
61.     ⁄*La gestion de eventos con IE4 e IE5 utiliza el objeto window.event, que no forma 
62.     parte de DOM2. IE5 soporta getElementById, pero sigue usando este objeto para la 
63.     gestion de eventos, por lo que hay que tratarle de forma exclusiva *⁄  
64.     if (!e) var e = window.event  
65.       
66.     if (e.pageX || e.pageY) {                       ⁄⁄N6  
67.         xpos = e.pageX + 'px'  
68.         ypos = e.pageY + 'px'  
69.     } else if (e.clientX || e.clientY) {                    ⁄⁄resto  
70.         xpos = e.clientX + document.body.scrollLeft + 'px'  
71.         ypos = e.clientY + document.body.scrollTop + 'px'  
72.     }  
73.       
74.     return true  
75. }  
76.   
77. ⁄* 
78. Mueve el menu a las coordenadas actuales donde esta el puntero del raton, registradas  
79. por ClickRaton(). PosicionaMenu() es invocada dentro de LanzaMenu(). 
80. *⁄  
81. function PosicionaMenu( nombre_menu ) {  
82.     if (document.getElementById) {              ⁄⁄DOM2 browsers  
83.         document.getElementById(nombre_menu).style.left = xpos  
84.         document.getElementById(nombre_menu).style.top = ypos  
85.     } else if (document.all) {              ⁄⁄IE4+  
86.         document.all[nombre_menu].style.pixelLeft = xpos  
87.         document.all[nombre_menu].style.pixelTop = ypos  
88.     }  
89. }  
90.   
91. ⁄* 
92. LanzaMenu() muestra o esconde un menu. nombre_menu especifica que 
93. menu debe ser mostrado o escondido. El argumento on es boolean. Si vale  
94. 1 se muestra el menu. Si vale 0 se oculta. 
95. *⁄  
96. function LanzaMenu(nombre_menu, on) {  
97.   
98.     PosicionaMenu(nombre_menu)  ⁄⁄Posiciona el menu a xos e ypos  
99.   
100.     if (on){                            ⁄⁄Mostrar menu  
101.         if (document.getElementById) {              ⁄⁄DOM2 browsers  
102.             document.getElementById(nombre_menu).style.visibility = "visible"  
103.         } else if (document.all) {              ⁄⁄IE4+  
104.             document.all[nombre_menu].style.visibility = "visible"  
105.         }  
106.   
107.     } else {                            ⁄⁄Ocultar menu  
108.         if (document.getElementById) {              ⁄⁄DOM2 browsers  
109.             document.getElementById(nombre_menu).style.visibility = "hidden"  
110.         } else if (document.all) {              ⁄⁄IE4+  
111.             document.all[nombre_menu].style.visibility = "hidden"  
112.         }  
113.     }  
114. }  
115.   
116. ⁄*MarcaOrigen() registra el menu desde el cual se ha movido el puntero del raton a otro menu. 
117. Se invoca desde onMouseOut en el elemento div*⁄  
118. function MarcaOrigen( menu ) {  
119.     if (TemporizadorDestino)  
120.         clearTimeout(TemporizadorDestino)  
121.   
122.     origen = menu  
123.     destino = -1  
124.     TemporizadorDestino = setTimeout('CompruebaDestino()', 250)  
125.   
126. }  
127.   
128. ⁄*MarcaDestino() registra el menu al cual se ha movido el puntero del raton desde otro meno. 
129. Se invoca con onMouseOver en el elemento div*⁄  
130. function MarcaDestino( menu ) {  
131.     destino = menu  
132. }  
133.   
134. ⁄*Esta funcion establece la logica de ocultacion de menus, en base al origen⁄destino del 
135. movimiento del raton*⁄  
136. function CompruebaDestino( menu ) {  
137.     if ( destino == -1 ) {  
138.         Ocultar( 0 )            ⁄⁄Oculta todos  
139.     } else if ( destino < origen ) {  
140.         Ocultar( destino )      ⁄⁄Oculta hijos de destino  
141.     } else if ( destino == origen ) {  
142.         Ocultar( destino )      ⁄⁄Oculta hijos de destino  
143.     }  
144. }  
145.   
146. ⁄*Ocultar() se encarga de hacer no visible uno o varios menus*⁄  
147. function Ocultar( menuID ) {  
148.     ⁄⁄Recorre la lista de menus y los oculta  
149.     for (contador = menuID; contador < lista_menus.length; contador++) {  
150.         eval("LanzaMenu('" + lista_menus[contador] + "', 0)")  
151.     }  
152. }  
153.   
154. ⁄*EscribeMenu() crea el codigo HTML para la capa del menu. Los parametros son: 
155. nombre_menu, el string que da nombre al menu. 
156. numero_menu, el identificador del menu (de acuerdo al orden en el array lista_menus). 
157. datos_menu, el nombre del array con los datos del menu.*⁄  
158. function EscribeMenu( nombre_menu, numero_menu, datos_menu ) {  
159.     var espacio = ⁄ ⁄gi;  
160.     var mayorque = ⁄>⁄gi;  
161.     var literal;  
162.     var cadena_menu = ' + nombre_menu + '" onMouseOut="MarcaOrigen(' + numero_menu + ');" OnMouseOver="MarcaDestino(' + numero_menu + ');">\n'  
163.     for( contador = 0; contador < datos_menu.length; contador = contador + 2 ) {  
164.         literal = new String( datos_menu[contador+1] )  
165.         datos_menu[contador+1] = literal.replace(espacio, " ")  
166.         literal = new String( datos_menu[contador+1] )  
167.         datos_menu[contador+1] = literal.replace(mayorque, ">")  
168.         cadena_menu += ' + datos_menu[contador] + '">' + datos_menu[contador+1] + '<⁄a><⁄td><⁄tr>\n'  
169.     }  
170.     cadena_menu += '<⁄table><⁄div>\n'  
171.       
172.     document.write(cadena_menu)  
173. }  
174.   
175. ⁄* 
176. Comienza a capturar los eventos de pulsacion de los botones del raton 
177. una vez que se ha cargado la pagina. Cuando se haga click en cualquier parte del 
178. documento el navegador llamara al gestor asociado al evento: ClickRaton(). 
179. *⁄  
180. document.onclick = ClickRaton  
181.   
182.   
183.   
184. <⁄script>  

1. "text⁄css">  
2.   
3. ⁄* 
4. MENU CONTEXTUAL 
5. by Iván Nieto 
6. Version 1.1 (01⁄11⁄2005) 
7.  
8. Este script y otros muchos pueden 
9. descarse on-line de forma gratuita 
10. en El Código: www.elcodigo.com 
11. *⁄  
12.   
13. .TabMenu {  
14.     padding: 0px;  
15.     background-color: #D4D0C8;  
16.     vertical-align: top;  
17.     border-style: solid;  
18.     border-width: 1px;  
19.     border-bottom-color: #000000;  
20.     border-right-color: #000000;  
21.     border-left-color: #808080;  
22.     border-top-color: #808080;  
23.     text-align: left;  
24.  }  
25.   
26. .SubMenu {  
27.     position: absolute;  
28.     top: 0px;  
29.     left: 0px;  
30.     z-index: 1;  
31.     visibility: hidden;  
32. }  
33.   
34. a.MenuItem {font-size: 0.8em; padding: 2px; font-family: Courier, Arial, Serif; text-decoration: none;}  
35. a.MenuItem:link {color: #000000; }  
36. a.MenuItem:hover {color: #FFFFFF; background: #0A246A;}  
37. a.MenuItem:visited {color: #868686;}  
38.   
39.   
40.   
41. <⁄style>  

1. <p>El siguiente enlace abre un ejemplo del menú contextual, que tiene 2 submenús.<⁄p>  
2.   
3.   
4. <script type="text⁄javascript" language="javascript">  
5. EscribeMenu( "Menu1", 1, datos_menu1 );  
6. EscribeMenu( "Menu2", 2, datos_menu2 );  
7. EscribeMenu( "Menu3", 3, datos_menu3 );  
8. <⁄script>  
9.   
10.   
11. <p><a href="javascript:LanzaMenu('Menu1', 1);">Menú de ejemplo<⁄a><⁄p>  
12.   
13. <⁄body>  
14. <⁄html>