Tree menu has a very wide range of applications in many desktop applications, the main advantage is that the structure is clear, so that users can very clearly know the location of their current. But the application of the tree menu on the Web because there is no ideal ready-made components can be used directly, so in general, programmers mainly through JavaScript to implement some simple tree structure menu, but these menus are often in advance to set the menu items, as well as the various menu items in the hierarchical relationship, is not conducive to expansion, once another menu structure needs to be rewritten, so it is not very convenient to use.
Through the study of function recursion, I found that this kind of tree menu can be changed dynamically by recursive function, so that the display of the tree menu is not limited by the series. Here is what I use PHP (as the mainstream development language now), MySQL (and PHP collocation of the best combination), JavaScript write a dynamic tree menu processing code, if you are interested, come with me to see how I realized it:)
First, we need a database in which we create the following table:
CREATE TABLE Menu (
ID tinyint (4) not NULL auto_increment,
parent_id tinyint (4) DEFAULT 0 not NULL,
Name varchar (20),
URL varchar (60),
Prima (the most complete virtual hosting management System) RY KEY (ID)
);
The ID in this table is indexed
PARENT_ID is used to save the ID number of the previous menu, or 0 if it is a first-level menu
Name is the menu, which is the menu content to display on the page
URL if a menu is an end-level menu, you need to specify the URL address of the connection, which is the other non-end menu that is used to hold this address, the field is empty
Well, the database is there, you can add some records, here are some of the records I used when I did the test:
INSERT into Menu VALUES (1, 0, Personnel management,);
INSERT into Menu VALUES (2, 0, communication communication,);
INSERT into Menu VALUES (3, 1, archive management,);
INSERT into Menu VALUES (4, 1, attendance management, http://localhost/personal/attendance.php (as the current mainstream development language));
INSERT into Menu VALUES (5, 2, contacts,);
INSERT into Menu VALUES (6, 2, web conferencing,);
INSERT into Menu VALUES (7, 3, add File, http://localhost/personal/add_achive.php (as the current mainstream development language));
INSERT into Menu VALUES (8, 3, query file, http://localhost/personal/search_archive.php (as the current mainstream development language));
INSERT into Menu VALUES (9, 3, delete file, http://localhost/personal/delete_archive.php (as current mainstream development language));
INSERT into Menu VALUES (10, 5, new communication record, http://localhost/communication/add_address.php (as the current mainstream development language));
INSERT into Menu VALUES (11, 5, query the communication record, http://localhost/communication/search_address.php (as the current mainstream development language));
INSERT into Menu VALUES (12, 5, delete the communication record, http://localhost/communication/delete_address.php (as the current mainstream development language));
INSERT into menu VALUES (13, 6, hold a meeting, http://localhost/communication/convence_meeting.php (as the current mainstream development language));
INSERT into menu VALUES (14, 6, meeting query, http://localhost/communication/search_meeting.php (as the current mainstream development language));
When adding records, it is important to note that non-level menu parent_id must be specified as the ID number of the parent menu, otherwise your menu will not be displayed:)
All right! With the database, the following PHP (as the current mainstream development language), JavaScript read the menu from the database, and displayed:)
1. JavaScript script:
function ShowMenu (MenuID)
{
if (menuid.style.display== "None")
{
Menuid.style.display= "";
}
Else
{
Menuid.style.display= "None";
}
}
This script is simple enough to respond to an event clicked on a menu.
2. css file:
TD {
font-family: "Verdana", "Song Body"; font-size:12px; line-height:130%; letter-spacing:1px
http://www.bkjia.com/PHPjc/509083.html www.bkjia.com true http://www.bkjia.com/PHPjc/509083.html techarticle Tree menu has a very wide range of applications in many desktop applications, the main advantage is that the structure is clear, so that users can very clearly know the location of their current. But on the web ...
