BlogJava-糊言乱语-随笔分类-Html UIhttp://www.blogjava.net/coolingverse/category/27170.html志未半斤, 才无八两. 有苦有乐, 糊涂过活。zh-cnWed, 07 Nov 2007 20:42:37 GMTWed, 07 Nov 2007 20:42:37 GMT60TreeView 树形控件(JS)http://www.blogjava.net/coolingverse/archive/2007/11/07/158891.htmlStanley SunStanley SunWed, 07 Nov 2007 09:59:00 GMThttp://www.blogjava.net/coolingverse/archive/2007/11/07/158891.htmlhttp://www.blogjava.net/coolingverse/comments/158891.htmlhttp://www.blogjava.net/coolingverse/archive/2007/11/07/158891.html#Feedback0http://www.blogjava.net/coolingverse/comments/commentRss/158891.htmlhttp://www.blogjava.net/coolingverse/services/trackbacks/158891.html 

treeview 

在开发B/S程序时，我们经常会使用到一些页面级的效果控件。比如：树形目录，ComboBox和一些其他的控件，由于这些控件的存在使得我们的程序异常的夺目。但是在开发这些控件的时候或多或少的都会比较麻烦。而大部分的程序员是使用发布的一些开源的JS控件来减轻工作量而且也使得自己的程序健壮。下面我介绍一个在开源社区中赫赫有名的树形控件：TreeView。

首先介绍一下TreeView，TreeView原名是FolderTree，是一款比较早就出世的树形JS控件，当时是由个人开发的，之后由公司购买了。但是现在还可以免费使用。

TreeView 有两个JS文件和一些资源文件组成。两个JS文件分别是：主要实现功能的ftiens4.js和实现多浏览器支持的ua.js文件。只有我们在开发的页面中加入如上两个文件的话就可以开发如上图所显示的树形目录了。代码如下：

<html>

<head>

<script type="text/javascript" src="../treeview/ftiens4.js" ></script>

<script type="text/javascript" src="../treeview/ua.js" ></script>

<script type="text/javascript">

//TreeView 环境变量

BUILDALL = 0 //创建所有的节点对象 0:延时创建 1:立即创建
GLOBALTARGET = 'R' //节点触发时的目标 'B':打开新窗口 'R':右边的Frame 'S':当前Frame 'T':当前浏览器窗口
HIGHLIGHT = 0 //高亮显示当前选中的节点 0:不高亮显示 1:高亮显示
HIGHLIGHT_BG = 'blue' //高亮显示的背景颜色
HIGHLIGHT_COLOR = 'white' //高亮显示的颜色
ICONPATH = '' //指定节点的显示图标，使用URL方式，而且必须用"/"结尾 如:http://www.x.com/y/
PRESERVESTATE = 0 //保存TreeView的状态到Cookie中，当再次显示的时候会自动的回置状态 0:不保存 1:保存
STARTALLOPEN = 0 //默认打开所有节点 0:只打开根节点 1:打开所以节点
USEFRAMES = 1 //页面是否使用了Frame,注意：如果未使用Frame一定要设置此参数 0:未使用 1:使用了
USEICONS = 1 //是否使用图标 0:不显示图标 1:显示图标
USETEXTLINKS = 0 //节点文字是否为链接 0:否 1:是
WRAPTEXT = 0 //节点显示超出一行时是否折行 0:不折行 1:折行

foldersTree = gFld("test", "") //创建一个名为"test"的根节点
foldersTree.treeID = "t1" //设置test节点的唯一编号为"t1"


aux1 = insFld(foldersTree, gFld("Day of the week", "b.html")) //在根节点中加入一个名为"Day of the week"的子节点,当点击的时候打开b.html
aux1.addChildren([["1","1.html"],["2","2.html"],["3","3.html"],["4","4.html"],["5","5.html"]])  //在aux1节点中连续加入1,2,3,4,5节点，并相应的打开1.html,2.html,3.html,4.html,5.html.

aux2 = insFld(foldersTree, gLnk("R","Day of the week2", "b.html")) //在根节点中加入名为"Day of the week2"的节点，当点击的时候在右侧的frame中打开b.html
aux3 = insDoc(foldersTree, gLnk("R","<input type=\"checkbox\">Day of the week3", "c.html")) //在根节点中加入名为"Day of the week3"并带有复选框的节点，当点击的时候在右侧的frame中打开c.html

</script>

</head>

<body>

<A style="font-size:7pt;text-decoration:none;color:silver" href="http://www.treemenu.net/" target=_blank>Javascript Tree Menu</A>

<script type="text/javascript">

       initializeDocument();//构造TreeView

</script>

</body>

</html>

TreeView中主要的方法:

gFld(Title, Link);//创建节点 例：gFld("Test A", "javascript:parent.op()")

Argument

Title
Specifies the text that appears in the folder name. This text can include simple HTML tags, such as enclosing formatting tags (i, b, div, and so on). It can even include an img tag if you want to place a small icon in the node name, such as a "new!" icon for example.

Link
Specifies an optional URL. The URL can be a simple file name like demoFramesetRightFrame.html or a string with protocol, domain, path, and file name like http://www.treeview.net/treemenu/demopics/beenthere_europe.gif.

 

gLnk(Target, Title, Link);//创建一个带有链接的节点 例：gLnk("B", "My File", http://www.mysite.com/MyFile.doc)

Argument

Target
Configures the target location for the link. Specify one of the following values:
"R": Open the document in the right frame (a frame named basefrm)
"B": Open the document in a new window
"T": Open the document in the current browser window, replacing the frameset if one exists
"S": Open the document in the current frame, replacing the tree
Note: This argument is case sensitive; make sure to use uppercase letters.

Title
Specifies the text that appears in the link. This text can include simple HTML tags, such as enclosing formatting tags (i, b, div, and so on). It can even include an img tag if you want to place a small icon in the node name, such as a "new!" icon for example.

Link
Specifies the URL of the document. This can be an absolute URL or a relative URL. Do not enter any other information in this string; adding a target parameter or an event handler will not work.

 

insFld(Parent Folder, Child Folder); //在父节点中插入一个子节点 例：aux1 = insFld(foldersTree, gFld("Europe", "http..."))

Argument

Parent Folder
Specifies the parent folder. That is, this argument specifies the folder node in which you want to place the other folder node.

Child Folder
Specifies the child folder. That is, this argument specifies the folder node that you want to place under the parent folder node.

 

insDoc(Parent Folder, Document Node); //在节点中加入一个Dom对象 例：insDoc(aux2, gLnk("S", "Boston", "..."))

Argument

Parent Folder
Specifies the parent folder. That is, this argument specifies the folder node in which you want to place the document node.

Document Node
Specifies the document node. That is, this argument specifies the document node that you want to place in the parent folder node

 

更多的参考信息到 http://www.treeview.net/tv/instructions.asp



Stanley Sun 2007-11-07 17:59 发表评论
]]>AutoSuggest 使用手册http://www.blogjava.net/coolingverse/archive/2007/10/19/154307.htmlStanley SunStanley SunFri, 19 Oct 2007 10:17:00 GMThttp://www.blogjava.net/coolingverse/archive/2007/10/19/154307.htmlhttp://www.blogjava.net/coolingverse/comments/154307.htmlhttp://www.blogjava.net/coolingverse/archive/2007/10/19/154307.html#Feedback0http://www.blogjava.net/coolingverse/comments/commentRss/154307.htmlhttp://www.blogjava.net/coolingverse/services/trackbacks/154307.html



        AutoSuggest是通过AJAX技术实现的一种类似于ComboBox之类的输入框，当输入一些提示字符后，AS会自动的把输入框中的Value通过AJAX发送到Server中，Server自定义的解析发送的数据，然后把返回数据通过XML或JSON方式返回到AS中。AS再根据Server返回的标准格式的数据构建出提示候选框，当用鼠标或键盘选中候选项后填充到输入框中。在写这篇手册的时候，AutoSuggest的最新版本是autosuggest_v2.1.3。基本的运行原理如上。

AutoSuggest的主要的物理文件有：bsn.AutoSuggest_2.1.3.js、autosuggest_inquisitor.css。其他的还有一些图片资源文件，一个测试html与一个test.php的服务器段页面。结构如下：
    

│ .DS_Store

│ ._.DS_Store

│ ._bsn.AutoSuggest_2.1.3.html

│ ._test.php

│ bsn.AutoSuggest_2.1.3.html

│ test.php

│

├─css

│ │ .DS_Store

│ │ ._.DS_Store

│ │ autosuggest_inquisitor.css

│ │

│ └─img_inquisitor

│      │ .DS_Store

│      │ ._.DS_Store

│      │ ._as_pointer.gif

│      │ ._hl_corner_bl.gif

│      │ ._hl_corner_br.gif

│      │ ._hl_corner_tl.gif

│      │ ._hl_corner_tr.gif

│      │ ._ul_corner_bl.gif

│      │ ._ul_corner_br.gif

│      │ ._ul_corner_tl.gif

│      │ ._ul_corner_tr.gif

│      │ as_pointer.gif

│      │ hl_corner_bl.gif

│      │ hl_corner_br.gif

│      │ hl_corner_tl.gif

│      │ hl_corner_tr.gif

│      │ ul_corner_bl.gif

│      │ ul_corner_br.gif

│      │ ul_corner_tl.gif

│      │ ul_corner_tr.gif

│      │

│      └─_source

│              .DS_Store

│              ._.DS_Store

│              ._as_pointer.png

│              ._li_corner.png

│              ._ul_corner.png

│              as_pointer.png

│              li_corner.png

│              ul_corner.png

│

└─js

       .DS_Store

       ._.DS_Store

       ._bsn.AutoSuggest_2.1.3.js

       bsn.AutoSuggest_2.1.3.js

       bsn.AutoSuggest_2.1.3_comp.js


AutoSuggest是一组JavaScript类库，其中主要的对象就是bsn.AutoSggest对象，基本的功能都是在这个对象中完成的。首先我们构建一个简单的示例：
    

var options_xml = {

                                script:function(input){return"suggestAction!userName.action?signer="+input; }, //(1).带有传送数据的请求路径，其中input是输入框的value。

                                varname:"input", //(2).储存输入框value的变量名

                                delay:800, //(3).发送请求的延时时间

                                cache:false, //(4).是否缓存

                                noresults:"无符合的记录！",//(5).当没有符合的查询结果时的提示信息

                                timeout:10000,//(6).候选框停留时间

                                callback: function(record){ document.getElementById("temp").value = record.value; } //(7).选择候选项后的回调函数

};

var as_xml = new bsn.AutoSuggest('signer', options_xml); //(8).创建autosuggest对象，并绑定一个输入框




通过这样简单的方式我们就可以完成在页面中的autosuggest编码了。其中的参数表可以看下表：

Property

Type

Default

Description

script

String / Function

-

REQUIRED!
Either: A string containing the path to the script that returns the results in XML format. (eg, "myscript.php?")
Or: A function that accepts on attribute, the autosuggest field input as a string, and returns the path to the result script.

varname

String

"input"

Name of variable passed to script holding current input.

minchars

Integer

1

Length of input required before AutoSuggest is triggered.

className

String

"autosuggest"

Value of the class name attribute added to the generated ul.

delay

Integer

500

Number of milliseconds before an AutoSuggest AJAX request is fired.

timeout

Integer

2500

Number of milliseconds before an AutoSuggest list closes itself.

cache

Boolean

true

Whether or not a results list should be cached during typing.

offsety

Integer

-5

Vertical pixel offset from the text field.

shownoresults

Boolean

true

Whether to display a message when no results are returned.

noresults

String

No results!

No results message.

callback

Function

A function taking one argument: an object

{id:"1", value:"Foobar", info:"Cheshire"}

json

Boolean

false

Whether or not a results are returned in JSON format. If not, script assumes results are in XML.

maxentries

Integer

25

The maximum number of entries being returned by the script. (Should correspond to the LIMIT clause in the SQL query.)

之后我们只要在我的服务器中解析传入的signer参数返回，如下格式的xml就可以了。当然也可以用JSON方式，不过我在这里就不在演示了。
    

<results>

                                <rs id="1" info="">Foobar</rs>

                                <rs id="2" info="">Foobarfly</rs>

                                <rs id="3" info="">Foobarnacle</rs>

</results>


AutoSuggest是比较方便的一种实现类Google Suggest的解决方式，提供的js文件也是比较精巧的，并提供的一个压缩后的js脚本文件只有8.33 KB大小。如果要查看其代码可以找到一个没有压缩的原始版本的源代码，其中的代码也是比较容易阅读，更改起来也是比较简单的。我会在以后写一篇《AutoSuggest代码解析》。

更多信息可查阅 http://www.brandspankingnew.net/archive/2007/02/ajax_auto_suggest_v2.html



Stanley Sun 2007-10-19 18:17 发表评论
]]>