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，搞定！