12. 樹狀目錄+HTML5

一、dTree 官網：http://www.destroydrop.com/javascripts/tree/
1.無限層樹狀選單，並可記住開啟狀態
2.同一畫面中可以有數個樹狀目錄
3.支援各種瀏覽器：IE 5+、Netscape 6+、Opera 7+、Mozilla

二、基本語法
<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.useCookies=false;
a.add(0,-1,'根目錄','javascript: void(0);');
a.add(編號, 父編號,'文字','網址');
document.write(a);
</script>

三、全開或關閉語法
<a href="javascript: a.openAll();">全部開啟</a>
<a href="javascript: a.closeAll();">全部關閉</a>
<a href="javascript: a.openTo(12, true);">開啟編號12</a>

四、完整語法
a.add(編號, 父編號,'文字','網址','提示文字','目標','一般圖示','點選圖示','開啟狀態');
a.add(1, 0, '關於我', 'me.php', '自我介紹', 'main', 'folder.gif', 'open_folder.gif',true);

五、設定項目
a.config.target = "mytarget";
預設的開啟目標位置
a.config.folderLinks = true ;
目錄是否可連結
a.config.useSelection = true;
是否以高亮度呈現目前選項
a.config.useCookies = true;
是否紀錄目前開啟狀態
a.config.useLines = true;
是否繪製節點間的線條
a.config.useIcons = true;
是否呈現圖示
a.config.useStatusText = false ;
以節點名稱取代網址顯示在狀態列
a.config.closeSameLevel = false;
是否關閉未點選的同一層節點
a.config.inOrder = false ;
假如父節點總是放在子節點之上，可設定此設定為true以加快速度。

六、HTML5 Video標籤
1.除了IE外，其餘瀏覽器幾乎都支援。
<video src="ck2.ogv" controls preload autoplay poster="ck2.png" width="682">
    您的瀏覽器太古董了...不支援 HTML 5 最新技術...建議使用FireFox或Google瀏覽器。
</video>
2.其影片格式為ogg(ogv)或H.264(mp4)，目前瀏覽器支援程度：
(1) ogg：Firefox (v3.5)、Opera (v10.50) 、Google Chrome (v3.0.182.2)
(2) H.264：Apple Safari (v4)、Google Chrome (v3.0.182.2)
3.將來源檔案與 ffmpeg2theora 工具放置於同一個目錄（資料夾）底下，開啟 DOS 視窗，下達以下指令…將影片轉為ogv格式：
ffmpeg2theora 影片檔
4.若有主機管理權限，請在/etc/mime.type中加入video/ogg     ogv  ogg