login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > Overige > AJAX > [AJAX] Menu -> submenu -> pagina

[AJAX] Menu -> submenu -> pagina

Auteur: Wim - 01 januari 2007 - 23:25 - Gekeurd door: Wijnand - Hits: 11462 - Aantal punten: 4.25 (4 stemmen)





Dit is meer een scriptje dat je als voorbeeld kan gebruiken. Ik heb het btw gemaakt aan de hand van de tutorial van Lucas Van Dijk. Het is trouwens mijn eerste scriptje mbv AJAX.

De werking:
Kies een menu, en een submenu zal verschijnen. Als je hierna een item uit het submenu kiest zal de pagina verschijnen... allemaal zonder de hele pagina te refreshen offcourse (handig voor als je layout een behoorlijke omvang heeft)

Code:
index.php of whatever:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6.  
  7. <script language="javascript">
  8. <!--START: AJAX CODE -->
  9. function create_http_object()
  10. {
  11.     var ActiveXTypes = [
  12.         "Microsoft.XMLHTTP",
  13.         "MSXML2.XMLHTTP.5.0",
  14.         "MSXML2.XMLHTTP.4.0",
  15.         "MSXML2.XMLHTTP.3.0",
  16.         "MSXML2.XMLHTTP"
  17.     ];
  18.  
  19.     for( var i = 0; i < ActiveXTypes.length; i++ )
  20.     {
  21.         try
  22.         {
  23.             return new ActiveXObject( ActiveXTypes[i] );
  24.         }
  25.         catch( e )
  26.         { }
  27.     }
  28.  
  29.     try
  30.     {
  31.         return new XMLHttpRequest();
  32.     }
  33.     catch( e )
  34.     { }
  35.  
  36.     return false;
  37. }
  38.  
  39. function make_request(url, callback_function, http_method, post_values, return_xml)
  40. {
  41.     http = create_http_object();
  42.  
  43.     if(!http)
  44.     {
  45.         alert('Uw browser ondersteunt dit script niet.');
  46.         return false;
  47.     }
  48.  
  49.     http.onreadystatechange = function()
  50.     {
  51.         if(http.readyState == 4)
  52.         {
  53.             if(http.status == 200)
  54.             {
  55.                 if(callback_function)
  56.                 {
  57.                     if(return_xml)
  58.                     {
  59.                         eval(callback_function + '(http.responseXML)');
  60.                     }
  61.                     else
  62.                     {
  63.                         eval(callback_function + '(http.responseText)');
  64.                     }
  65.                 }
  66.             }
  67.             else
  68.             {
  69.                 alert('Error! (' + http.status + ')');
  70.             }
  71.         }
  72.     }
  73.  
  74.     if(!post_values)
  75.     {
  76.         post_values = null;
  77.     }
  78.     if(!http_method)
  79.     {
  80.         http_method = "GET";
  81.     }
  82.  
  83.     http.open(http_method, url, true);
  84.  
  85.     if(http_method == "POST")
  86.     {
  87.         http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  88.     }
  89.  
  90.     http.send(post_values);
  91. }
  92. <!-- END: AJAX CODE -->
  93.  
  94. <!-- START: AJAX FUNCTIONS -->
  95. function set_menu_left(result)
  96. {
  97. 	document.getElementById('menu_left').innerHTML = result;
  98. }
  99.  
  100. function set_page_content(result)
  101. {
  102. 	document.getElementById('page_content').innerHTML = result;
  103. }
  104. <!-- END: AJAX FUNCTIONS -->
  105. </script>
  106. </head>
  107.  
  108. <body>
  109. <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  110.   <tr>
  111.     <td height="19" colspan="2">AJAXmenus</td>
  112.   </tr>
  113.   <tr>
  114.     <td height="19">&nbsp;</td>
  115.     <td><a href="#" onclick="make_request('menus.php?menu=1', 'set_menu_left');return false;">Menu 1</a> - <a href="#" onclick="make_request('menus.php?menu=2', 'set_menu_left');return false;">Menu 2</a> - <a href="#" onclick="make_request('menus.php?menu=3', 'set_menu_left');return false;">Menu 3</a> </td>
  116.   </tr>
  117.   <tr>
  118.     <td valign="top"><div id="menu_left"></div></td>
  119.     <td valign="top"><div id="page_content"></div></td>
  120.   </tr>
  121. </table>
  122. </body>
  123. </html>


menus.php
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. 	echo ('<strong>Menu '.$_REQUEST['menu'].'</strong><br /><br /><a href="#" onclick="make_request(\'pages.php?page='.$_REQUEST['menu'].',1\', \'set_page_content\');return false;">item 1</a><br /><a href="#" onclick="make_request(\'pages.php?page='.$_REQUEST['menu'].',2\', \'set_page_content\');return false;">item 2</a><br /><a href="#" onclick="make_request(\'pages.php?page='.$_REQUEST['menu'].',3\', \'set_page_content\');return false;">item 3</a><br />');
  3. ?>


pages.php
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. $nav = explode (',', $_REQUEST['page']);
  3. echo ('<strong>Item '.$nav[1].'</strong><br /><br />');
  4. echo ('Menu '.$nav[0].', Item '.$nav[1]);
  5. ?>
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

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