.  

 

 

.
.

10 / 12 / 2016

Usuarios conectados: 4

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, CS5 and DW CS5.5 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.

10.- New in version 2.0.4 (Nov 7, 2011): Unlimited numbers of menus can be created. Edit mode


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.

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

1.- Â«La Cour d’appel de l’Ontario a rendu un jugement légalisant les maisons closes, mais pas la sollicitation de rue.»Plus rien ne m’étonne, on vit dans une société d&x2p17;hy8erse#ualisation et de promiscuité débridée. Après l’amour libre, le sexe libre et la prostitution libre. Suite logique d’un même raisonnement. Reste à voir où ça va nous conduire.

2.- That's not just logic. That's really sesiebln.

3.- Thanks alot - your answer solved all my problems after several days strigglung

4.- Coaalnturgtions on having one of the most sophisticated blogs Ive come across in some time! Its just incredible how much you can take away from something simply because of how visually beautiful it is. Youve put together a great blog space –great graphics, videos, layout. This is definitely a must-see blog! http://owsndzfy.com [url=http://hcmcsyp.com]hcmcsyp[/url] [link=http://hjzwthbiwgp.com]hjzwthbiwgp[/link]

5.- one hundred and ten. Help me to to draw in the eye in the many ot?bsr??h§oBureerry Leather Guys Relaxed Carrier Dark are constructed from great elements, right here is the materials resilient, tough not to mention almost resistance against discolorations http://azwnrhbnvs.com [url=http://gzirmuzehj.com]gzirmuzehj[/url] [link=http://zcxoju.com]zcxoju[/link]

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 cdigo 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 cdigos, 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