WordPress 使用ajax分页 加载更多按钮

最近在给Time时光相册添加分页加载时所使用,代码来源于: http://www.wazhuti.com/2885.html

教程开始

在文章列表循坏下 放入下一页

<!-- 分页 -->   
<div id="pagination">
<?php next_posts_link(__('点击查看更多')); ?>
</div>

添加js代码

此处提示: 下方JavaScript代码内修改 这两行中你文章的类标签即可,如下的#main1是文章列表总容器的id(如果你是css类也可以写成它的css类) .img-area 为列表模块类。可以参考下图理解:

var $res = $(data).find("#main .img-area"); //从数据中挑出文章数据,请根据实际情况更改(此处#main为列表总容器id,.img-area为列表文章模块css类)
$('#main').append($res.fadeIn(500)); //将数据加载加进posts-loop的标签中。(此处的#main 需要修改为你的列表总容器id)

%title插图%num

JavaScript代码:

<!-- 加载更多 -->
      <script>
      //wordpress点击加载更多
      jQuery(post).ready(function($) {
          //点击下一页的链接(即那个a标签)
          $('#pagination a').click(function() {
              $this = $(this);
              $this.addClass('loading').text("正在努力加载"); //给a标签加载一个loading的class属性,可以用来添加一些加载效果
              var href = $this.attr("href"); //获取下一页的链接地址
              if (href != undefined) { //如果地址存在
                  $.ajax({ //发起ajax请求
                      url: href, //请求的地址就是下一页的链接
                      type: "get", //请求类型是get
                      error: function(request) {
                          //如果发生错误怎么处理
                      },
                      success: function(data) { //请求成功
                          $this.removeClass('loading').text("点击查看更多"); //移除loading属性 
                          var $res = $(data).find("#main .img-area"); //从数据中挑出文章数据,请根据实际情况更改(此处#main为列表总容器id,.img-area为列表文章模块css类)
                          $('#main').append($res.fadeIn(500)); //将数据加载加进posts-loop的标签中。(此处的#main 需要修改为你的列表总容器id)
                          var newhref = $(data).find("#pagination a").attr("href"); //找出新的下一页链接
                          if (newhref != undefined) {
                              $("#pagination a").attr("href", newhref);
                          } else {
                              $("#pagination a").remove(); //如果没有下一页了,隐藏
                          }
                      }
                  });
              }
              return false;
          });
      });
</script> 

加载更多css代码

暂时省略

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容