ZK使用JQuery实现动态效果

 

<?xml version="1.0" encoding="utf-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./deptWin"?>
<window id="deptWin" width="100%" 
        xmlns:h="http://www.w3.org/1999/xhtml"
	xmlns:n="http://www.zkoss.org/2005/zk/native" xmlns="http://www.zkoss.org/2005/zul"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd"
	xmlns:w="http://www.zkoss.org/2005/zk/client">

	<script type="text/javascript">
			var timeoutHandler = false;
			
			function hideTip(){
				if(timeoutHandler){
					clearTimeout(timeoutHandler);
				}
				jq("$searchTip").slideUp("fast");
			}
			function searchDept(){
				jq("$searchTip").slideDown("fast",function(){
					timeoutHandler=setTimeout(hideTip,4000);
				});
			}
			function	exchangeDeptEdit(){
				jq("$gpDeptList").slideUp("fast",function(){
					jq("$gpDeptEdit").slideDown("fast");
				});
			}
			function exchangeDeptList(){
				jq("$gpDeptEdit").slideUp("fast",function(){
					jq("$gpDeptList").slideDown("fast");
				});
			}

</window>

 

 

ZK 5的客户端引擎 是基于 JQuery .而在ZK中 jquery 的选择器$ ("#id")被jq("$id")代替了，

       slideUp(),slideDown()方法是JQuery 滑动的效果,通过高度变化来动态地显示或隐藏所有匹配的元素，在显示或隐藏完成后可选地触发一个回调函数。这个回调函数就是function(){}匿名函数.

        这里我遇到个问题,其实有两种写法可以实现不同的效果 。如：

       function   exchangeDeptList(){

  jq("$gpABC").slideUp("fast");

  jq("$gpEFG").slideDown("fast");

}

 

 

   function exchangeDeptList(){

   jq("$gpDeptEdit").slideUp("fast",function(){ jq("$gpDeptList").slideDown("fast");     }); }

 

 以上的两个函数有什么区别,在Javascript 中是按顺序执行的,

         slideUp()我们将它使用TimeOut()计时器,动态的改变了组件的高度来实现jQuery的滑动效果

       在第一种方法中在第一行代码执行的还未结束的时候,就会执行下面的代码行, 产生的效果会同时滑动切换两个组件.

       而在第二种方法第二行的代码将会在第一行响应结果完毕后才执行,.产生的效果就是两个组件按顺序切换.