jQuery笔记之三事件和动画—仿登陆效果

这是 jQuery 笔记的第三篇,主要叙述的是 jQuery 中的事件和动画部分。熟悉 jQuery 的童鞋会发现,本博的新主题自用新主题Especial Line beta 0.5测试,在页脚,导航,侧边栏等都使用了 jQuery 事件和动画。不过在这篇笔记中,将会以更为常用的 WordPress 例子—— WordPress 仿登陆效果,作为叙述例子。所以这篇笔记同时也是 WordPress 教程!

 

首先简单说一说仿登陆的具体操作,用户第一次登陆时会出现用于填写评论者资料的框,当用户评论完成后,将会以 cookie 的方式记录评论者资料,一年后 cookie 自动清除,当用户再次评论时填写评论者资料的 div 将会隐藏,当用户点击“ Change ”时可以再次编辑评论者资料,同时 Change 字样会改为“ Finish ” ,点击 Finish 时填写评论者资料的 div 将会再次隐藏,同时 Change 字样将会改为 Change Again 。

 

以下是分步叙述如何使用 jQuery 实现以上效果,如果只想实现效果的童鞋可以直接看代码。

 

1.加载 jQuery 库,这是必须的。

2.把 comments.php 的评论者资料框代码和评论框代码按如下修改:

<?php if(isset($_COOKIE['comment_author_email_'.COOKIEHASH]) && isset($_COOKIE['comment_author_'.COOKIEHASH]))  : ?>
    <div class="commentwelcome">
    <?php printf(__('欢迎发表评论! <strong>%1s</strong> '), $comment_author); ?><a id="edit_profile" title="重新填写资料" href="javascript:void(0);"><span>Change</span></a>
    </div>
<?php endif; ?>

<div class="<?php echo $comment_author_email ? 'hidden' : 'profile'; ?>">           
     <!-- 评论者资料框代码 -->
</div>       
<!-- 评论框代码 -->

 

在上面的代码中,会以 cookie 的方式记录评论者资料,并把评论者资料框的 div 赋予“ hidden ”的 class ,因此对于曾评论的访客,需要先隐藏起评论者资料框的 div ,可以使用 jQuery 的hide()事件隐藏该 div ,如果 jQuery 加载速度较慢,会出现打开页面时先出现 div ,片刻后再突然隐藏 div 的情况,这样显然不利用户体验,因此也可以直接写一条 css ——.hidden {display: none; }。

$('.hidden').hide();

 

3.然后再使用toggle()事件,slideUp()和slideDown()动画实现编辑评论者资料的功能。

$('#edit_profile').toggle(function(){
       $('.hidden').slideDown();
       },function(){
       $('.hidden').slideUp();
       });

 

4.为了提高用户体验,还需要使用text()方法在点击“Change”时把 Change 的字样改为“ Finish ”,当点击 Finish 时再把 Finish 字样改为“ Change Again ”。把以上代码整合,完整的 jQuery 代码如下:

jQuery(document).ready(function($){
$('.hidden').hide();
$('#edit_profile').toggle(function(){
        $('.hidden').slideDown();
        $('#edit_profile span').text("Finish");
        },function(){
        $('.hidden').slideUp();
        $('#edit_profile span').text("Change Again");
        });

});

 

具体的效果可以看本页的评论部分。

 

最后唠叨几句,明天便要开学了,新的学期又将会开始,之前推迟设计的企业网站准备要开始做了,而 jQuery 系统学习还要继续,又将会是一个忙碌的学期初了!

 

本文由 Kayo Lee 发表,本文链接:https://kayosite.com/jquery-study-notes-three-event-and-animation.html

评论列表

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail