Ajax加载文章列表模式

具体效果见我网站的浏览模式——列表模式↑。先看效果如果你不感兴趣就不要往下看了，免得浪费时间。

原来我在用Sablog的时候，它就可以选择默认的浏览模式是标准模式还是列表浏览模式，并且还可以记忆访客的个性化设置。使用列表模式可以一目了然，让访客知道都有哪些文章，不必一页页的点击去浏览。现在换成Emlog，只好折腾一下咯。其实这个效果我很久以前就加上了，不过之前都是不管选哪种模式，列表模式都必须是直接调用的。只不过选择标准模式时列表模式是隐藏的，点击列表时才显示出来。感觉非常的不好。最近捣鼓了一下，改为Ajax调用。即只有在选择列表模式是才会加载，否则不会调用。

大体上来说通过三步就可以实现这个效果：

第一要安装EMLOG数据调用插件。你可以点击链接去下载安装。安装好之后，进入插件设置界面新建一个数据调用，里面具体的参数可根据需要设定，下图是我设定的调用参数。

第二要在主机空间的根目录下新建一个页面命名为list.php。里面加入两行PHP代码：

<?php require_once 'init.php';?> 
<?php kl_data_call_for_internal(1); ?> 

这时你在浏览器访问list.php页面即可看到所调用的数据，如我的http://www.wwqk.net/list.php

最后就是Ajax调用了，这里用到jQuery的load()方法，即通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。我页面中就是通过点击列表来加载调用的数据。此方法的语法如下：

load(url,data,function(response,status,xhr))

url即刚才的list.php，data不设定，function()回调函数可根据需要设定想要的效果，不再赘述。我的代码如下：

$('#top_title span').click(function(){   
  $(".hide").load("list.php",function(){   
      $(this).removeClass().siblings().addClass("unselect"); 
      $("#top_content>ul").slideUp('1500').eq($('#top_title span').index(this)).slideDown('1500');}); 
  
});