首页 新闻 搜索 专区 学院

看到园友的网站(www.evercolour.com ),谁知道那个加载更多文章的按钮具体怎么实现的?

0
悬赏园豆:20 [已解决问题] 解决于 2012-06-22 12:21

看到园友的网站(www.evercolour.com  刚联系他,半天也不回复,只好来这里请教了),看到页面下方有个 load more posts 按钮,很感兴趣,谁能给具体解释一下,我还见过,没有按钮的,直接拉到页面下方自动加载的那种,都是用的javascript吧。

爱莲学堂的主页 爱莲学堂 | 初学一级 | 园豆:153
提问于:2012-05-18 16:31
< >
分享
最佳答案
0
收获园豆:20
迷路中的路人甲 | 初学一级 |园豆:93 | 2012-05-18 16:53
其他回答(1)
0

看一下源码,比较简单的。

// Ajax-fetching "Load more posts"
  $('.fetch a').live('click', function(e) {
  e.preventDefault();
  $(this).addClass('loading').text('Loading...');
  $.ajax({
  type: "GET",
  url: $(this).attr('href') + '#boxes',
  dataType: "html",
  success: function(out) {
  result = $(out).find('#boxes .box');
  nextlink = $(out).find('.fetch a').attr('href');
  $('#boxes').append(result).masonry('appended', result);
  $('.fetch a').removeClass('loading').text('Load more posts');
  if (nextlink != undefined) {
  $('.fetch a').attr('href', nextlink);
  } else {
  $('.fetch').remove();
  }
  }
  });
  });

从不表现看,就是一个ajax请求,然后append。

lucika.zh | 园豆:61 (初学一级) | 2012-05-19 08:56
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册