:strip_icc():strip_exif()/u/32826/yoda-tux.jpg?f=community)
Hoi,
Ik heb een scriptje gedownload van http://www.dynamicdrive.com/dynamicindex1/navigate1.htm.
(In het verleden is er als een een topic geweest over dit voorloper van dit script. De url hiervan is dezelfde als hierboven, maar het script is absoluut anders.)
Het script zorgt er voor dat je een zgn. "smart folding tree menu" in vertikale richting kan maken, met zeer simpele html code.
Als je een menu item aanklikt (en dit item is heeft een submenu), vouwt dit item open.
Door meer items aan te klikken, wordt de tree dus steeds langer.
Wat ik graag wil is; dat wanneer ik een nieuwe folder aan klik, de vorige folder sluit.
Tot nu toe is mij het nog niet gelukt om het script zodanig aan te passen dat dit is gelukt.
Een voorbeeld van de html code is:
In de code wordt verwezen naar een javascript met de naam: simpletreemenu.js
De code van het script is:
In het script is een functie die "ddtreemenu.flatten" heet. Deze functie kan je vanuit je html code aanroepen (staat omschreven op de site van www.dynamicdrive.com) om de gehele tree in te vouwen, door de volgende code te gebruiken:
Mij gedachte was als volgt:
Het invouwen van de vorige folder, is niets meer of minder dan het geheel inklappen van de tree, voordat het nieuwe item wordt geopend. Hiervoor kan ik dus de functie "ddtreemenu.flatten" gebruiken.
Aan het einde van de html code wordt de functie "ddtreemenu.createTree" aangeroepen om het script te starten.
Ik dacht dat, als ik de code van de functie "ddtreemenu.flatten" nu eens in het begin van de functie "ddtreemenu.createTree" plaatst, wordt met het aan klikken van een menu item, eerst het gehele menu ingeklapt voordat het nieuwe menu item wordt geopend.
Hiervoor heb ik de code van de functie "ddtreemenu.flatten" wat uitgekleed en meteen een aantal variabele gevuld. Ik kom dan tot de volgende code:
Deze code heb ik dus aan het begin van de functie "ddtreemenu.createTree" geplaats, maar dit gaat dus niet werken.
Ik ben er van overtuigd dat ik de code van "ddtreemenu.flatten", goed heb uitgekleed om de tree in te kunnen laten vouwen.
Deze vraag heb ik bij het forum van www.dynamicdrive.com ook gesteld, maar heb na 10 dagen nog niet 1 reply gehad)
Ik hoop dat er iemand is die mij kan vertellen wat ik niet goed doe.
Ik heb een scriptje gedownload van http://www.dynamicdrive.com/dynamicindex1/navigate1.htm.
(In het verleden is er als een een topic geweest over dit voorloper van dit script. De url hiervan is dezelfde als hierboven, maar het script is absoluut anders.)
Het script zorgt er voor dat je een zgn. "smart folding tree menu" in vertikale richting kan maken, met zeer simpele html code.
Als je een menu item aanklikt (en dit item is heeft een submenu), vouwt dit item open.
Door meer items aan te klikken, wordt de tree dus steeds langer.
Wat ik graag wil is; dat wanneer ik een nieuwe folder aan klik, de vorige folder sluit.
Tot nu toe is mij het nog niet gelukt om het script zodanig aan te passen dat dit is gelukt.
Een voorbeeld van de html code is:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script type="text/javascript" src="simpletreemenu.js"></script> <link rel="stylesheet" type="text/css" href="simpletree.css" /> </head> <body> <ul id="treemenu1" class="treeview"> <li>Item 1</li> <li>Item 2</li> <li>Folder 1 <ul> <li>Sub Item 1.1</li> <li>Sub Item 1.2</li> </ul> </li> <li>Item 3</li> <li>Folder 2 <ul> <li>Sub Item 2.1</li> <li>Folder 2.1 <ul> <li>Sub Item 2.1.1</li> <li>Sub Item 2.1.2</li> </ul> </li> <li>Folder 2.2 <ul> <li>Sub Item 2.2.1</li> <li>Sub Item 2.2.2</li> </ul> </li> </ul> </li> <li>Item 4</li> </ul> <script type="text/javascript"> //ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1)) ddtreemenu.createTree("treemenu1", true) </script> </body> </html> |
In de code wordt verwezen naar een javascript met de naam: simpletreemenu.js
De code van het script is:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
| var persisteduls=new Object() var ddtreemenu=new Object() ddtreemenu.closefolder="closed.gif" //set image path to "closed" folder image ddtreemenu.openfolder="open.gif" //set image path to "open" folder image //////////No need to edit beyond here/////////////////////////// ddtreemenu.createTree=function(treeid, enablepersist, persistdays){ var ultags=document.getElementById(treeid).getElementsByTagName("ul") if (typeof persisteduls[treeid]=="undefined") persisteduls[treeid]=(enablepersist==true && ddtreemenu.getCookie(treeid)!="")? ddtreemenu.getCookie(treeid).split(",") : "" for (var i=0; i<ultags.length; i++) ddtreemenu.buildSubTree(treeid, ultags[i], i) if (enablepersist==true){ //if enable persist feature var durationdays=(typeof persistdays=="undefined")? 1 : parseInt(persistdays) ddtreemenu.dotask(window, function(){ddtreemenu.rememberstate(treeid, durationdays)}, "unload") //save opened UL indexes on body unload } } ddtreemenu.buildSubTree=function(treeid, ulelement, index){ ulelement.parentNode.className="submenu" if (typeof persisteduls[treeid]=="object"){ //if cookie exists (persisteduls[treeid] is an array versus "" string) if (ddtreemenu.searcharray(persisteduls[treeid], index)){ ulelement.setAttribute("rel", "open") ulelement.style.display="block" ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")" } else ulelement.setAttribute("rel", "closed") } //end cookie persist code else if (ulelement.getAttribute("rel")==null || ulelement.getAttribute("rel")==false) //if no cookie and UL has NO rel attribute explicted added by user ulelement.setAttribute("rel", "closed") else if (ulelement.getAttribute("rel")=="open") //else if no cookie and this UL has an explicit rel value of "open" ddtreemenu.expandSubTree(treeid, ulelement) //expand this UL plus all parent ULs (so the most inner UL is revealed!) ulelement.parentNode.onclick=function(e){ var submenu=this.getElementsByTagName("ul")[0] if (submenu.getAttribute("rel")=="closed"){ submenu.style.display="block" submenu.setAttribute("rel", "open") ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")" } else if (submenu.getAttribute("rel")=="open"){ submenu.style.display="none" submenu.setAttribute("rel", "closed") ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.closefolder+")" } ddtreemenu.preventpropagate(e) } ulelement.onclick=function(e){ ddtreemenu.preventpropagate(e) } } ddtreemenu.expandSubTree=function(treeid, ulelement){ //expand a UL element and any of its parent ULs var rootnode=document.getElementById(treeid) var currentnode=ulelement currentnode.style.display="block" currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")" while (currentnode!=rootnode){ if (currentnode.tagName=="UL"){ //if parent node is a UL, expand it too currentnode.style.display="block" currentnode.setAttribute("rel", "open") //indicate it's open currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")" } currentnode=currentnode.parentNode } } ddtreemenu.flatten=function(treeid, action){ //expand or contract all UL elements var ultags=document.getElementById(treeid).getElementsByTagName("ul") for (var i=0; i<ultags.length; i++){ ultags[i].style.display=(action=="expand")? "block" : "none" var relvalue=(action=="expand")? "open" : "closed" ultags[i].setAttribute("rel", relvalue) ultags[i].parentNode.style.backgroundImage=(action=="expand")? "url("+ddtreemenu.openfolder+")" : "url("+ddtreemenu.closefolder+")" } } ddtreemenu.rememberstate=function(treeid, durationdays){ //store index of opened ULs relative to other ULs in Tree into cookie var ultags=document.getElementById(treeid).getElementsByTagName("ul") var openuls=new Array() for (var i=0; i<ultags.length; i++){ if (ultags[i].getAttribute("rel")=="open") openuls[openuls.length]=i //save the index of the opened UL (relative to the entire list of ULs) as an array element } if (openuls.length==0) //if there are no opened ULs to save/persist openuls[0]="none open" //set array value to string to simply indicate all ULs should persist with state being closed ddtreemenu.setCookie(treeid, openuls.join(","), durationdays) //populate cookie with value treeid=1,2,3 etc (where 1,2... are the indexes of the opened ULs) } ////A few utility functions below////////////////////// ddtreemenu.getCookie=function(Name){ //get cookie value var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return "" } ddtreemenu.setCookie=function(name, value, days){ //set cookei value var expireDate = new Date() //set "expstring" to either future or past date, to set or delete cookie, respectively var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days)) document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/"; } ddtreemenu.searcharray=function(thearray, value){ //searches an array for the entered value. If found, delete value from array var isfound=false for (var i=0; i<thearray.length; i++){ if (thearray[i]==value){ isfound=true thearray.shift() //delete this element from array for efficiency sake break } } return isfound } ddtreemenu.preventpropagate=function(e){ //prevent action from bubbling upwards if (typeof e!="undefined") e.stopPropagation() else event.cancelBubble=true } ddtreemenu.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload) var tasktype=(window.addEventListener)? tasktype : "on"+tasktype if (target.addEventListener) target.addEventListener(tasktype, functionref, false) else if (target.attachEvent) target.attachEvent(tasktype, functionref) } |
In het script is een functie die "ddtreemenu.flatten" heet. Deze functie kan je vanuit je html code aanroepen (staat omschreven op de site van www.dynamicdrive.com) om de gehele tree in te vouwen, door de volgende code te gebruiken:
HTML:
1
| <a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">Contact All</a> |
Mij gedachte was als volgt:
Het invouwen van de vorige folder, is niets meer of minder dan het geheel inklappen van de tree, voordat het nieuwe item wordt geopend. Hiervoor kan ik dus de functie "ddtreemenu.flatten" gebruiken.
Aan het einde van de html code wordt de functie "ddtreemenu.createTree" aangeroepen om het script te starten.
Ik dacht dat, als ik de code van de functie "ddtreemenu.flatten" nu eens in het begin van de functie "ddtreemenu.createTree" plaatst, wordt met het aan klikken van een menu item, eerst het gehele menu ingeklapt voordat het nieuwe menu item wordt geopend.
Hiervoor heb ik de code van de functie "ddtreemenu.flatten" wat uitgekleed en meteen een aantal variabele gevuld. Ik kom dan tot de volgende code:
JavaScript:
1
2
3
4
5
| var ultags=document.getElementById(treeid).getElementsByTagName("ul") for (var i=0; i<ultags.length; i++){ ultags[i].style.display="none" ultags[i].setAttribute("rel", "closed") ultags[i].parentNode.style.backgroundImage="url("+ddtreemenu.closefolder+")" |
Deze code heb ik dus aan het begin van de functie "ddtreemenu.createTree" geplaats, maar dit gaat dus niet werken.
Ik ben er van overtuigd dat ik de code van "ddtreemenu.flatten", goed heb uitgekleed om de tree in te kunnen laten vouwen.
Deze vraag heb ik bij het forum van www.dynamicdrive.com ook gesteld, maar heb na 10 dagen nog niet 1 reply gehad)
Ik hoop dat er iemand is die mij kan vertellen wat ik niet goed doe.
:strip_icc():strip_exif()/u/146648/full.jpg?f=community)
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
:strip_exif()/u/27216/bosmonster_dropdown.gif?f=community)
:strip_icc():strip_exif()/u/11824/crop5eb44c54f2bc5_cropped.jpeg?f=community)
