只爱一次

不留遗憾

2006年5月30日 #

Javascript 目录树使用简介

XTree 树控件使用手册

1       API 说明

1.1     WebFXTreeAbstractNode

树控件的抽象基类,不需要创建实例。它具有如下属性和方法。

1.1.1    属性

1.         id           数字类型 只读

树节点的唯一标识

2.         text              字符串

节点的显示内容

3.         action    字符串    

节点的动作响应,如 <a href=”action”>

4.         open                布尔型    只读

表示该节点是否为打开状态还是合拢状态,默认情况下当该节点下没有子节点时返回 false

5.         icon           字符串

指定当前节点显示的图标,如果不指定则使用默认图标

6.         openIcon          字符串

指定节点展开时的图标(当有子节点时有效),不指定则使用默认图标

7.         parentNode    引用

指向父节点的引用

8.         childNodea        数组

包含该节点下的所有子节点

 

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 是树控件的根实体类,继承自 WebFXTreeAbstractNode

1.2.1    构造方法

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

1.2.2    属性

1.2.3    方法

1.3     WebFXTreeItem

1.3.1    构造方法

1.3.2    属性

1.3.3    方法

2       使用说明

2.1     包含 js 文件

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

2.2     创建根节点

var   root = new WebFXTree(“Root”);

2.3     添加子节点

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

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

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

 

2.4     输出

document.write(root);

3       高级应用

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     定制行为

目录树的行为可以定制,通过 setBehavior 方法可以设定目录树中只包含目录,如

var   root = new WebFXTree(“Root”);

root.setBehavior(‘explorer’);

:

:

3.3     定制图标

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;   // 设置节点 t21 的图标

foldr.all();

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

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

document.write(root);

posted @ 2006-05-30 12:57 onlylife 阅读(5384) | 评论 (0)编辑 收藏

2006年5月16日 #

javascript中使用showModalDialog的注意事项

在网页上,我们一般使用window.showModalDialog(<url>,<标题>,<属性>)来弹出一个模态对话框。但是在模态对话框中的提交有时候是无效的,而且页面跳转的话不是在对话框中的。
    解决这个问题的方法一般是在对话框中的页面上添加一个<iframe>,由<iframe>来转发真正的请求。为了增加页面的可重用行,我们一般会增加一个portal页,如下:

<% @ page contentType = " text/html; charset=gb2312 "   %>
<% @ page import = " you.RequestCacher "   %>
<%
    
String  requestUrl  =   " /test/test.do " ;
    
String  params  =  RequestCacher.getParameters(request); // 获取请求参数
    
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 >
  
   下面说明一下如上代码。一般我们可能会在弹出对话框时使用这样的方式:window.showModalDialog("/test/test.do",“测试”,"dialogWidth:500px;dialogheight:650px"),如果这样的话,test.do跳转的页面如果继续有请求的话,服务器可能服务收到请求(可能是session的问题),还有请求后的跳转页面不会出现在对话框中。

posted @ 2006-05-16 11:36 onlylife 阅读(1754) | 评论 (0)编辑 收藏

2006年3月27日 #

DWR使用注意事项

待填

posted @ 2006-03-27 17:39 onlylife 阅读(652) | 评论 (0)编辑 收藏

2006年3月22日 #

AJAX快速应用体验

         AJAX作为一种创建全新的用户体验技术组合,目前已有一些开源的实现,在经过技术研究和试用以后,感觉Buffalo和DWR比较方面,能快速上手,两者结合起来使用就更加灵活了。
      再结合两者使用时,建议使用DWR用作与服务器的交互,而将Buffalo提供的JavaScript对象用作回调函数处理DWR返回的结果。
      关于Buffalo和DWR的使用,请参看作者其他文章。
 举例如下,我要使两各下拉框连动,一个下拉框的内容是省份,另一个的是城市,后台获取城市的类为Demo,获取城市的方法为getCities(String),则代码如下:

< head >
< title >测试 </ 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 = "" >- 请省份 -</ 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 阅读(711) | 评论 (0)编辑 收藏

DWR快速应用

DWR是一个开源的AJAX应用项目,其原理是自动生成Java类对应的JavaScript脚本,其快速应用步骤为:

1、下载dwr.jar,地址为http://getahead.ltd.uk/dwr
2、将dwr.jar复制到web应用的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同一目录下创建dwr.xml,内容如下

 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

5、在页面中增加script片断,如:
1<script type="text/javascript" src="[WEBAPP]/dwr/interface/Demo.js"> </script><!--调用类-->
2<script type="text/javascript" src="[WEBAPP]/dwr/engine.js"> </script><!--DWR引擎-->
3

6、在需要调用Demo功能的地方编写脚本
<script>
function handleGetData(str) 
{
  alert(str);
}


Demo.getData(
42, handleGetData);//getData是Demo的一个方法,参数是整型,handleGetData是回调函数,处理getData的返回值
</script>

posted @ 2006-03-22 10:56 onlylife 阅读(902) | 评论 (0)编辑 收藏

仅列出标题