Foros del Web » Creando para Internet » Diseño web »

¿Cómo utilizar "Prototype 2"?

Estas en el tema de ¿Cómo utilizar "Prototype 2"? en el foro de Diseño web en Foros del Web. Hola he estado intentado hacer funcionar esta excelente herramienta: http://www.nickstakenburg.com/projects/prototip2/ Sin embargo, aún no logro instalar un efecto de "Tooltip". ¿Podrían ayudarme? Les dejo mi ...
  #1 (permalink)  
Antiguo 01/07/2011, 09:41
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 8 años, 4 meses
Puntos: 1
¿Cómo utilizar "Prototype 2"?

Hola he estado intentado hacer funcionar esta excelente herramienta:

http://www.nickstakenburg.com/projects/prototip2/

Sin embargo, aún no logro instalar un efecto de "Tooltip". ¿Podrían ayudarme?

Les dejo mi intento fallido:

http://extremegamex1.gofreeserve.com...rueba_2.1.html

Espero una pronta respuesta,
Gracias de antemano ;)
  #2 (permalink)  
Antiguo 01/07/2011, 10:22
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 5 años, 8 meses
Puntos: 344
Respuesta: ¿Cómo utilizar "Prototype 2"?

Como viene explicado en la página tienes que llamar a la función Tip:

Código Javascript:
Ver original
  1. document.observe("dom:loaded", function(){  
  2. new Tip('imagen', new Element('div').update('my text'),
  3. {  title: 'This tooltip has a title',  
  4.  hook: { tip: 'topLeft', mouse: true },
  5.  offset: { x: 14, y: 14 }});  
  6. });

Si tienes preguntas sobre lo que hace, no dudes en preguntar.
  #3 (permalink)  
Antiguo 01/07/2011, 14:30
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 8 años, 4 meses
Puntos: 1
Respuesta: ¿Cómo utilizar "Prototype 2"?

Hola alexg88, muchas gracias por tu respuesta. Sin embargo, me gustaría que me ayudaras a efectuar ese "Llamado" que tú dices, no entiendo a qué te refieres, sin embargo, no se si lo que dicen en la página oficial de Prototip 2 servirá de algo:

How to Use:

Creating a tooltip is as easy as:

Cita:
new Tip(element, 'content');
To create a more advanced tooltip you can add an optional thirth parameter with options:

Cita:
new Tip(element, 'content', {
title: 'This tooltip has a title',
style: 'protoblue',
stem: 'topLeft',
hook: { tip: 'topLeft', mouse: true },
offset: { x: 14, y: 14 }
});
Espero haber sido algo descriptivo, es que dice: "New tip", y lo copio a mi HTML, pero no se en qué código envolverlo, Javasript?, Ajax?, JQuery?, CSS?.

Espero una pronta respuesta. Gracias de antemano :)

Última edición por ambigus; 01/07/2011 a las 14:36
  #4 (permalink)  
Antiguo 01/07/2011, 14:43
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 5 años, 8 meses
Puntos: 344
Respuesta: ¿Cómo utilizar "Prototype 2"?

Es un script en lenguaje javascript, lo tienes que poner entre las etiquetas <script> en el <head>

Código HTML:
Ver original
  1. <script type="text/javascript">
  2. document.observe("dom:loaded", function(){  
  3. new Tip('imagen', new Element('div').update('my text'),
  4. {  title: 'This tooltip has a title',  
  5.  hook: { tip: 'topLeft', mouse: true },
  6.  offset: { x: 14, y: 14 }});  
  7. })
  8. </head>
  9.   <img src="simple.gif" id="imagen">
  10.   </body>
  11. </html>

Tienes que tener un elemento (una imagen, un link, un div) con id = 'imagen'.
  #5 (permalink)  
Antiguo 01/07/2011, 22:28
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 8 años, 4 meses
Puntos: 1
Respuesta: ¿Cómo utilizar "Prototype 2"?

Hola alexg88 gracias por tu pronta y muy efectiva respuesta. Ahora te linkeo mis avances:

http://extremegamex1.gofreeserve.com...rueba_2.2.html

Sin embargo, yo quiero dos cosas:

1. Que el efecto sea exactamente (si es posible como el ejemplo "Simple" de la página original de Prototype 2: http://www.nickstakenburg.com/projects/prototip2/

Es uno que dice: "A simple tooltip, nothing fancy just yet"

2. Modificar el ancho del contenido.

Estuve observando y al parecer tiene algo que ver con el archivo "prototip.css"

Te comparto el contenido de este:

http://extremegamex1.gofreeserve.com...s/prototip.css

Y es que , quisiera aclara que quiero tener un ancho defenido en cada tooltip. Por ejemplo, te comparto la idea completa, es que quiero colocarle un Tooltip a cada una de las imagenes, y cada tooltip con su descripción respectiva, pero pues con un ancho determinado, personalisado a cada una de las imagenes.

Gracias de antemano. Espero una pronta respuesta.
  #6 (permalink)  
Antiguo 02/07/2011, 10:10
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 5 años, 8 meses
Puntos: 344
Respuesta: ¿Cómo utilizar "Prototype 2"?

Te paso un ejemplo que he hecho con lo que pides:

http://jsfiddle.net/alexg88/yf47d/

Si te fijas, para definir el ancho que quieres utilizas el atributo width. Para que el tooltip no tenga borde (border:1), ni sea redondeado en los bordes (radius:1).
El estilo se le define con el atributo style (en este caso simple).
  #7 (permalink)  
Antiguo 02/07/2011, 12:40
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 8 años, 4 meses
Puntos: 1
Respuesta: ¿Cómo utilizar "Prototype 2"?

Hola te agradesco por tu ayuda, mira ya he logrado modificarlo:

http://extremegamex1.gofreeserve.com...rysis_1.3.html

Sin embargo, no logro que se coloque el efecto, a la segunda parte "Requisitos Recomendados", nose qué estoy haciendo mal, puesto que ambos DIVs tienen el mismo atributo de "Windows" por ejemplo, debería aparecer en los dos lados, no?

Espero una pronta respuesta. ;)
  #8 (permalink)  
Antiguo 02/07/2011, 14:40
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 8 años, 4 meses
Puntos: 1
Respuesta: ¿Cómo utilizar "Prototype 2"?

Hola, sigo con mi autoavance :D. Ahora te comparto cómo lo solucioné y la solución:

Solución:
http://extremegamex1.gofreeserve.com...rysis_1.4.html

Resulta que lo que hice fue crear otros "New elements" que se asociaran con otros DIVs, manteniendo el mismo estilo en cada uno, me explico:

El icono de Sistema Operativo de la Izquierda está asociado con el DIV: "Windows" y lo que hice fue crear otro (además de ese) llamado: "Windows2". Al igual que con el .CSS de cada uno, simplemente dubplicando cada uno y asociandolo con otro nombre, en este caso un número 2.

Igualmente, quien quiera analizar esta secuencia, puede visualizar el "Código fuente de la página":

http://extremegamex1.gofreeserve.com...rysis_1.4.html

Gracias a alexg88:)

Etiquetas: prototype
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:09.