12. 樹狀目錄+HTML5
12-1 index.php
<?php
$root_pass=""; //資料庫root密碼
$db_name="test"; //資料庫名稱
/* 連資料庫檢查 */
$link=mysql_connect("localhost","root",$root_pass); //資料庫連線
mysql_select_db("test");
mysql_query("SET NAMES 'utf8'"); //設定語系
error_reporting(0);
$sql="select * from menu order by ofsn , sn";
$result=mysql_query($sql);
$menu="";
while(list($sn,$ofsn,$title,$url)=mysql_fetch_row($result)){
$menu.="a.add($sn, $ofsn,'$title','$url','$title','show');\n";
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel='stylesheet' type='text/css' media='screen' href='style.css' />
<title>樹狀選單</title>
</head>
<body>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
var ww=$(window).width();
var hh=$(window).height();
w2w = ww-220;
$('#tbl').width(ww);
$('#tbl').height(hh);
$('#w1').width(200);
$('#w2').width(w2w);
$('#w2').height(hh);
});
</script>
<table id="tbl">
<tr><td valign='top' id="w1">
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
<script type="text/javascript">
a = new dTree('a');
a.config.target = "show";
a.config.folderLinks = true ;
a.config.useSelection = true;
a.config.useCookies = true;
a.config.useLines = false;
a.config.useIcons = false;
a.config.useStatusText = true ;
a.config.closeSameLevel = true;
a.config.inOrder = true ;
a.add(0,-1,'目錄','javascript: void(0);');
<?php echo $menu;?>
document.write(a);
</script>
<a href="javascript: a.openAll();">全部開啟</a><br>
<a href="javascript: a.closeAll();">全部關閉</a><br>
<a href="javascript: a.openTo(12, true);">開啟編號12</a>
</td><td valign='top'>
<iframe name="show" id="w2"></iframe>
</td></tr>
</table>
</body>
</html>
