ZK5 and jQuery

在ZK5.0版本，可以结合jQuery使用，来实现一些客户端的效果。


声明客户端的命名空间

<zk xmlns:w="http://www.zkoss.org/2005/zk/client">

 

声明命名空间后，这些事件将在客户端执行而不是在服务端。


定义客户端的事件

定义一个客户端事件最简便的方法就是利用namespace和attribute 标签来包含js代码

<attribute w:name="onClick">
	//javascript code goes here
</attribute>

 

完整的页面代码

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
	<script src="/scripts/tools.expose-1.0.3.js" />
	<script>
	function exposeLogin (widget) {		
		jq(widget).expose({
			// when exposing is done, 改变表单背景颜色 
			onLoad: function() { 
				jq(widget.$n('cave')).css({backgroundColor: '#c7f8ff'});		
			}, 
		 
			// when "unexposed", 返回原来的背景颜色
			onClose: function() { 
				jq(widget.$n('cave')).css({backgroundColor: ""});
			}, 
		 
			api: true 
		}).load();
	}
	</script>
	
	<label value="Try clicking on the username or password textboxes please!" />
	<window id="login_window" title="Login" border="normal" width="400px" height="100px">
		<attribute w:name="onClick">
			exposeLogin(this);
		</attribute>
		用户名
		<textbox id="txtUsername" width="96%" />
		密码
		<textbox id="txtPassword" type="password" width="96%" />
	</window>
</zk>