只爱一次

不留遗憾

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 阅读(5428) | 评论 (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 阅读(1850) | 评论 (0) | 编辑 收藏

2006年3月27日 #

DWR使用注意事项

待填

posted @ 2006-03-27 17:39 onlylife 阅读(687) | 评论 (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 阅读(760) | 评论 (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 阅读(961) | 评论 (0) | 编辑 收藏

仅列出标题