xajax expanding list query
As you'll see, I'm a newbie to all this ajax stuff but I can do a bit of php and so I plumped for xajax to take care of the javascript for me.
I've got an array with items listed in different section. I want to use this array to produce an unordered list that expands when someone clicks on a section.
I've adapted a script I found here:
Sliding Draw
My script currently looks like this:
<?php
include ("xajax_core/xajax.inc.php");
$subs = array(
"Mortice" => array("Union Deadlock 2.5", "Union Deadlock 3", "Union Sashlock 2.5", "Union Sashlock 3"),
"Cylinders" => array("30/30 Euro", "30/40 Euro", "30/50 Euro", "30/60 Euro"),
"uPVC" => array("30/92 Fullex", "35/92 Fullex", "Sash jammer")
);
function addsub($show, $key)
{
$objResponse=new xajaxResponse();
if ($show=="true") {
$objResponse->assign("list", "style.display", "block");
$objResponse->replace("$key","innerHTML","true","false");
}
else {
$objResponse->assign("list", "style.display", "none");
$objResponse->replace("$key","innerHTML","false","true");
}
return $objResponse;
}
$xajax = new xajax();
$xajax->registerFunction("addsub");
$xajax->processRequest();
?>
<!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=utf-8" />
<?php $xajax->printJavascript() ?>
<title>Expand menu test</title>
<style type="text/css">
.list {display: none;}
</style>
</head>
<body>
<?php
echo "<ul>\n";
foreach ($subs as $key => $group) {
echo "<li id=\"".$key."\" onClick=\"xajax_addsub('true','$key');\">".$key."\n";
echo "<ul class=\"list\" id=\"list\">\n";
while (list($list, $each) = each($group)) {
echo "<li id=\"list\">".$each."</li>\n";
}
echo "</ul>\n</li>\n";
}
echo "</ul>";
?>
</body>
</html>
The idea is that when an element is clicked on it changes the style display to block (thus showing the rest of the list) and sets the function to 'false' so if it's clicked again it will change the display back to none and hide the list.
Needless to say it doesn't work so if someone could point out to me why I'd be eternally grateful.
Cheers,
Nick.
Solved - I sorted it by placing the lists to be shown (or hidden) into <divs> and assigning them each a unique id and setting their style as display: none.
Then I just had to make a request to set the style as block when it was clicked on.
Thanks.
I think you should look into jQuery as your default javascript library, it's used by many web professionals and is very good. There you will find the Accordion control, which I think will suite this need very well.
Good luck!
加载中,请稍侯......
精彩评论