[AJAX] Menu -> submenu -> pagina
Auteur: Wim - 01 januari 2007 - 23:25 - Gekeurd door: Wijnand - Hits: 11655 - 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:
<!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 language="javascript">
<!--START: AJAX CODE -->
function create_http_object()
{
var ActiveXTypes = [
"Microsoft.XMLHTTP",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP"
];
for( var i = 0; i < ActiveXTypes.length; i++ )
{
try
{
return new ActiveXObject( ActiveXTypes[i] );
}
catch( e )
{ }
}
try
{
return new XMLHttpRequest();
}
catch( e )
{ }
return false;
}
function make_request(url, callback_function, http_method, post_values, return_xml)
{
http = create_http_object();
if(!http)
{
alert('Uw browser ondersteunt dit script niet.');
return false;
}
http.onreadystatechange = function()
{
if(http.readyState == 4)
{
if(http.status == 200)
{
if(callback_function)
{
if(return_xml)
{
eval(callback_function + '(http.responseXML)');
}
else
{
eval(callback_function + '(http.responseText)');
}
}
}
else
{
alert('Error! (' + http.status + ')');
}
}
}
if(!post_values)
{
post_values = null;
}
if(!http_method)
{
http_method = "GET";
}
http.open(http_method, url, true);
if(http_method == "POST")
{
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
http.send(post_values);
}
<!-- END: AJAX CODE -->
<!-- START: AJAX FUNCTIONS -->
function set_menu_left(result)
{
document.getElementById('menu_left').innerHTML = result;
}
function set_page_content(result)
{
document.getElementById('page_content').innerHTML = result;
}
<!-- END: AJAX FUNCTIONS -->
</script>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="19" colspan="2">AJAXmenus</td>
</tr>
<tr>
<td height="19"> </td>
<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>
</tr>
<tr>
<td valign="top"><div id="menu_left"></div></td>
<td valign="top"><div id="page_content"></div></td>
</tr>
</table>
</body>
</html>
<!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 language="javascript"> <!--START: AJAX CODE --> function create_http_object() { var ActiveXTypes = [ "Microsoft.XMLHTTP", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP" ]; for( var i = 0; i < ActiveXTypes.length; i++ ) { try { return new ActiveXObject( ActiveXTypes[i] ); } catch( e ) { } } try { return new XMLHttpRequest(); } catch( e ) { } return false; } function make_request(url, callback_function, http_method, post_values, return_xml) { http = create_http_object(); if(!http) { alert('Uw browser ondersteunt dit script niet.'); return false; } http.onreadystatechange = function() { if(http.readyState == 4) { if(http.status == 200) { if(callback_function) { if(return_xml) { eval(callback_function + '(http.responseXML)'); } else { eval(callback_function + '(http.responseText)'); } } } else { alert('Error! (' + http.status + ')'); } } } if(!post_values) { post_values = null; } if(!http_method) { http_method = "GET"; } http.open(http_method, url, true); if(http_method == "POST") { http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); } http.send(post_values); } <!-- START: AJAX FUNCTIONS --> function set_menu_left(result) { document.getElementById('menu_left').innerHTML = result; } function set_page_content(result) { document.getElementById('page_content').innerHTML = result; } <!-- END: AJAX FUNCTIONS --> </script> </head> <body> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="19" colspan="2">AJAXmenus</td> </tr> <tr> <td height="19"> </td> <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> </tr> <tr> <td valign="top"><div id="menu_left"></div></td> <td valign="top"><div id="page_content"></div></td> </tr> </table> </body> </html>
menus.php
<?php
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 />');
?>
<?php 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 />'); ?>
pages.php
<?php
$nav = explode (',', $_REQUEST['page']);
echo ('<strong>Item '.$nav[1].'</strong><br /><br />');
echo ('Menu '.$nav[0].', Item '.$nav[1]);
?>
<?php $nav = explode (',', $_REQUEST['page']); echo ('<strong>Item '.$nav[1].'</strong><br /><br />'); echo ('Menu '.$nav[0].', Item '.$nav[1]); ?>
Download code (.txt)
|
|
Stemmen |
Niet ingelogd. |
|