tapestry autocomplete 更改样式及定位

版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://blog.csdn.net/sbfivwsll/archive/2009/07/09/4335678.aspxor http://xiaoyou.qq.com/index.php?mod=blog&act=show&u=c265e4bd629300c5bed7ab2128db58373148b98065afd40d&blogid=1247124579

tapestry 中带有autoComplete功能。使用过他的人可能都会发现，其样式很难看。定位方法使用的是绝对定位(页面没有浏览器宽时，改变浏览器的大小，其位置也随之改变)，经过多次研究，现把更改
方式与定位总结如下：

定位：使用两个div嵌套text，使其“相对”定位。

<t:form> <!--把与这个text相同行的都放到这两个div里边包起来。给定一个宽带，以便于定位。white-space:nowarp-与其放在同一行的组件不换行。height:25px;如果不设置这个置的话，这个div下边的组件会 往上跑。左对齐：如果不设置的话，在IE浏览器中文本框的位置会在右边。position:relative如果不设置成这个值的话，IE中定位方式会改变。--> <DIV STYLE="WIDTH: 210px; white-space: nowrap; height: 25px; text-align: left; position: relative;"> <div style="position: absolute;" mce_style="position: absolute;"> <!--让出来的自动完成框相对于本div对齐。--> <t:textfield t:id="name" t:mixins="autocomplete" /> <input type="submit" value="提交"> </div> </DIV> <!---其它DOM组件。--> </t:form>
样式：覆盖如下样式即可(其生成的自动完成div的形式：<div><ul><li></li><li></li></ul></div>)：
DIV.t-autocomplete-menu UL { /*边框*/ BORDER-RIGHT: #cc9933 2px outset; BORDER-TOP: #cc9933 2px outset; BORDER-LEFT: #cc9933 2px outset; BORDER-BOTTOM: #cc9933 2px outset; /*空白*/ PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; /*超出部分*/ OVERFLOW: auto; /*背景*/ BACKGROUND-COLOR: #cc9933 } DIV.t-autocomplete-menu LI { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; MARGIN: 0px; CURSOR: pointer; COLOR: white; BORDER-BOTTOM: black 1px solid; LIST-STYLE-TYPE: none } /*选中样式*/ DIV.t-autocomplete-menu LI.selected { FONT-WEIGHT: bold; COLOR: black }

附：更改让tapestry的autoComplete组件生成的连接地址为绝对路径的方法：

1、打开tapestry框架的类AutoComplete组件的源代码：org.apache.tapestry5.corelib.mixins.Autocomplete(注：tapestry 5.1以下版本包名可能有点差异)

2、在我们自己的工程目录的源代码(eclipse等开发工具源代码位于src目录中)目录中创建同包-org.apache.tapestry5.corelib.mixins

3、把tapestry5框架的AutoComplete框架的源代码复制到创建的包中。

4、将属性申明“private Request request;”改为“private HttpServletRequest request;”

5、找到代码“renderSupport.addInit("autocompleter", new JSONArray(id, menuId, link.toAbsoluteURI(), config));”更改为：“renderSupport.addInit("autocompleter", new JSONArray(id, menuId, String .format("%s://%s:%s:%s", request.getScheme(), request.getServerName(), request.getServerPort(), link.toAbsoluteURI()), config));”

6、编译源代码，重新启动tomcat，搞定！