Buscando algo así

originalconcept · #1 (**permalink**) 04/02/2009, 06:41

Hola, no se como describirlo, voy a tratar de dar mi idea.

Acá se ve esto: http://www.psi.uba.ar/academica/carr...psicologia.jpg

Lo que quiero hacer es, supongamos que cuando uno recien aprueba "Estadística", puede cursar "Metodología de la Investigación"

Lo que quisiera armars entonces una página en donde aparezcan todos sos recuadros con un check box y cuando uno hace click sobre "Estadística", "Metodología de la Investigación" se habilita.

Como se hace esto? Me suena complicado.

gracias

darthcolo · #2 (**permalink**) 04/02/2009, 07:11

En vez de utilizar php, probaria con CSS, haciendo varios cuadros con etiquetas DIV que se habiliten cuando haces click en otros cuadros.

En php no se me ocurre otra forma que no sea enviar un formulario cada vez que se hace un checkbox. Pero no se me ocurre como hacer que se envie automaticamente.

acumulador · #3 (**permalink**) 04/02/2009, 07:29

Yo probaria con javaScript en lugar de php

SPAWN3000 · #4 (**permalink**) 04/02/2009, 11:26

Veamos, yo que en que pensaría...

Todo lo trabajaría con Div o capas. A los cuales les daría las propiedades:

CSS:
- position: Absolute.
- z-index: 10;
- float: left.

Javascript:
Una capa contenedora:
<div id="contenedor">
...Aqui colocaria todos los elementos..
</div>

Luego a la capa contenedora le asigno la propiedad contentEditable, la cual es compatible en FF e IE para capas).

Ajax:
Una clase ajax, para estar actualizando los cambios y pasar los paramatros a php.
Cuales parametros: Datos de actualización del CSS, el cual puede estar combinado con una BD o un XML.

PHP,ASp,JSP:
Recibo los parámetros tipo GET, y efectuó la actualización del XML o BD.

Un ejemplo en vivo, Esto deberia mas o menos funcionar:
--------------------------
<html>
<head>
<script>
function Activar(elemento){
IdElemt = elemento.id;
document.getElementById(IdElemt).contentEditable=' true';
document.getElementById(IdElemt).focus();
}
</script>
<style>
#contenedor{
padding:30px;
margin:30px;
width:80%;
height:100%;
background-color: #eee;
text-align:center;
position:relative;
}
#materia{
width:150px;
height:30px;
position: Absolute;
z-index: 0;
float: left;
background-color: #ffcc00;
}
#materia:hover{
background-color: #ffee66;
}
</style>
</head>
<body>
<div id="contenedor" onClick="Activar(this)">
<div id="materia">Click here...</div>
<div id="materia">Click here...</div>
</div>
</body>

originalconcept · #5 (**permalink**) 04/02/2009, 19:39

SPAWN3000, gracias por tu ayuda.

No entedí lo del ejemplo en vivo, porque lo probe y no funciona, o le faltaba algo mas?

SPAWN3000 · #6 (**permalink**) 05/02/2009, 11:36

Debiste ensayar un poco, solo existía un error con el espacio en el true...
document.getElementById(IdElemt).contentEditable=' true';

Me falto tiempo para probarlo, pero imagine que funcionaria, mis disculpas...
Prueba arrastrar y soltar las capas...

<html>
<head>
<script>
function Activar(elemento){
IdElemt = elemento.id;
document.getElementById(IdElemt).contentEditable=' true';
document.getElementById(IdElemt).focus();
}
</script>
<style>
#contenedor{
padding:30px;
margin:30px;
width:80%;
height:100%;
background-color: #eee;
text-align:center;
position:relative;
}
#materia{
width:150px;
height:30px;
position: Absolute;
z-index: 0;
float: left;
background-color: #ffcc00;
}
#materia:hover{
background-color: #ffee66;
}
</style>
</head>
<body>
<div id="contenedor" onClick="Activar(this)">
<div id="materia">Click here...</div>
<div id="materia">Click here...</div>
</div>
</body>
</html>

Aun hace falta poder agregar mas capas, Un saludo...

originalconcept · #7 (**permalink**) 05/02/2009, 11:54

SPAWN3000, sinceramente te agradezco por el tiempo que le dedicaste a este post, de verdad lo aprecio mucho y toda la ayuda que se consigue en este foro, es increible.

De todas formas el ejemplo que vos me pasas no era lo que estoy buscando, de todas formas estoy agradecido.

Lo que busco es, supongamos 2 recuadros que esten enlazados con una fleach, el primero tiene un checkbox, si yo hago clicke en este, el segundo que estaba en un color opaco, se vuelve activo, eso sería lo que busco.

saludos chicos

SPAWN3000 · #8 (**permalink**) 05/02/2009, 13:01

Como planeas hacer las lineas...Esto es algo mas o menos complicado en javascript...

A lo mejor esto te ayuda:
http://www.vicsjavascripts.org.uk/Sk.../SketchPad.htm

Ahora, deberás crear grupos de enlace, digamos un class CSS.

Por medio de javascript puedes cambiar El estilo de aquellos que están relacionados, digamos:

.NoSelect{
background-color:#ffcc00;
}
.Selecto{
background-color:#eee;
}

En javascript:
Inicialmente todos estan en Noselect, Ahora, al hacer un click puedes utilizar el atributo style y le das un color desde javascript, o alternas el css de aquellos relacionados a select.

Digamos:
onclick="this.style.background='#FFCC00'"

Asi seria para una sola capa, ahora para varios... Ya deberías tener un lugar donde consultas cuales están enlazadas(El cual puede ser un XML generado por tu sistema (En PHP, ASP o JSP), solo hay que recorrerlo he ir cambiando los colores a todos...

Algo mas, Como leer XML:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
    <title>Address book</title>
    <script type="application/javascript">
var ELEMENT_NODE = 1
//TEXT_NODE

function loadAddresses()
{
  xmlDoc = document.implementation.createDocument("", "", null);
  xmlDoc.onload = writeList;
  xmlDoc.load("labels.xml");
}

function writeList()
{
  var labels = xmlDoc.getElementsByTagName('label');
  var ol = document.createElement('OL');

  for (i=0; i < labels.length; i++)
  {
    var li = document.createElement('LI');
    for (j=0; j < labels[i].childNodes.length; j++)
    {
      if (labels[i].childNodes[j].nodeType != ELEMENT_NODE) continue;
      var cdata = document.createTextNode(
        labels[i].childNodes[j].firstChild.nodeValue);
      li.appendChild(cdata);
    }
    var labelId = document.createTextNode('(' +
      labels[i].getAttribute('id') + ')');
    li.appendChild(labelId);
    ol.appendChild(li);
  }
  document.getElementById('updateTarget').appendChild(ol);
}
    </script>
  </head>
  <body id='updateTarget'>
    <p>
      <a href="javascript:loadAddresses()">Click here to load addresses</a>
    </p>
  </body>
</html>

El archivo: labels.xml

Código:

<?xml version="1.0" encoding="iso-8859-1"?>
<labels>
  <label id='ep' added="2003-06-10">
    <name>Ezra Pound</name>
    <address>
      <street>45 Usura Place</street>
      <city>Hailey</city>
      <province>ID</province>
    </address>
  </label>
  <label id='tse' added="2003-06-20">
    <name>Thomas Eliot</name>
    <address>
      <street>3 Prufrock Lane</street>
      <city>Stamford</city>
      <province>CT</province>
    </address>
  </label>
  <label id="lh" added="2004-11-01">
    <name>Langston Hughes</name>
    <address>
      <street>10 Bridge Tunnel</street>
      <city>Harlem</city>
      <province>NY</province>
    </address>
  </label>
  <label id="co" added="2004-11-15">
    <name>Christopher Okigbo</name>
    <address>
      <street>7 Heaven's Gate</street>
      <city>Idoto</city>
      <province>Anambra</province>
    </address>
  </label>
</labels>

Espero te sea util...

originalconcept · #9 (**permalink**) 05/02/2009, 14:40

Muchas Gracias

SPAWN3000 · #10 (**permalink**) 05/02/2009, 16:38

Lo tengo... Mira!

Buscaba algo para mi librería y me tope con esto, de inmediato me puse a postearlo...

http://javascript.neyric.com/wireit/...lanarGame.html

esto tambien te puede ser util.
http://pipes.yahoo.com/pipes/

Es lo que buscas?

Un saludo.

originalconcept · #11 (**permalink**) 05/02/2009, 19:12

Mmm... en realidad no, lo que quisiera es como un cronograma de materias, en donde algunas tienen correlatividad con otros (significa que si no aprobas esa materia no te dejan cursar una nueva) y cuando haces click en un checkbox marcando que ya aprobaste esa materia, se habilita el recueadro de la materia con correlatividad.

medio complicado, saludo!!!