在本教程中,将通过创建一个常用的用户界面元素来练习使用jQuery效果:通过单击鼠标而滑入或滑出视线的一个面板(如图6-2所示)。
这个基本的任务相当简单:
1.选择带有“Login”消息的段落。
记住,很多jQuery编程首先是从选择页面上的一个元素开始的。在这个例子中,“Login”段落将会接收访问者的单击。
2.给该段落添加一个click事件。
没有事件,JavaScript就没有交互性。访问者需要和选取的元素(Login段落)交互,以便做些事情。
3.打开和关闭表单的显示。
前面的两个步骤只是回顾(但确实需要这么多的jQuery编程)。最后一个步骤才会用到我们所学习的效果。我们可以让表单立即显示(show()函数)、滑入视线(slideDown()函数)或淡入视线(fadeIn()函数)。
注意:参见本书1.3节了解如何下载教程文件。
编程步骤
1.在文本编辑器中打开chapter06目录下的signup.html文件。
这个文件已经包含了到jQuery文件的一个链接,并且$(document).ready()函数(参见5.4节)也有了。首先,选择带有“Login”文本的段落。
2.单击$(document).ready()函数后面的空行,然后输入$('#open')。
“Login”文本位于带有ID为open的一个段落标签中:<p id=“open”>Login,因此,刚才所输入的代码将会选择该元素。现在该要添加事件处理程序了。</p>
3.添加如下的粗体代码,使得脚本如下所示:
$(document).ready(function(){
$('#open').click(function(){
});//end click
});//end ready
这段代码添加了一个click处理程序,以便每次访问者单击该段落的时候,都会发生些事情。在这个例子中,当第一次单击的时候,表单会出现;再次单击的时候,表单会消失;下一次单击的时候,表单又会出现,以此类推。换句话说,表单在可见和不可见之间切换。jQuery提供了3个函数来实现这一目的:toggle()、fadeToggle()和slideToggle()。其差别只是在于效果如何显现。
4.在click函数中的空行上单击,并且录入:
$('#login form').slideToggle(300);
这段代码选择了登录表单,然后,如果它当前不可见,将其滑入视线;并且如果它当前可见,将其滑出视线。最后,将修改段落的class,以便可以使用一个CSS类样式来修改“Login”的外观。
5.添加如下粗体所示的代码,以使得最终的脚本如下所示:
1$(document).ready(function(){
2$('#open').click(function(){
3$('#login form').slideToggle(300);
4$(this).toggleClass('close');
5});//end click
6});//end ready
4.10.2节曾介绍过,在一个事件处理程序中,可以使用$(this)来引用要响应该事件的元素。在这个例子中,$(this)引用访问者在其上单击的段落——在第2行的$('#open')之上。toggleClass()函数直接给一个元素添加一个class,或者从该元素删除一个class。和其他的toggle函数一样,如果没有这个特定的class, toggleClass()会添加它;如果有,toggleClass()会删除它。在这个例子中,在页面的样式表中有一个class样式:.close(查看文件的<head>,可以看到该样式以及它做些什么)。
6.保存该页面并在Web浏览器中预览。
确保单击“Login”段落几次,以了解它是如何工作的。在chapter06文件夹下,可以找到本教程完成后的版本complete_signup.html。用toggle()或fadeToggle()来替代slideToggle(),尝试一下其他的切换效果。
但是,如果我们想要用两种不同的效果,该怎么办呢?一种是针对表单的显示,例如,让其从底部向上滑入视线;另一种效果是令其消失,例如,淡出视线。步骤5中的代码显然是不行的,因为click()函数并不允许选择两种不同的操作。然而,5.4.3节介绍过,jQuery提供了一种特殊的事件:toggle()事件,可以用来处理这种情况。不要和toggle()效果搞混淆了,该效果是让一个元素出现或消失的;toggle()事件允许在奇数次和偶数次单击之间切换运行不同的代码。因此,第一次单击的时候,表单出现;第二次单击的时候,表单消失。
要让表单滑入视线,然后在再次单击的时候淡出视线,可以使用如下的代码:
$(document).ready(function(){
$('#open').toggle(
function(){
$('#login form').slideDown(300);
$(this).addClass('close');
},
function(){
$('#login form').fadeOut(600);
$(this).removeClass('close');
}
);//end toggle
});//end ready