.  

 

 

.
.

23 / 03 / 2017

Usuarios conectados: 11

Cargando documento...

Buscar:

.

Este Sitio:

Principal

Dreamweaver

Fireworks

JavaScript

CSS

Sonido

Artículos

Links

E-ufemismos

Descargas

Historial

 

Mailing List:

Suscríbete a la lista de correo, No practico spamming y ofrece algunas ventajas.

Pulsa aquí para saber más y suscribirte.

 

Recomendados:

Tecnorama >Tutoriales Dreamweaver

 

Retrieving data using AHAH (2)

Versión para imprimir | Translate this page

In previous chapter, we created the file that will get the desired description for each item.

Now, we'll work with the main file: list_items.php: This file will show a list of item names and, when the user hovers over the item, the tooltip (obtained from item_details.php using AHAH) will be shown next to it.

In this chapter, we shall add the recordset to list all item, the basic layout and the required CSS:

  1. Open a new php file, save it as 'list_items.php'.
  2. Create a recordset to list all your items: This step should be already know by DW users, so we shall omit all the proccess. It should return, at least, both the item id (to pass it to item_details.php) and the item name (to be shown to the user):


  3. In the document body, add this code to create two divs:
    <div class="listItem">
    <div class="itemTooltip" id="divDynamicID">I am the tooltip </div>
    Item name goes here
    </div>

    (At this point, its important that you use 'divDynamicID' as id for the nested div. You'll learn the reason later)
  4. Time for CSS: Open the CSS panel and add a new style: Select the 'Class' radiobutton and call it 'listItem'. You can save it in the document or save it to a css file:


    This style should at least have this properties (you can add more to modify its appearance):
    • position:relative
    • width:150px
  5. Repeat this step for the 'itemTooltip' div. In this case, the CSS settings will be:
    • position:absolute
    • left:155px
    • visibility:hidden
    • width:120px
    After this step, the tooltip div will remain hidden by default.
  6. Drag and drop 'item name' (or the name of the field you are going to show the users) from your bindings panel and replace with it the 'item goes here' fragment in the 'listItem' div.
  7. Select the 'listItem' div and wrap it using the 'Repeat Region' Server behavior. When you have finished, you should have something like this:


  8. If you use Live Data View, you will see the items displayed in a single column:

OK. We've got everything ready to start adding some JavaScript.

Next Chapter: Adding JavaScript.

¿Comentarios? ->0

1.-  (Ninguno, de momento)

| |

Añade tu comentario



Escribe el código de la imagen superior:

:

Tutoriales Dreamweaver

-El muy buscado Menú desplegable

-¿Qué $%&$% es 'SSI'?

-Utilizar tablas de excel para actualizar tablas en html.

-Plantillas en DW MX: Regiones opcionales.

-Adaptar tablas a la ventana.

-Vista diseño para formatos no reconocidos

-Carga de imagenes en orden

-Mi primera Extensión

-Rollover remoto ('Disjointed Rollover')

-Iframes vs. Frames

-Contenido dinámico en celdas

-DW MX: Repeating Tables

-DW MX: Practica el Cloaking

-DW MX: CSS en tiempo Diseño

-Buscar y Reemplazar en Dreamweaver

-Menú dinámico

-Collaborative Dreamweaver: Design Notes and Files Panel

-Using PHP Server Formats and MySQL Dates

-Creando un Newsticker

-Generate Excel files with DWMX/PHP/MySQL (part 1)

-Manejo de fechas en PHP y MySQL

-Generate Excel files with DWMX/PHP/MySQL (part 2)

-Manejo de Fechas en consultas a MySQL

-Showing all records by default in a results page (PHP)

-Retrieving data using AHAH (1)

-Retrieving data using AHAH (2)

-Retrieving data using AHAH (3)

TECNORAMA es simplemente una página personal. No sirve ni de promoción del autor ni cosas por el estilo.
Todos los códigos, textos y tutoriales son de libre uso mientras se mencione al autor (no es mucho pedir)
Este sitio es compatible con IE6/NS6/Mozilla1.0
Para contactar, puedes enviarme un e-mail a tecnorama@hotmail.com