ZK5 and jQuery 2

ZK 的label组件有setValue方法，如果当它的值发生变化的时候在客户实现一些特殊的效果，我们必须在客户端覆盖setValue操作。

<label id="stockPrice1" value="100" w:setValue="updateWithExplosion"/>

 

覆盖setValue()方法

function NAME (value, fromServer) {
 
        this.$setValue(value, fromServer);
 
	if (this.desktop) {	
		jq(this).WHATEVER_EFFECT
	}
}

 

完整的页面代码

<?page title="Auto Generated index.zul"?>
<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
	<!-- CLIENT SIDE FUNCTIONALITY!	-->
	<?script src="jquery-ui-1.7.2.custom.min.js"?>
	<script>
		<![CDATA[
			function updateWithExplosion (value, fromServer, updateColor) {
				if(this.desktop) {
					jq(this).effect("explode", 
							{}, 
							500);
				}
				this.$setValue(value, fromServer);
				if (this.desktop) {	
					if (updateColor) {
						jq(this.getCaveNode().parentNode.parentNode).css({background: ((value<0) ? 'red':'green')});
						this.setStyle('color: #FFFFFF');
					}
					jq(this).show("drop", {direction : "up"}, 1000);
				}
			}
			function updateWithColorAndExplosion (value, fromServer) {
				updateWithExplosion.call(this, value, fromServer, true);
			}
		]]>
	</script>
	<!-- SERVER SIDE FUNCTIONALITY! -->
	<zscript>
		<![CDATA[
			public void updateStocks() {
				Object[] values = getStockValues();
				Label stockPrice = stockGrid.getFellow(values[0]);
				Label stockDifference = stockGrid.getFellow(values[1]);

				int newValue = ((Number)values[2]).intValue();
				int difference = newValue - Integer.parseInt(stockPrice.getValue());				

				stockPrice.setValue(Long.toString(newValue));
				stockDifference.setValue(Long.toString(difference));
			}
			
			public Object[] getStockValues() {
				int randomControl = (int)Math.ceil(Math.random() * 3);
				return new Object[] {"stockPrice" + randomControl,
					"stockDifference" + randomControl,
					(int)Math.ceil((Math.random() * 10) + 95)};
			}
		]]>
	</zscript>
	<!-- ZUL MARKUP (UI IMPLEMENTATION!) -->
	<timer id="updateTimer" delay="3000" repeats="true" onTimer="updateStocks()" />
	<grid id="stockGrid" fixedLayout="true">
		<columns>
			<column label="股票名称" />
			<column label="股票价格" />
			<column label="股票变化" />
		</columns>
		<rows>
			<row>
				<label id="stockName1" value="Ultra Corp: " />
				<label id="stockPrice1" value="100" w:setValue="updateWithExplosion"/>
				<label id="stockDifference1" value="0"  w:setValue="updateWithColorAndExplosion"/>
			</row>
			<row>
				<label id="stockName2" value="Amazing Corp: " />
				<label id="stockPrice2" value="100" w:setValue="updateWithExplosion"/>
				<label id="stockDifference2" value="0" w:setValue="updateWithColorAndExplosion"/>
			</row>
			<row>
				<label id="stockName3" value="Great Corp: " />
				<label id="stockPrice3" value="100" w:setValue="updateWithExplosion"/>
				<label id="stockDifference3" value="0" w:setValue="updateWithColorAndExplosion"/>
			</row>
		</rows>
	</grid>
</zk>