Dtree學(xué)習(xí)

          Posted on 2007-04-29 14:20 flustar 閱讀(2090) 評(píng)論(0)  編輯  收藏

          dtree動(dòng)態(tài)樹+Javascript右鍵菜單(一)
          1、從網(wǎng)上下載dtree控件。(好多地方都有的哦:P)
          2、在Jbuilder中新建Web應(yīng)用,命名為TreeLearing
          3、解壓縮dtree.rar包。
              把dtree目錄拷貝至TreeLearing應(yīng)用中。
              dtree目錄下包括這些文件:example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目錄
              注意:除了api.html之外,其它的文件都是必須拷貝的。只有這個(gè)api.html是對(duì)dtree控件的函數(shù)介紹。
          4、復(fù)制example01.html,并把粘貼后的文件重命名為Tree.jsp
          :)  (保留原來的文件,以備參考是個(gè)好習(xí)慣哦~~)
          注意dtree目錄下的文件結(jié)構(gòu)不要改變,否則樹就不會(huì)正常顯示
           
          5、在Web應(yīng)用中指定首頁為Tree.jsp頁面。
          6、Tree.jsp中的代碼如下:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html>
          <head>
           <title>Destroydrop &raquo; Javascripts &raquo; Tree</title>
           <link rel="StyleSheet" href="dtree.css" type="text/css" />
           <script type="text/javascript" src="dtree.js"></script>
          </head>
          <body>
          <h1><a href="/">Destroydrop</a> &raquo; <a href="/javascripts/">Javascripts</a> &raquo; <a href="/javascripts/tree/">Tree</a></h1>
          <h2>Example</h2>
          <div class="dtree">
           <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
           <script type="text/javascript">
            <!--
            d = new dTree('d');
            d.add(0,-1,'My example tree');
            d.add(1,0,'Node 1','example01.html');
            d.add(2,0,'Node 2','example01.html');
            d.add(3,1,'Node 1.1','example01.html');
            d.add(4,0,'Node 3','example01.html');
            d.add(5,3,'Node 1.1.1','example01.html');
            d.add(6,5,'Node 1.1.1.1','example01.html');
            d.add(7,0,'Node 4','example01.html');
            d.add(8,1,'Node 1.2','example01.html');
            d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
            d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
            d.add(11,9,'Mom\'s birthday','example01.html');
            d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
            document.write(d);
            //-->
           </script>
          </div>
          </body>
          </html>
           
          7、刪除紫紅色部分的代碼,因?yàn)椴恍枰丁?br /> 8、注意看綠色和藍(lán)色部分的代碼,這才是真正為樹添加節(jié)點(diǎn)的部分。
              d.add(0,-1,'My example tree');
              這一句為樹添加了一個(gè)根節(jié)點(diǎn),顯示名稱為'My example tree'
              d.add(1,0,'Node 1','example01.html');
              這一句在樹的根節(jié)點(diǎn)下面添加了一個(gè)子節(jié)點(diǎn)。(d.add()方法的參數(shù)具體含義可參見api.html文件)
              常用的:
              第一個(gè)參數(shù),表示當(dāng)前節(jié)點(diǎn)的ID
              第二個(gè)參數(shù),表示當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)的ID
              第三個(gè)參數(shù),節(jié)點(diǎn)要顯示的文字
              第四個(gè)參數(shù),點(diǎn)擊該節(jié)點(diǎn)的超鏈接(注意也可以是某個(gè)servlet或是struts應(yīng)用中的某個(gè).do請(qǐng)求)
              第五個(gè)參數(shù),鼠標(biāo)移至該節(jié)點(diǎn)時(shí)顯示的文字
              第六個(gè)參數(shù),指定點(diǎn)擊該節(jié)點(diǎn)時(shí)在哪個(gè)楨中打開超鏈接
              ……
          9、運(yùn)行應(yīng)用程序。可以看到一棵漂亮的樹。
          原貼地址
          http://blog.sina.com.cn/u/4ae9618f010006y3


          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           

          posts - 146, comments - 143, trackbacks - 0, articles - 0

          Copyright © flustar

          主站蜘蛛池模板: 昌平区| 广宗县| 屯门区| 温泉县| 丹阳市| 孟村| 芜湖县| 黑河市| 兴宁市| 卓资县| 福泉市| 久治县| 彰武县| 扬州市| 大名县| 山阴县| 苍山县| 光山县| 旬邑县| 许昌市| 东乌珠穆沁旗| 龙口市| 芮城县| 邛崃市| 娄烦县| 罗定市| 双城市| 贵阳市| 桦川县| 高州市| 鹿泉市| 阜新| 通江县| 五峰| 漳州市| 江口县| 都江堰市| 探索| 尚义县| 时尚| 买车|