萧邦之殇

If not me who, If not now when

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、完成单页面动态切换。

发表回复

Your email address will not be published. Required fields are marked *.

*
*

鄂ICP备2025138472号-1