login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > PHP > Handige scripts > PHP & Cookie inklap menu

PHP & Cookie inklap menu

Auteur: Carpmadness - 26 september 2004 - 16:56 - Gekeurd door: Dennisvb - Hits: 5139 - Aantal punten: (0 stemmen)




php checked welk menu open en welk menu dicht moet zijn

javascript zet de cookies.

Nu gaat ie dat checken dus niet achteraf bij de client doen, wat als irritant word ervaren.

alle menu's zitten in één cookie opgeslagen. dit omdat ik heb ontdekt dat je per server maar 20 cookies mag gebruiken en voor een menu zou het dan snel tveel worden.

Ok daar gaan we.

1. de javascript, zet deze binnen de <head> tags of in een extern javascript-bestand.

verander het domein bij de cookie in je eigen domein

de expiretijd bij de cookie heb ik maar gewoon een verre datum gezet, zodat je daar niet een hele functie voormoet gaan schrijven.

voor de rest hoeft hierin niks te worden veranderd

Code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. function toggleMenu(id) {
  3.     if(document.getElementById(id).style.display == 'none') {
  4.         document.getElementById(id).style.display = 'block';
  5.         cookie = replaceChars(getCookie('menu'),id,"1");
  6.             setCookie("menu",cookie);
  7.     }else {
  8.         document.getElementById(id).style.display = 'none';
  9.         cookie = replaceChars(getCookie('menu'),id,"0");
  10.             setCookie("menu",cookie);
  11.     }
  12. }
  13.  
  14. function replaceChars(entry,id, what) {
  15.     before = entry.slice(1,id);
  16.     id = parseInt(id)+1;
  17.     after = entry.slice(id,entry.lenght);
  18.     return "M" + before + what + after;
  19. }
  20.  
  21. function setCookie(name, value) {
  22.     document.cookie = name + "=" + escape(value) + "; expires=Fri, 31 Dec 2010 23:59:59 GMT; path=/; domain=rechtophulp.nl;"
  23. }
  24.  
  25. function getCookie(id) {
  26.     var prefix = id + "=";
  27.     var begin = document.cookie.indexOf("; " + prefix);
  28.     if (begin == -1) {
  29.         begin = document.cookie.indexOf(prefix);
  30.         if (begin != 0)
  31.             return null;
  32.     }else
  33.         begin += 2;
  34.     var end = document.cookie.indexOf(";", begin);
  35.     if (end == -1)
  36.         end = document.cookie.length;
  37.     return unescape(document.cookie.substring(begin + prefix.length, end));
  38. }
  39. </script>


2. de php functie die menu's checked: open of dicht.

deze kun je eigenlijk overal neerzetten als hij maar niet ná de menu's komt! het beste is om deze gwoon bovenaan de pagina tzetten of net onder de eerste <body> tag.

stel de standaard instelling voor het menu in, voor als er nog geen cookie is of de cookies staan uitgeschakeld.

er moet altijd een "M" (van Menu) achter staan. dus, zoals nu, bij drie menu's 4 tekens waarvan de eerste een "M".

stel de standaard-instellingen van menu in en aantal menu's.

je telt bij instellingen vanaf links. dus menu 1 heeft als waarde: "1", menu 2: "0" en menu 3: "1".

"1" is open "0" is dicht.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?
  2. if (!isset($_COOKIE["menu"])) {
  3.     setcookie("menu","M101",time()+60*60,"/","rechtophulp.nl");
  4.     } //dit moet ergens op je pagina voordat er output is gegenereerd.
  5. function menu($which) {
  6.     $menu = (isset($_COOKIE['menu']) && $_COOKIE['menu'] != "NaN") ? $_COOKIE['menu'] : "M111101";
  7.     return (substr($menu, $which,1) == "0") ? "none" : "block";
  8. }
  9. ?>


3. nu de menu's. dit was best lastig. maar ik vond een bug en heb dit dus maar opgelost. volg de instructies goed op

in een menu moeten 3 dingen komen te staan:
- een knop om menu dicht te klappen (deze moet dus in een gedeelte staan dat niet onzichtbaar wordt als je erop klikt)
- een id toekennen aan het gedeelte dat onzichtbar wordt. deze id moet hetzelfde zijn als bij knop is opgegeven.
- de style-display die aan het begin van maken v pagina door php wordt ingevuld.

je moet hierbij goed opletten dat het eerste menu "1" heet, het tweede "2", enz, enz

er mogen geen cijfers ontbreken. (dus niet bv menu's 1,2,4,5 en 6 maar wel 1,2,3,4,5)

in deze drie dingen die ik noemde moeten overal dat nummer komen te staan.

een vbtje voor menu 1:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. a href="javascript:toggleMenu('1')">Menu1</a> //het knopje voor menu 1
  2.  
  3. id="1" style="display:<?=menu('1')?>" // in de tag/het gedeelte dat onzichtbaar word gemaakt


om het helemaal duidelijk te maken heb ik er maar weer een menuutje als vb bij gdaan. netzoals in vb hierboven met drie menuutje die met cookie worden onthouden. Om het dus tlaten draaien moet je een pagina maken met erin:

de php-check voor cookie, boven aan.

<html><head>

de javascript

</head><body>

je menu met de php-check voor de status per menu

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?
  2. if (!isset($_COOKIE["menu"])) {
  3.     setcookie("menu","M101",time()+60*60,"/","carpmadness.nl"); // <=Aanpassen
  4.     } //dit moet ergens op je pagina voordat er output is gegenereerd.
  5. function menu($which) {
  6.     $menu = (isset($_COOKIE['menu']) && $_COOKIE['menu'] != "NaN") ? $_COOKIE['menu'] : "M111101";
  7.     return (substr($menu, $which,1) == "0") ? "none" : "block";
  8. }
  9. ?>
  10. <html>
  11. <head>
  12. <script type="text/javascript">
  13. function toggleMenu(id) {
  14.     if(document.getElementById(id).style.display == 'none') {
  15.         document.getElementById(id).style.display = 'block';
  16.         cookie = replaceChars(getCookie('menu'),id,"1");
  17.             setCookie("menu",cookie);
  18.     }else {
  19.         document.getElementById(id).style.display = 'none';
  20.         cookie = replaceChars(getCookie('menu'),id,"0");
  21.             setCookie("menu",cookie);
  22.     }
  23. }
  24.  
  25. function replaceChars(entry,id, what) {
  26.     before = entry.slice(1,id);
  27.     id = parseInt(id)+1;
  28.     after = entry.slice(id,entry.lenght);
  29.     return "M" + before + what + after;
  30. }
  31.  
  32. function setCookie(name, value) {
  33.     document.cookie = name + "=" + escape(value) + "; expires=Fri, 31 Dec 2010 23:59:59 GMT; path=/; domain=carpmadness.nl;" // <= Aanpassen
  34. }
  35.  
  36. function getCookie(id) {
  37.     var prefix = id + "=";
  38.     var begin = document.cookie.indexOf("; " + prefix);
  39.     if (begin == -1) {
  40.         begin = document.cookie.indexOf(prefix);
  41.         if (begin != 0)
  42.             return null;
  43.     }else
  44.         begin += 2;
  45.     var end = document.cookie.indexOf(";", begin);
  46.     if (end == -1)
  47.         end = document.cookie.length;
  48.     return unescape(document.cookie.substring(begin + prefix.length, end));
  49. }
  50. </script>
  51. </head>
  52. <body>
  53.  
  54. <table border="1" cellpadding="0" cellspacing="0" bordercolor="#111111" width="200">
  55.   <tr>
  56.     <td width="175" style="font-family: Arial Black; font-variant: small-caps; font-size:10pt">
  57.     <a href="javascript:toggleMenu('1')">Menu</a>
  58.     </td>
  59.   </tr>
  60.   <tr>
  61.     <td style="font-family: Arial Black; font-variant: small-caps; font-size:10pt" id="1" style="display:<?=menu('1')?>">
  62.     1. <a href="linka.htm">Link a</a><br>
  63.     2. <a href="linkb.htm">Link b</a><br>
  64.     3. <a href="linkc.htm">Link c </a>
  65.     </td>
  66.   </tr>
  67. </table> 
  68. <br><br>
  69. <table border="1" cellpadding="0" cellspacing="0" bordercolor="#111111" width="200">
  70.   <tr>
  71.     <td width="175" style="font-family: Arial Black; font-variant: small-caps; font-size:10pt">
  72.     <a href="javascript:toggleMenu('2')">Menu</a>
  73.     </td>
  74.   </tr>
  75.   <tr>
  76.     <td style="font-family: Arial Black; font-variant: small-caps; font-size:10pt" id="2" style="display:<?=menu('2')?>">
  77.     1. <a href="linka.htm">Link a</a><br>
  78.     2. <a href="linkb.htm">Link b</a><br>
  79.     3. <a href="linkc.htm">Link c </a>
  80.     </td>
  81.   </tr>
  82. </table>
  83. <br><br>
  84. <table border="1" cellpadding="0" cellspacing="0" bordercolor="#111111" width="200">
  85.   <tr>
  86.     <td width="175" style="font-family: Arial Black; font-variant: small-caps; font-size:10pt">
  87.     <a href="javascript:toggleMenu('3')">Menu</a>
  88.     </td>
  89.   </tr>
  90.   <tr>
  91.     <td style="font-family: Arial Black; font-variant: small-caps; font-size:10pt" id="3" style="display:<?=menu('3')?>">
  92.     1. <a href="linka.htm">Link a</a><br>
  93.     2. <a href="linkb.htm">Link b</a><br>
  94.     3. <a href="linkc.htm">Link c </a>
  95.     </td>
  96.   </tr>
  97. </table>
  98. </body>
  99. </html>


Het onderste voorbeeld moet compleet werken... Je moet er alleen op letten dat je 2x het domein aanpast!Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (2)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.048s