interfaz compleja o componente flash

tokkaido

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

Crysfel

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

tokkaido

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<= c;i++){
      Ext.DomHelper.append('vehiculo', {
        tag: 'div',
        cls: 'neumatico',
        id: 'neumatico_' + i
      }, false);  
    }
    //ubicar los div en la posicion
    
      
  }

se te ocurre alguna idea ;)

tokkaido

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<= c;i++){
      Ext.DomHelper.append('vehiculo', {
        tag : 'div',
        cls : 'neumatico',
        id  : 'neumatico_' + i
      }, false);
      Ext.get('neumatico_' + i).setX(coordenada_x[i-1]);
      Ext.get('neumatico_' + i).setY(coordenada_y[i-1]);
    }
  }

lgonzales

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*/
}

tokkaido

agradecido :)

Howdy, Stranger!

Categories

In this Discussion

Poll

Tagged

Copyright & Usage

Advertise here

Bookmark us