6.2 教程:登录滑块

在本教程中,将通过创建一个常用的用户界面元素来练习使用jQuery效果:通过单击鼠标而滑入或滑出视线的一个面板(如图6-2所示)。

图 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