interfaz compleja o componente flash
Buenas, estoy tratando, infructuosamente debo reconocer, construir en mi aplicación un componente un poco complejo, la idea es un componente que me permita seleccionar con el mouse que neumaticos quiero cambiar de un vehiculo pero no logro dar con la manera de hacerlo, traté de modificar un ejemplo que vi en la siguiente pagina:
http://examples.extjs.eu/
específicamente el ejemplo llamado "Handling Item clicks"
pero no he logrado llegar más lejos que la captura que les adjunto
también he pensado la posibilidad de usar un componente flash. Alguien ha hecho o visto algo similar?
cualquier luz será agradecida
tokkaido
26/12/2011
Intenta usar un canvas o bien con divs absolutos dentro de uno relativo, básicamente sería poner la imagen del vehículo y luego sobreponer divs en las llantas mediante CSS poniendolos absolutos, luego a esos divs puedes ponerles eventos para que respondan al click.
Saludos
Crysfel Villa
26/12/2011
Gracias por el consejo, lo estoy haciendo como me indicas, pero no logro saber como asignarle la posición dinamicamente (puesto que los diagramas que cargo son distintos según el tipo de vehículo). Hasta ahora tengo lo que puedes ver en la imagen adjunta
en mi código no sé como asignarle la posicion a los divs:
,
cargar_diagrama: function(c){
Ext.getDom('diagrama').src ='../../images/diagrama_' + c + '.png';
//eliminar los div que se encuentren previamente cargados
var classLinks = Ext.query('.neumatico');
Ext.each(classLinks, function(item,index) {
var indice = index + 1;
Ext.get('neumatico_' + indice).remove();
});
for(i=1; i
se te ocurre alguna idea ;)
tokkaido
26/12/2011
so far so good, hasta ahora voy bien pero hay 2 cosas que no he podido resolver:
1) cambiar el color del div seleccionado a un color semitransparente
2) agregarle un tooltip al div desde el codigo
mi código va como sigue:
cargar_diagrama: function(c){
Ext.getDom('diagrama').src ='../../images/diagrama_' + c + '.png';
//eliminar los div que se encuentren previamente cargados
var classLinks = Ext.query('.neumatico');
Ext.each(classLinks, function(item,index) {
var indice = index + 1;
Ext.get('neumatico_' + indice).remove();
});
switch(c){
case "4" :
coordenada_x = new Array(16,190,16,190);
coordenada_y = new Array(65,65,390,390);
break;
case "6" :
coordenada_x = new Array(16,190,16,46,160,190);
coordenada_y = new Array(65,65,390,390,390,390);
console.debug(coordenada_x);
break;
case "8" :
coordenada_x = new Array(16,190,16,190,16,46,160,190);
coordenada_y = new Array(65,65,285,285,390,390,390,390);
break;
}
for(i=1; i
tokkaido
28/12/2011
la transparencia la puedes realizar de la siguiente manera
div .neumatico {
color: red;
cursor: pointer;
height: 55px;
width: 26px;
background-color: #000000;
opacity: 0.5;/* Esta linea hace la transparencia*/
}
Invitado
28/12/2011
¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook
Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.