无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-09-05 23:22 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

jQuery队列控制方法详解queue,函数在IE6下的问题

在项目里面实现左的菜单折叠显示的效果,这个在软件界面里是常见的(本来到网上copy一段代码也就了事了,估计写的比我都好,但学习嘛,就要有学习的精神^^!),
我是用.animate()去实现隐藏展开的,代码如下:

先解释一下这组方法各自的含义.
queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能, 这个理解起来有点晕, 稍后, 后面会有点此查看DEMO.
dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数, 并执行它.
clearQueue([queueName]):这是1.4新增的方法. 清空对象上尚未执行的所有队列. 参数可选,默认为fx. 但个人觉得这个方法没多大用, 用queue()方法传入两个参数的第二种参数即可实现clearQueue方法.
现在, 我们要实现这样一个效果, 有标有1至7的数字方块, 要求这七个方块自左到右依次下落.点此查看DEMO
图片 1
css与html部分我就不贴出来了,DEMO演示中有. 若按常规做法, 可能需要用如下jQ代码来实现:

问题:当使用hide()方法和setvisible(false)方法去除items的中间(见过很多例子移除的都是尾部表单)表单后,原form验证无效
解决办法:使用remove(id)方法移除表单,可得到有效的form
原因:未知,希望大家补充
补充:下面是一个我遇到问题代码的简化版本,没有经过测试,大概意思是要是在form里想控制不显示表单,用remove()方法有效

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
<!--
.left {
width:100px;
height:500px;
background:#060;
float:left;
}
#butid {
width:10px;
height:500px;
background:#C00;
float: left;
}
.content {
width:500px;
height:500px;
background:#000;
float:left;
color: #FFF
}
-->
</style>
</head>
<body>
<script type="text/javascript" src="thirdparty/jquery/jquery.js"></script>
<script type="text/javascript">
$(function(){
var i = 1;//设置状态判断
$('#butid').click(function(){
if(i == 1){
$('.content').animate({left: '-=100px',width: '600px'}, "slow");
$('.left').animate({width: '0px'}, "slow");
i = 2;
}else{
$('.content').animate({left: '0px',width: '500px'}, "slow");
$('.left').animate({width: '100px'}, "slow");//fadeOut()
i = 1;
}
});
});
</script>
<div class="left">123</div>
<div id="butid"></div>
<div class="content">123</div>
</body>
</html>

$('.one').delay(500).animate({top:' =270px'},500,function(){
$('.two').delay(500).animate({top:' =270px'},500,function(){
$('.three').delay(500).animate({top:' =270px'},500,function(){
$('.four').delay(500).animate({top:' =270px'},500,function(){
$('.five').delay(500).animate({top:' =270px'},500,function(){
$('.six').delay(500).animate({top:' =270px'},500,function(){
$('.seven').animate({top:' =270px'},500,function(){
alert('按序落体运动结束! Yeah!')
});
});
});
});
});
});
});

new Ext.form.FormPanel({
id : 'ReportForm',items : [{
{id:"001"},
{id:"002"},
{id:"003"},
{id:"004"},
{id:"005"}
}]
});

如果这样子的话,在FF,IE7-8,chrome下执行是正常的。可是IE6下无法隐藏left,原因是因为ie6默认内容高宽度超出时,DIV会自动撑开。所以只要给.left{}加个overflow:hidden,问题也就解决~~
PS:本来早上是写个函数把.left里面的内容隐藏掉的,在写博文的时候突然想通了这个原理,还以为是.animate()在IE6下有BUG

嗯, 没错, 效果很完美的呈现给出来了, 但这种晕眩的代码, 你能忍受吗? 即便可以忍受, 如果此时, 你想调换一个某个的执行顺序, 比如, 你想让5落下后再开始下落3, 或者新加8至15八个方块, 怎么办? 重写吗? 在里面小心冀冀的改吗? 显然, 我们需要另外一种列简明便捷的方法来实现这个效果, 那就是jQuery队列控制方法.请看如下代码:

//Ext.getCmp("ReportForm").getForm().isValid()验证无效
if(isTQ == 0){
Ext.getCmp("003").hide();
}

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:jQuery队列控制方法详解queue,函数在IE6下的问题

关键词: