Ajax评论蓄谋已久，但由于自己水平能力的限制一直都未实现。由于多php、jQuery、Ajax开发的欠缺和对WordPress的理解不深刻，两次的提交都未成功。主要的问题就是Ajax请求的处理方式的问题。

现在用的方法是不改变评论的路径，依然是提交到wp-comments-post.php。在转向的时候做处理，在functions.php中添加如下代码：

add_filter('comment_post_redirect','commentAjaxPost',10,2)

在“commentAjaxPost”方法中对$comment进行处理。主要就是将comment.php中的<li>标签连同其内部的代码拷贝到“commentAjaxPost”方法中，并在方法末尾使用”exit;”。剩下的工作就是在js中处理响应内容了。

这种方法也比较简单，唯一不足的地方时wp-comments-post.php中的异常处理用的是wp_die()，这个方法会生成一个包含错误信息的页面。在Ajax中，我们就要从改页面的代码中找出我们所要显示给用户的错误信息。

另外在网上查到了位于wp-admin/admin-ajax.php中的wp_ajax_{$_GET[action]}和wp_ajax_{$_POST[action]}两个hook，不知道是不是可以用在处理Ajax请求中。有待研究…

下载 flashy 1.2.1

前些天看了下jQuery，昨天心血来潮写了个页面平滑滚动的插件。

比如有些页面会在底部添加一个类似Top的按钮，点击后页面会滚动到页面顶部。这个插件的功能就是实现平滑的滚动，并且不会在地址栏上添加锚点的名字。用的是jQuery+jquery.scrollTo，我自己写的代码不过简单的十行而已。所以插件比较小且简单，用处不大，喜欢的就试试吧。

不知道类似功能的插件是不是已经有了，见过的告知一下，谢谢。

测试：点此到底部，这就是装上插件的效果，这里的加的链接是“#footer”，因为页面底部有一个<div id=”footer”>的 标签。

下载

这次的顺利还得益于上次的ExtJs项目中的上千次firebug脚本调试，从中学习了不少知识。

我觉得难点主要有两个

• 第一个难点与jQuery无关，全关系到了全局，那就是CSS样式的设置。顶层的li元素的position应设为relative，次级菜单li元素的position设为absolute
• 判断鼠标激活的元素是否位于顶层，因为这直接影响到了sub menu位置的left坐标的值

代码：

$(function(){
    var $mainmenu = $('#myslidemenu>ul');
    //获得有sub menu的li 即folder item
    var $top = $mainmenu.find('ul').parent();
    //遍历所有top menu
    $top.each(function(){
        //鼠标移到的folder节点
        var $folder = $(this);
        var $sub_folder = $folder.find('ul:eq(0)');
        this._dimension = {
            w: this.offsetWidth,
            h: this.offsetHeight,
            subWidth: $sub_folder.outerWidth,
            subHeight: $sub_folder.outerHeight()
        };
        //判断当前的元素是否top menu
        //因为sub menu会位于top menu的下方，而third menu是位于sub menu的右侧或者左侧，而这的top值会不同
        this.isTop = $folder.parents('ul').length == 1 ? true : false;
        $sub_folder.css({
            top: this.isTop ? this._dimension.h + 'px' : '0'
        });
        //添加hover事件
        $folder.hover(function(){
            //目标对象
            var $target_menu = $(this).find('ul:eq(0)');
            //坐标
            this._offsets = {
                left: $(this).offset().left,
                top: $(this).offset().top
            }
            //如果当前的元素位于顶层，那么sub menu的left值为0，即位于当前元素的正下方
            //否则，left值为当前元素的宽度，即位于当前元素的正右方
            var menuleft = this.isTop ? 0 : this._dimension.w;
            //判断弹出的菜单是否超出屏幕宽度
            //若超出，则显示在当前元素的左侧，否则显示在右侧
            menuleft = (this._offsets.left + menuleft + this._dimension.subWidth > $(window).width()) ? (this.isTop ? -this._dimension.subWidth + this._dimension.w : -this._dimensions.w) : menuleft;
            //目标对象没有运行动画
            if (!$target_menu.is(':animated')) {
                $target_menu.css({
                    left: menuleft + 'px',
                    width: this._dimension.subWidth
                }).slideDown('normal');//显示
            }
        }, function(){
            //目标对象
            var $target_menu = $(this).find('ul:eq(0)');
            $target_menu.slideUp('normal');//隐藏
        });//end hover
    });//end each
    $mainmenu.find("ul").css({
        display: 'none',
        visibility: 'visible'
    });
})

时间到，祝大家新年快乐！

jQuery中的动画效果只要是通过更改元素的位置、大小以及透明度来实现的。

• hide/show方法通过改变元素的hight、width两个属性值来实现元素的隐藏和现实
• slideUp/slideDown实现的是一种卷帘的效果，实现的方法是改变元素的height属性值
• fadeOut/fadeIn方法是改变元素的透明度
• animate则比较全面，可以根据需要从不同角度来实现动画交过，而上面的三个方法的效果都可以通过animate来实现

代码：

// jQuery tab

 $(function(){
    //页面初始化时 获得激活的tab的索引
    var index = $('div.tab_header').index($('div.header_highlight'));
    //显示激活的tab对应的content内容
    $('div.tab_content').eq(index).slideDown('fast');
    //为tab添加click事件
    $('div.tab_header').click(function(){
        //点击的tab已经 被激活，结束
        if ($(this).is('.header_highlight')) {
            return;
        }
        //判断激活的tab是否正处于对话中
        if (!$('div.header_highlight').is(':animated')) {
            //更新tab样式
            $('div.header_highlight').removeClass('header_highlight');
            $(this).addClass('header_highlight');
            //获得激活的tab的索引
            var index = $('div.tab_header').index($(this));
            $('div.tab_content:visible').slideUp('fast');
            $('div.tab_content').eq(index).slideDown('fast');
        }
    });
})

这只是一个简单的例子，还会继续学习，下一个例子要做多级菜单。