php+ajax+JSON API实现单页面内标签切换
公司制作新公司的官网,采用wordpress来进行站点搭建。其中首页的案例展示模块,设计如下图:

如上图,需要在首页进行案例的切换。
实现功能想到有两种解决方案:
方案一:除index.php文件外,创建三个分类文件category-h5.php、category-media.php、category-design.php,点击标签,跳转到对应的分类页面。基本可以实现标签分页功能。更加精细点,可以缓存当前页面位置,在新的页面设置页面滚动至缓存位置。本方案基本可以实现功能。唯一缺点:页面过渡时根据网络情况会出现闪烁、多3个php文件。
方案二:单页面index.php,安装JSON API的插件,采用ajax的形式,动态获取分类内容,并动态更新页面内容。
当前采用方案二进行技术实现。
1、在wordpress 管理后台创建分类标签,如下图:

2、安装JSON API插件并启用

3、添加分类文章,测试JSON API
var clickedItem = 0;
var $items = $('#categoryMenu').find('a');
var slugList = ['case', 'h5', 'media', 'design'];
function clickItem(index) {
/*更新按钮选项的状态*/
$($items[clickedItem]).removeClass('hover');
$($items[index]).addClass('hover');
clickedItem = index;
/*请求API,获取分类的内容*/
var url = '/yanrui/?json=get_category_posts&slug=' + slugList[index] +'&count=6';
$.ajax({
type: "GET",
url: url,
dataType: "json",
jsonp: "callback",
success: function (data) {
console.log(data);
var res = eval(data);
if (res.status == 'ok') {
// todo 解析文章内容
}
},
error:function(msg){
msg = eval('(msg)');
console.log(msg);
}
});
}
测试结果如下图,即正常接口测试通过:

4、ajax获取结果,动态更新模块内容

5、完成单页面动态切换。