ZK使用JQuery实现动态效果

最新推荐文章于 2023-08-12 10:47:33 发布

最新推荐文章于 2023-08-12 10:47:33 发布 · 395 阅读

文章标签：

#zk #jQuery #JavaScript #XHTML #XML #ViewUI

ZK 专栏收录该内容

13 篇文章

订阅专栏

本文探讨了在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的滑动效果

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