. .

 

 

.
.

03 / 09 / 2010

Usuarios conectados: 7

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 >Dreamweaver Extensions

 

Dynamic Dependant Dropdown Menus

Versión para imprimir | Translate this page

PHP/MySQL,ASP-VBScript,ASP-JavaScript and JSP Server Models . Dreamweaver MX, MX2004, DW8, DW CS3, DW CS4 and DW CS5 compatible

With this extension you can build up to five dependant dropdown menu lists (that is, collection of menu lists where every menu data changes filtered by its parent menus' selected values without reloading the page).

I'll give you an example: You want to build 3 menu lists to select a book, where:

  • Menu 1 displays availables genres.
  • Menu 2 displays authors for the selected genre.
  • Menu 3 displays books by the author selected in menu 2, but only those matching the genre in menu 1.

See the Demo Series->

Sometimes,this system can be more helpful than using a search form with multiple options. For example:
If someone makes a search in a database looking for Sci-Fi books written by Shakespeare the result should be 0 records.

With multiple dependant menus, as soon as the user selects "Sci-Fi" in the "genre" menu, Sir William won't appear in the authors' list. It could aslo happen that your shop sells novels by Isaac Asimov but doesn't have his essay books. With this menus, Mr Asimov won't be displayed if the user selects "essay" in the "genre" menu, but will be in the authors' list for "novel".

The main Features are:

  • Lightweight: The code is only 3 kb
  • Works with 99.9% of browsers: It can even work with Netscape 4.03!
  • Allows multiple selections.
  • Can mark as selected by default any dynamic value.
  • You can keep any predefinided value of your choice.
  • It can work even without table relationships: you can build up to 5 menus with data from just one simple table
  • Menus can be manipulated in DW: their appearance remains transparent to DW's Property Inspector and even more behaviors can be added to them
  • Works with most Server models: It gives support for ASP(VB and JS), PHP/MySQL, PHP ADODB, JSP and ColdFusion.
    If you are using ASP.NET, Kevin Marshall at WebXel has the anwser.
  • It is compatible with DW MX and DW MX2004

Now, let's see how it all works.
The menus use data from a DB that could be like this:

  • Table "genres":
    • -id_genre
    • -genre
  • Table "authors":
    • -id_author
    • -author
  • Table "books":
    • -id_book
    • -id_genre (foreign key)
    • -id_author (foreign key)
    • -book

To display a list of all books with their genre and author's name, the query could be:
SELECT books.book,books.id_book,books.id_author,books.id_genre,authors.author,genres.genre
FROM tbl_books,tbl_authors,tbl_genres
WHERE
tbl_books.id_genre=tbl_genres.id_genre
AND
tbl_books.id_author=tbl_authors.id_author
ORDER BY
genre ,author,book

 

This query returns something like:
 

As you can see, it's quite a common query and looks exacty like those you can use to build a repeat region.

Well, this is all you need to build the three menus! Let's see the steps:

1-Add a form, if you haven't one in your document, and place the cursor where you want the menus to be added

2- Select the PHP/ASP/JSP tab and click the icon in the image.

You will see this window:
 

3.- Select the Recordset that contains your query from the list at the top.

4- In the column "List/Menu names" add the names you wish for the menus (they will be the values used for the "name" attribute in the <select> tag). They must be in hierarchical order. In our example, the order is "genre,author,book" (if you wanted to filter by author first, because he has books of different genres, the order woul be "author, genre, book").
Let's add them and leave fields #4 and #5 blank.:

5- Now let's concentrate on the other two columns: In them, we'll select the name/value pair for every menu.
For example: the menu "genre" will have the values "genre" and "id_genre".
Don't worry about the values for the empty fields.

When you finish steps #4 and #5, you will have something like this

6.- Defining Default Values:
Using a default value, you can define which element in the menus should be marked as selected when the page loads. You don't need to define a "default value" for every menu, most of the times only one is needed. For example, if you define a default value for the Books menu, matching an URL parameter, the code is wise enough to guess which genre and author the book is related to (note that in this example we've also added another menu to separate books and CD's and applied a style to the menus using the "Style" dropdown list in the extension window):

The menus, marking as selected the url param "item"

Now, the same menus showing another item:

7.- It's done. Click "OK" and you''ll see this:
 

7.- Now you can move them, apply a style or whatever you want, as long as you don't change their names, the function call attached to them (onLoad="TCN_reload(this)") and you leave the script code after the three menus.

8.- New in version 1.5.0: You can keep intact the predefined value: it won't be deleted when the menus are updated. Use it to display a title in the menus!!!See a demo of this feature>>

9.- New in version 1.7.0: The extension can manage menus allowing multiple selections.


To remove it, simply delete the menus and the script.

See Demo Series with lots of samples!!>>>

Price: Eur. 7.50 (+-$9.00 USD). The pack includes the extension, a 19-page manual in PDF format, including some useful tips and a bonus extension (read more about it)

Comments? 108, so far. Displaying 1 ->5

1.

2.- for the guy with the " issue on the menu, try using the ` button right next to the 1, dreamweaver and other extensions have conflicts with the " and the purposes behind the "

3.- Has anyone tried this with CS5?

Tecnorama says: Short and simple: YES

4.- Hello, my name is Francisco and I live in Brazil.
I found its length through a friend in a forum, very interested in it, but I would test her, so soon I can buy if it meets my needs.
Could you send me the extent test or tell me where I can find it for testing?

Thank you very much
Francisco
frankikosjose@gmail.com

5.- Hi Andres I started to use your extension wich I've found easy and great !!! By the way I've noticed that on a page wich retrieves data from a database does not work if in the database I have a " sign... actually I've noticed if I have a word like a list of camera viewfinders or television where dimensions are set on inches ( " ).
Like: Sony Viewfinder 7" ... and so on... I have to delete the inches sign otherwise the Dropdowns menu doesn' t work at all.
Hope this will help you, I don't know if other characters can stop this Dropdowns menu to work.... I'll let you know if I find somithing else.

« Previous | 1 - 5 | 6 - 10 | 11 - 15 | 16 - 20 | 21 - 25 | 26 - 30 | 31 - 35 | 36 - 40 | 41 - 45 | 46 - 50 | Next »

Add your Comments



Escribe el código de la imagen superior:

:

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