Javascript 目錄樹使用簡(jiǎn)介

XTree 樹控件使用手冊(cè)

1?????? API 說(shuō)明

1.1 ??? WebFXTreeAbstractNode

樹控件的抽象基類，不需要?jiǎng)?chuàng)建實(shí)例。它具有如下屬性和方法。

1.1.1 ?? 屬性

1.???????? id ????????? － 數(shù)字類型 只讀

樹節(jié)點(diǎn)的唯一標(biāo)識(shí)

2.???????? text ???????????? － 字符串

節(jié)點(diǎn)的顯示內(nèi)容

3.???????? action ?? － 字符串 ???

節(jié)點(diǎn)的動(dòng)作響應(yīng)，如 <a href=”action”>

4.???????? open????????????? － ? 布爾型 ?? 只讀

表示該節(jié)點(diǎn)是否為打開狀態(tài)還是合攏狀態(tài)，默認(rèn)情況下當(dāng)該節(jié)點(diǎn)下沒(méi)有子節(jié)點(diǎn)時(shí)返回 false

5.???????? icon??????? － ?? 字符串

指定當(dāng)前節(jié)點(diǎn)顯示的圖標(biāo)，如果不指定則使用默認(rèn)圖標(biāo)

6.???????? openIcon?????? － ?? 字符串

指定節(jié)點(diǎn)展開時(shí)的圖標(biāo)（當(dāng)有子節(jié)點(diǎn)時(shí)有效），不指定則使用默認(rèn)圖標(biāo)

7.???????? parentNode??? － 引用

指向父節(jié)點(diǎn)的引用

8.???????? childNodea???? － ?? 數(shù)組

包含該節(jié)點(diǎn)下的所有子節(jié)點(diǎn)

?

1.1.2 ?? 方法

1.???????? add(oNode, [bNodeIndent]) － ?? 返回 ??????

?

2.???????? indent()? － void

?

?

3.???????? toggle()? － void

?

4.???????? expand() － void

?

?

5.???????? collapse()?????? － void

?

6.???????? expandAll()?? － void

?

?

7.???????? collapseAll()? － void

?

8.???????? expandChildren() － void

?

?

9.???????? collapseChildren()?????? － void

?

10.???? getNextSibling()?? － ?? 返回 WebFXTreeItem 的引用

?

?

11.???? getPreviousSibling()??? － ?? 返回 WebFXTreeItem 的引用

?

12.???? toString()

?

?

1.2 ??? WebFXTree

WebFXTree 是樹控件的根實(shí)體類，繼承自 WebFXTreeAbstractNode

1.2.1 ?? 構(gòu)造方法

WebFXTree(text, action, behavior, icon, openIcon)

1.2.2 ?? 屬性

1.2.3 ?? 方法

1.3 ??? WebFXTreeItem

1.3.1 ?? 構(gòu)造方法

1.3.2 ?? 屬性

1.3.3 ?? 方法

2?????? 使用說(shuō)明

2.1 ??? 包含 js 文件

如： <script src=”xtree.js”></script>

2.2 ??? 創(chuàng)建根節(jié)點(diǎn)

var?? root = new WebFXTree(“Root”);

2.3 ??? 添加子節(jié)點(diǎn)

root.all(new WebFXTreeItem(“Item1”));

root.all(new WebFXTreeItem(“Item2”));

root.all(new WebFXTreeItem(“Item3”));

?

2.4 ??? 輸出

document.write(root);

3?????? 高級(jí)應(yīng)用

3.1 ??? 添加目錄

var?? root = new WebFXTree(“Root”);

root.all(new WebFXTreeItem(“1”));

var folder = new WebFXTreeItem(“2”);

root.add(folder);

foldr.all(new WebFXTreeItem(“2.1”));

folder.all(new WebFXTreeItem(“2.2”));

root.all(new WebFXTreeItem(“3”));

document.write(root);

3.2 ??? 定制行為

目錄樹的行為可以定制，通過(guò) setBehavior 方法可以設(shè)定目錄樹中只包含目錄，如

var?? root = new WebFXTree(“Root”);

root.setBehavior(‘explorer’);

:

:

略

3.3 ??? 定制圖標(biāo)

var?? root = new WebFXTree(“Root”);

root.all(new WebFXTreeItem(“1”));

var folder = new WebFXTreeItem(“2”);

root.add(folder);

var t21 = new WebFXTreeItem(“2.1”);

t21.icon=webFXTreeConfig.fileIcon;?? // 設(shè)置節(jié)點(diǎn) t21 的圖標(biāo)

foldr.all();

folder.all(new WebFXTreeItem(“2.2”));

root.all(new WebFXTreeItem(“3”));

document.write(root);

posted @ 2006-05-30 12:57 onlylife 閱讀(5389) | 評(píng)論 (0) | 編輯 收藏

javascript中使用showModalDialog的注意事項(xiàng)

在網(wǎng)頁(yè)上，我們一般使用window.showModalDialog(<url>,<標(biāo)題>,<屬性>)來(lái)彈出一個(gè)模態(tài)對(duì)話框。但是在模態(tài)對(duì)話框中的提交有時(shí)候是無(wú)效的，而且頁(yè)面跳轉(zhuǎn)的話不是在對(duì)話框中的。
??? 解決這個(gè)問(wèn)題的方法一般是在對(duì)話框中的頁(yè)面上添加一個(gè)<iframe>,由<iframe>來(lái)轉(zhuǎn)發(fā)真正的請(qǐng)求。為了增加頁(yè)面的可重用行，我們一般會(huì)增加一個(gè)portal頁(yè)，如下：

<% @?page?contentType = " text/html;?charset=gb2312 " ? %>
<% @?page?import = " you.RequestCacher " ? %>
<%
???? String ?requestUrl? = ? " /test/test.do " ;
???? String ?params? = ?RequestCacher.getParameters(request); // 獲取請(qǐng)求參數(shù)
???? String ?action? = ?requestUrl + " ? " + params;
%>

< table? width ="100%" ?height ="100%" ?border ="0" ?cellspacing ="0" >
???? < tr >
???????? < td >
???????????? < iframe? width ="100%" ?height ="100%" ?src ="<%=action%>" ></ iframe >
???????? </ td >
???? </ tr >
</ table >

posted @ 2006-05-16 11:36 onlylife 閱讀(1788) | 評(píng)論 (0) | 編輯 收藏

DWR使用注意事項(xiàng)

posted @ 2006-03-27 17:39 onlylife 閱讀(656) | 評(píng)論 (0) | 編輯 收藏

AJAX快速應(yīng)用體驗(yàn)

?????????AJAX作為一種創(chuàng)建全新的用戶體驗(yàn)技術(shù)組合，目前已有一些開源的實(shí)現(xiàn)，在經(jīng)過(guò)技術(shù)研究和試用以后，感覺(jué)Buffalo和DWR比較方面，能快速上手，兩者結(jié)合起來(lái)使用就更加靈活了。
??????再結(jié)合兩者使用時(shí)，建議使用DWR用作與服務(wù)器的交互，而將Buffalo提供的JavaScript對(duì)象用作回調(diào)函數(shù)處理DWR返回的結(jié)果。
??????關(guān)于Buffalo和DWR的使用，請(qǐng)參看作者其他文章。
?舉例如下，我要使兩各下拉框連動(dòng)，一個(gè)下拉框的內(nèi)容是省份，另一個(gè)的是城市，后臺(tái)獲取城市的類為Demo，獲取城市的方法為getCities(String)，則代碼如下：

< head >
< title >測(cè)試 </ title >
< link?href = " <%=styleSheet%> " ?rel = " stylesheet " ?type = " text/css " >
< script?src = " <%=webapp%>/common/scripts/validate.js " ></ script >
< script?language = " JavaScript " ?src = " <%=webapp%>/common/scripts/prototype.js " ></ script >
< script?language = " JavaScript " ?src = " <%=webapp%>/common/scripts/buffalo.js " ></ script >
< script?language = " JavaScript " ?src = " <%=webapp%>/common/scripts/template.js " ></ script >
< script?src = " <%=webapp%>/dwr/engine.js " ? ></ script >
< script?src = " <%=webapp%>/dwr/interface/Demo.js " ></ script >

< script? >
????function?changeCities(province)
???? {
????????Buffalo.Bind.bind( " city " ,?categories);
????}
????function?changeProvince(province)
???? {
????????Demo.getCities(province,changeCities);
????}
????
</ script >

</ head >
< body >
< form?name = " test " >
< table??width = " 95% " ?border = " 0 " ?align = " center " ?cellpadding = " 0 " ?cellspacing = " 0 " >
?? < tr? class = " list " >
?????? < td >
??????????省份：
?????? </ td >
?????? < td?width = " 70% " ?nowrap?? >
?????????? < select?name = " province " ?id = " provinde " ?onchange = " changeProvince(this.value) " >
??????????? < option?value = "" >- 請(qǐng)省份 -</ option >
??????????? < option? > 湖北 </ option > ???????
</ select >
???????? </ td >
????? </ tr >
????? < tr? >
???????? < td?width = " 30% " ?nowrap? >
???????????城市
???????? </ td >
???????? < td?width = " 70% " ?nowrap? >
???????????? < select?name = " city " ?id = " city " ></ select >
???????? </ td >
????? </ tr >
</ table >

</ html:form >

</ body >

posted @ 2006-03-22 13:11 onlylife 閱讀(718) | 評(píng)論 (0) | 編輯 收藏

DWR快速應(yīng)用

DWR是一個(gè)開源的AJAX應(yīng)用項(xiàng)目，其原理是自動(dòng)生成Java類對(duì)應(yīng)的JavaScript腳本，其快速應(yīng)用步驟為：

1、下載dwr.jar，地址為http://getahead.ltd.uk/dwr
2、將dwr.jar復(fù)制到web應(yīng)用的lib目錄下
3、修改web.xml，增加如下servlet配置段

< servlet >
?? < servlet - name > dwr - invoker </ servlet - name >
?? < display - name > DWR?Servlet </ display - name >
?? < servlet - class > uk.ltd.getahead.dwr.DWRServlet </ servlet - class >
?? < init - param >
????? < param - name > debug </ param - name >
????? < param - value > true </ param - value >
?? </ init - param >
</ servlet >

< servlet - mapping >
?? < servlet - name > dwr - invoker </ servlet - name >
?? < url - pattern >/ dwr /**/ /* </url-pattern>
</servlet-mapping>

?4、在web.xml同一目錄下創(chuàng)建dwr.xml，內(nèi)容如下

?1 <! DOCTYPE?dwr?PUBLIC
?2 ???? " -//GetAhead?Limited//DTD?Direct?Web?Remoting?1.0//EN "
?3 ???? " http://www.getahead.ltd.uk/dwr/dwr10.dtd " >
?4
?5 < dwr >
?6 ?? < allow >
?7 ???? < create?creator = " new " ?javascript = " JDate " >
?8 ?????? < param?name = " class " ?value = " java.util.Date " />
?9 ???? </ create >
10 ???? < create?creator = " new " ?javascript = " Demo " >
11 ?????? < param?name = " class " ?value = " your.java.Bean " />
12 ???? </ create >
13 ?? </ allow >
14 </ dwr >
15

1<script?type="text/javascript"?src="[WEBAPP]/dwr/interface/Demo.js">?</script><!--調(diào)用類-->
2<script?type="text/javascript"?src="[WEBAPP]/dwr/engine.js">?</script><!--DWR引擎-->
3

<script>
function?handleGetData(str)?
{
??alert(str);
}

Demo.getData(42,?handleGetData);//getData是Demo的一個(gè)方法，參數(shù)是整型，handleGetData是回調(diào)函數(shù)，處理getData的返回值
</script>

posted @ 2006-03-22 10:56 onlylife 閱讀(910) | 評(píng)論 (0) | 編輯 收藏