Pregunta de Javascript

Hola!! Tengo echo un menu de arbol que genere con una pagina que encontre y mi problema es que tengo que añadirle unos checbox al lado de cada opcion porque necesito seleccionar uno o varios y no se donde tengo que añadirselo. A ver si me puedes echar una mano. Muchas gracias
'Conexion a la base de datos
<!--#include file="conexion.asp"-->
<%
municipio=Request.QueryString("municipio")
%>
<html>
<head>
<title>Menú en arbol - javascript.tunait.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
var anMenu = 500
var totalMen =12
var anImas = 17
var alImas = 15
var direc = 'Imagenes'
var mas = '/mast.gif'
var menos = '/menost.gif'
var puntos = '/puntost.gif'
var puntosv = '/puntosvt.gif'
var carpeab = '/carpabiertat.gif'
var carpece = '/carpcerradat.gif'
var puntosu = '/puntosut.gif'
var doc = '/doct.gif'
var docsel = '/docselt.gif'
var carpeabsel = '/carpabiertasel.gif'
var carpecesel = '/carpcerradasel.gif'
var icHome = '/home.gif'
var puntosh = '/puntosh.gif'
function tunMen(tex,enl,dest,subOp,an){
this.tex = tex;
this.enl = enl;
this.dest = dest;
this.subOp = subOp;
this.an = an;
this.secAc = false
}
var Op_0 = new tunMen("Seleccion Tematica",null,null,0)
//document.write("<input type='checkbox' name='Agrupa_Terri">');
var Op_1 = new tunMen("Agrupaciones Territoriales y Entidades Locales",null,null,2)
//document.write('</input>');
var Op_1_0=new tunMen('Municipios','Link_Municipios',null,0)
var Op_1_1=new tunMen('Nucleos de Poblacion','Link_Poblacion',null,0)
var Op_2 = new tunMen("Red de Carreteras",null,null,2)
var Op_2_0=new tunMen('Acceso por Carretera a Nucleos de dificil accesibilidad','Link',null,0)
var Op_2_1=new tunMen('Carreteras','Link',null,0)
var Op_3 = new tunMen("Ciclo del Agua. Distribucion",null,null,7)
var Op_3_0=new tunMen('Abastecimiento Autonomo del Agua','Link',null,0)
var Op_3_1=new tunMen('Abastecimiento de Agua','Link',null,0)
var Op_3_2=new tunMen('Captaciones','Link',null,0)
var Op_3_3=new tunMen('Conducciones','Link',null,0)
var Op_3_4=new tunMen('Depositos','Link',null,0)
var Op_3_5=new tunMen('Potabilizacion','Link',null,0)
var Op_3_6=new tunMen('Redes de Distribucion','Link',null,0)
var Op_4 = new tunMen("Ciclo del Agua. Saneamiento",null,null,6)
var Op_4_0=new tunMen('Alcantarillado','Link',null,0)
var Op_4_1=new tunMen('Colectores','Link',null,0)
var Op_4_2=new tunMen('Depuradoras','Link',null,0)
var Op_4_3=new tunMen('Emisarios','Link',null,0)
var Op_4_4=new tunMen('Redes de Saneamiento','Link',null,0)
var Op_4_5=new tunMen('Saneamiento Autonomo','Link',null,0)
var Op_5 = new tunMen("Alumbrado",null,null,2)
var Op_5_0=new tunMen('Alumbrado Publico','Link',null,0)
var Op_5_1=new tunMen('Comunicaciones y Suministro de Energias','Link',null,0)
var Op_6 = new tunMen("Equipamientos",null,null,13)
var Op_6_0=new tunMen('Casas Consistoriales','Link',null,0)
var Op_6_1=new tunMen('Cementerios','Link',null,0)
var Op_6_2=new tunMen('Centros Asistenciales','Link',null,0)
var Op_6_3=new tunMen('Centros Culturales','Link',null,0)
var Op_6_4=new tunMen('Centros Educativos','Link',null,0)
var Op_6_5=new tunMen('Centros Sanitarios','Link',null,0)
var Op_6_6=new tunMen('Edificios Publicos sin uso','Link',null,0)
var Op_6_7=new tunMen('Instalaciones Deportivas','Link',null,0)
var Op_6_8=new tunMen('Lonjas, Mercados y Ferias','Link',null,0)
var Op_6_9=new tunMen('Mataderos','Link',null,0)
var Op_6_10=new tunMen('Parques','Link',null,0)
var Op_6_11=new tunMen('Proteccion Civil','Link',null,0)
var Op_6_12=new tunMen('Tanatorios','Link',null,0)
var Op_7 = new tunMen("Planeamiento Urbanistico",null,null,1)
var Op_7_0=new tunMen('Planes Urbanisticos','Link',null,0)
var Op_8 = new tunMen("Residuos Solidos",null,null,3)
var Op_8_0=new tunMen('Nucleos sin recogida de residuos urbanos','Link',null,0)
var Op_8_1=new tunMen('Recogida de Basuras','Link',null,0)
var Op_8_2=new tunMen('Vertederos','Link',null,0)
var Op_9 = new tunMen("Poblacion",null,null,7)
var Op_9_0=new tunMen('Censo 2001','Link',null,0)
var Op_9_1=new tunMen('Padron 1996','Link',null,0)
var Op_9_2=new tunMen('Padron 1998','Link',null,0)
var Op_9_3=new tunMen('Padron 1999','Link',null,0)
var Op_9_4=new tunMen('Padron 2000','Link',null,0)
var Op_9_5=new tunMen('Padron 2002','Link',null,0)
var Op_9_6=new tunMen('Padron 2003','Link',null,0)
var Op_10 = new tunMen("Viviendas",null,null,2)
var Op_10_0=new tunMen('Viviendas 1991','Link',null,0)
var Op_10_1=new tunMen('Viviendas 2001','Link',null,0)
var Op_11 = new tunMen("Callejero",null,null,1)
var Op_11_0=new tunMen('Calles y Plazas','Link',null,0)
var anchoTotal = 3648
var tunIex=navigator.appName=="Microsoft Internet Explorer"?true:false;
if(tunIex && navigator.userAgent.indexOf('Opera')>=0){tunIex = false}
var manita = tunIex ? 'hand' : 'pointer'
var subOps = new Array()
function construye(){
cajaMenu = document.createElement('div')
cajaMenu.style.width = anMenu + "px"
document.getElementById('tunMe').appendChild(cajaMenu)
for(m=0; m < totalMen; m++){
opchon = eval('Op_'+m)
ultimo = false
try{
eval('Op_' + (m+1))
}
catch(error){
ultimo = true
}
boton = document.createElement('div')
boton.style.position = 'relative'
boton.className = 'botones'
boton.style.paddingLeft= 0
carp = document.createElement('img')
carp.style.marginRight = 5 + 'px'
carp.style.verticalAlign = 'middle'
carp2 = document.createElement('img')
carp2.style.verticalAlign = 'middle'
enla = document.createElement('a')
if(opchon.subOp > 0){
carp2.style.cursor = manita
carp2.src = direc + mas
boton.secAc = opchon.secAc
}
else{
carp2.style.cursor = 'default'
enla.className = 'enls'
if(ultimo){carp2.src = direc + puntosu}
else{carp2.src = direc + puntos}
}
if(m == 0){
carp.src = direc + icHome
carp2.src = direc + puntosh
}
else{
carp.src = direc + carpece
}
boton.appendChild(carp2)
boton.appendChild(carp)
enla.className = 'enls'
enla.style.cursor = manita
boton.appendChild(enla)
enla.appendChild(document.createTextNode(opchon.tex))
if(tunIex){
enla.onmouseover = function(){this.className = 'botonesHover'}
enla.onmouseout = function(){this.className = 'enls'}
}
if(opchon.enl != null && opchon.subOp == 0){
enla.href = opchon.enl
}
if(opchon.dest != null && opchon.subOp == 0){
enla.target = opchon.dest;
}
boton.id = 'op_' + m
cajaMenu.appendChild(boton)
if(opchon.subOp > 0 ){
carp2.onclick= function(){
abre(this.parentNode,this,this.nextSibling)
}
subOps[subOps.length] = boton.id.replace(/o/,"O")
enla.onclick =...

1 Respuesta

Respuesta
1
Aqui te pongo los checks, supongo que si lo pones dentro de un form, deberian ir al hacer submit del mismo.
<html>
<head>
<title>Menú en arbol - javascript.tunait.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
var anMenu = 500
var totalMen =12
var anImas = 17
var alImas = 15
var direc = 'Imagenes'
var mas = '/mast.gif'
var menos = '/menost.gif'
var puntos = '/puntost.gif'
var puntosv = '/puntosvt.gif'
var carpeab = '/carpabiertat.gif'
var carpece = '/carpcerradat.gif'
var puntosu = '/puntosut.gif'
var doc = '/doct.gif'
var docsel = '/docselt.gif'
var carpeabsel = '/carpabiertasel.gif'
var carpecesel = '/carpcerradasel.gif'
var icHome = '/home.gif'
var puntosh = '/puntosh.gif'
function tunMen(tex,enl,dest,subOp,an){
this.tex = tex;
this.enl = enl;
this.dest = dest;
this.subOp = subOp;
this.an = an;
this.secAc = false
}
var Op_0 = new tunMen("Seleccion Tematica",null,null,0)
//document.write("<input type='checkbox' name='Agrupa_Terri">');
var Op_1 = new tunMen("Agrupaciones Territoriales y Entidades Locales",null,null,2)
//document.write('</input>');
var Op_1_0=new tunMen('Municipios','Link_Municipios',null,0)
var Op_1_1=new tunMen('Nucleos de Poblacion','Link_Poblacion',null,0)
var Op_2 = new tunMen("Red de Carreteras",null,null,2)
var Op_2_0=new tunMen('Acceso por Carretera a Nucleos de dificil accesibilidad','Link',null,0)
var Op_2_1=new tunMen('Carreteras','Link',null,0)
var Op_3 = new tunMen("Ciclo del Agua. Distribucion",null,null,7)
var Op_3_0=new tunMen('Abastecimiento Autonomo del Agua','Link',null,0)
var Op_3_1=new tunMen('Abastecimiento de Agua','Link',null,0)
var Op_3_2=new tunMen('Captaciones','Link',null,0)
var Op_3_3=new tunMen('Conducciones','Link',null,0)
var Op_3_4=new tunMen('Depositos','Link',null,0)
var Op_3_5=new tunMen('Potabilizacion','Link',null,0)
var Op_3_6=new tunMen('Redes de Distribucion','Link',null,0)
var Op_4 = new tunMen("Ciclo del Agua. Saneamiento",null,null,6)
var Op_4_0=new tunMen('Alcantarillado','Link',null,0)
var Op_4_1=new tunMen('Colectores','Link',null,0)
var Op_4_2=new tunMen('Depuradoras','Link',null,0)
var Op_4_3=new tunMen('Emisarios','Link',null,0)
var Op_4_4=new tunMen('Redes de Saneamiento','Link',null,0)
var Op_4_5=new tunMen('Saneamiento Autonomo','Link',null,0)
var Op_5 = new tunMen("Alumbrado",null,null,2)
var Op_5_0=new tunMen('Alumbrado Publico','Link',null,0)
var Op_5_1=new tunMen('Comunicaciones y Suministro de Energias','Link',null,0)
var Op_6 = new tunMen("Equipamientos",null,null,13)
var Op_6_0=new tunMen('Casas Consistoriales','Link',null,0)
var Op_6_1=new tunMen('Cementerios','Link',null,0)
var Op_6_2=new tunMen('Centros Asistenciales','Link',null,0)
var Op_6_3=new tunMen('Centros Culturales','Link',null,0)
var Op_6_4=new tunMen('Centros Educativos','Link',null,0)
var Op_6_5=new tunMen('Centros Sanitarios','Link',null,0)
var Op_6_6=new tunMen('Edificios Publicos sin uso','Link',null,0)
var Op_6_7=new tunMen('Instalaciones Deportivas','Link',null,0)
var Op_6_8=new tunMen('Lonjas, Mercados y Ferias','Link',null,0)
var Op_6_9=new tunMen('Mataderos','Link',null,0)
var Op_6_10=new tunMen('Parques','Link',null,0)
var Op_6_11=new tunMen('Proteccion Civil','Link',null,0)
var Op_6_12=new tunMen('Tanatorios','Link',null,0)
var Op_7 = new tunMen("Planeamiento Urbanistico",null,null,1)
var Op_7_0=new tunMen('Planes Urbanisticos','Link',null,0)
var Op_8 = new tunMen("Residuos Solidos",null,null,3)
var Op_8_0=new tunMen('Nucleos sin recogida de residuos urbanos','Link',null,0)
var Op_8_1=new tunMen('Recogida de Basuras','Link',null,0)
var Op_8_2=new tunMen('Vertederos','Link',null,0)
var Op_9 = new tunMen("Poblacion",null,null,7)
var Op_9_0=new tunMen('Censo 2001','Link',null,0)
var Op_9_1=new tunMen('Padron 1996','Link',null,0)
var Op_9_2=new tunMen('Padron 1998','Link',null,0)
var Op_9_3=new tunMen('Padron 1999','Link',null,0)
var Op_9_4=new tunMen('Padron 2000','Link',null,0)
var Op_9_5=new tunMen('Padron 2002','Link',null,0)
var Op_9_6=new tunMen('Padron 2003','Link',null,0)
var Op_10 = new tunMen("Viviendas",null,null,2)
var Op_10_0=new tunMen('Viviendas 1991','Link',null,0)
var Op_10_1=new tunMen('Viviendas 2001','Link',null,0)
var Op_11 = new tunMen("Callejero",null,null,1)
var Op_11_0=new tunMen('Calles y Plazas','Link',null,0)
var anchoTotal = 3648
var tunIex=navigator.appName=="Microsoft Internet Explorer"?true:false;
if(tunIex && navigator.userAgent.indexOf('Opera')>=0){tunIex = false}
var manita = tunIex ? 'hand' : 'pointer'
var subOps = new Array()
function construye(){
cajaMenu = document.createElement('div')
cajaMenu.style.width = anMenu + "px"
document.getElementById('tunMe').appendChild(cajaMenu)
for(m=0; m < totalMen; m++){
opchon = eval('Op_'+m)
ultimo = false
try{
eval('Op_' + (m+1))
}
catch(error){
ultimo = true
}
boton = document.createElement('div')
boton.style.position = 'relative'
boton.className = 'botones'
boton.style.paddingLeft= 0
carp = document.createElement('img')
carp.style.marginRight = 5 + 'px'
carp.style.verticalAlign = 'middle'
carp2 = document.createElement('img')
carp2.style.verticalAlign = 'middle'
enla = document.createElement('a')
if(opchon.subOp > 0){
carp2.style.cursor = manita
carp2.src = direc + mas
boton.secAc = opchon.secAc
}else{
carp2.style.cursor = 'default'
enla.className = 'enls'
if(ultimo){carp2.src = direc + puntosu}
else{carp2.src = direc + puntos}
}
if(m == 0){
carp.src = direc + icHome
carp2.src = direc + puntosh
}
else{
carp.src = direc + carpece
}
boton.appendChild(carp2)
boton.appendChild(carp)
enla.className = 'enls'
enla.style.cursor = manita
// My Code
radio = document.createElement("input")
radio.setAttribute("type","checkbox");
radio.setAttribute("name","rad-" + m);
radio.setAttribute("value","valor-" + m);
radio.onclick = function(){alert(this.value)}
boton.appendChild(radio);
// End My code
boton.appendChild(enla)
enla.appendChild(document.createTextNode(opchon.tex))
if(tunIex){
enla.onmouseover = function(){this.className = 'botonesHover'}
enla.onmouseout = function(){this.className = 'enls'}
}
if(opchon.enl != null && opchon.subOp == 0){
enla.href = opchon.enl
}
if(opchon.dest != null && opchon.subOp == 0){
enla.target = opchon.dest;
}
boton.id = 'op_' + m
cajaMenu.appendChild(boton)
if(opchon.subOp > 0 ){
carp2.onclick= function(){
abre(this.parentNode,this,this.nextSibling)
}
subOps[subOps.length] = boton.id.replace(/o/,"O")
enla.onclick = function(){
abre(this.parentNode,this.parentNode.firstChild,this.previousSibling)
}
}
}
if(subOps.length >0){subMes()}
}
function subMes(){
lar = subOps.length
for(t=0;t<subOps.length;t++){
opc =eval(subOps[t])
for(v=0;v<opc.subOp;v++){
if(eval(subOps[t] + "_" + v + ".subOp") >0){
subOps[subOps.length] = subOps[t] + "_" + v
}
}
}
construyeSub()
}
var fondo = true
function construyeSub(){
for(y=0; y<subOps.length;y++){
opchon = eval(subOps[y])
capa = document.createElement('div')
capa.className = 'subMe'
capa.style.position = 'relative'
capa.style.display = 'none'
if(!fondo){capa.style.backgroundImage = 'none'}
document.getElementById(subOps[y].toLowerCase()).appendChild(capa)
for(s=0;s < opchon.subOp; s++){
sopchon = eval(subOps[y] + "_" + s)
ultimo = false
try{
eval(subOps[y] + "_" + (s+1))
}
catch(error){
ultimo = true
}
if(ultimo && sopchon.subOp > 0){
fondo = false
}
opc = document.createElement('div')
opc.className = 'botones'
opc.id = subOps[y].toLowerCase() + "_" + s
if(tunIex){
}
enla = document.createElement('a')
enla.className = 'enls'
enla.style.cursor = manita
if(sopchon.enl != null && sopchon.subOp == 0){
enla.href = sopchon.enl
if(sopchon.dest != null && sopchon.subOp == 0){
enla.target = sopchon.dest
}
}
enla.appendChild(document.createTextNode(sopchon.tex))
capa.appendChild(opc)
carp = document.createElement('img')
carp.src = direc + carpece
carp.style.verticalAlign = 'middle'
carp.style.marginRight = 5 + 'px'
carp2 = document.createElement('img')
carp2.style.verticalAlign = 'middle'
// My Code
radio = document.createElement("input")
radio.setAttribute("type","checkbox");
radio.setAttribute("name","rad2-" + m);
radio.setAttribute("value","valor2-" + m);
radio.onclick = function(){alert(this.value)}
boton.appendChild(radio);
// End My code
if(sopchon.subOp > 0){
opc.secAc = sopchon.secAc
carp2.style.cursor = manita
carp2.src = direc + mas
enla.onclick = function(){
abre(this.parentNode,this.parentNode.firstChild,this.previousSibling)
}
carp2.onclick= function(){
abre(this.parentNode,this,this.nextSibling)
}
if(tunIex){
enla.onmouseover = function(){this.className = 'botonesHover'}
enla.onmouseout = function(){this.className = 'enls'}
}
}
else{
carp2.style.cursor = 'default'
carp.src = direc + doc
if(ultimo){carp2.src = direc + puntosu;
if(sopchon.subOp > 0){alert('hola');capa.style.backgroundImage = 'none'}
}
else{carp2.src = direc + puntos}
}
opc.appendChild(carp2)
opc.appendChild(carp)
opc.appendChild(radio);
opc.appendChild(enla)
}
}
Seccion()
}
function abre(cual,im,car){
abierta = cual.lastChild.style.display != 'none'? true:false;
if(abierta){
cual.lastChild.style.display = 'none'
im.src = direc + mas
if(cual.secAc){
car.src = direc + carpecesel
}
else{car.src = direc + carpece}
}
else{
cual.lastChild.style.display = 'block'
im.src = direc + menos
if(cual.secAc){car.src = direc + carpeabsel}
else{car.src = direc + carpeab}
}
}
var seccion = null
function Seccion(){
if (seccion != null){
if(seccion.length == 4){
document.getElementById(seccion.toLowerCase()).firstChild.nextSibling.src = direc + carpeabsel
document.getElementById(seccion.toLowerCase()).lastChild.className = 'secac2'
document.getElementById(seccion.toLowerCase()).lastChild.onmouseover = function(){
this.className = 'enls'
}
document.getElementById(seccion.toLowerCase()).lastChild.onmouseout = function(){
this.className = 'secac2'
}
}
else{
document.getElementById(seccion.toLowerCase()).firstChild.nextSibling.src = direc + docsel
document.getElementById(seccion.toLowerCase()).firstChild.nextSibling.nextSibling.className = 'secac'
document.getElementById(seccion.toLowerCase()).parentNode.parentNode.lastChild.previousSibling.className = 'secac2'
//
document.getElementById(seccion.toLowerCase()).parentNode.parentNode.lastChild.previousSibling.onmouseout = function(){
this.className = 'secac2'
}
if(!tunIex){
document.getElementById(seccion.toLowerCase()).parentNode.parentNode.lastChild.previousSibling.onmouseover = function(){
this.className = 'enls'
}
}
document.getElementById(seccion.toLowerCase()).parentNode.parentNode.secAc = true
seccion = seccion.substring(0,seccion.length - 2)
seccionb = document.getElementById(seccion.toLowerCase())
abre(seccionb,seccionb.firstChild,seccionb.firstChild.nextSibling)
if(seccion.length > 4){
lar = seccion.length
for(x = lar; x > 4; x-=2){
seccion = seccion.substring(0,seccion.length - 2)
seccionb = document.getElementById(seccion.toLowerCase())
abre(seccionb,seccionb.firstChild,seccionb.firstChild.nextSibling)
}
}
}
}
}
function Enviar()
{
//parent.frames['principal'].location.href = "menu.asp?municipio=+municipio"
location.href = "menu.asp?municipio=+municipio+"
}
onload = construye
/*Generar checkbox. Aun no se llama desde ningun sitio
function generateCheckBox(parentfolderObject, itemLabel, index, activedIndex, visibleLayers) {
var newObj;
newObj = insDoc(parentfolderObject, gLnk("R", itemLabel, "javascript:;"))
// Visible
newObj.prependHTML = "<td valign=middle><input type=checkbox onClick='updateLayers()' name='LayerVisible' id='LayerVisible' value='" + index + "'";
if (visibleLayers[index] == 1) newObj.prependHTML = newObj.prependHTML + " checked ";
// Active
newObj.prependHTML = newObj.prependHTML + "><input type=radio name='Active' id='Active' ";
if (index == activedIndex) newObj.prependHTML = newObj.prependHTML + " checked ";
newObj.prependHTML = newObj.prependHTML + " value='" + index + "' onclick='setTocActiveLayer(" + index + "); setTipsLayer(" + index + ");top.MapFrame.showTips();'>"
}
*/
</script>
<style type="text/css">
a.enls:link, a.enls:visited
{
color: #000099;
text-decoration: none;
}
a.enls:hover
{
color: #000099;
background-color: #9999CC;
}
a.secac2
{
color: #000099;
text-decoration: none;
}
a.secac
{
color: #000099;
text-decoration: none;
background-color: #9999CC;
}
a.secac:hover
{
color: #000099;
text-decoration: none;
background-color: #9999CC;
}
.botones
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000099;
margin: 0;
padding-left: 18px;
text-decoration: none;
text-align: left;
}
.botonesHover
{
text-decoration: none;
color: #9999CC;
background-color: #D8D8D8;
}
/* Atención, evitar alterar la clase .subMe */
.subMe
{
display: none;
margin: 0;
background-image: url(Imagenes/puntosvt.gif);
background-repeat: repeat-y;
}
/* Atención, evitar alterar la clase .subMe */
body
{
background-color: #FFFFCE;
font-family: verdana, tahoma, arial, sans serif;
font-size: 12px;
}
</style>
</head>
<body>
<form name="Formulario" method=get>
<div id="tunMe">
</div>
<p>
<input type=button style="widht=10" value="Siguiente >>" onclick="Enviar();">
</form>
</body>
</html>

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas