分类
SaaS 建站心得

利用蓝鲸MagicBox组件库实现时间轴效果

开启多样页面之旅

任务

一直想将计划的完成情况实时更新在主页面 Summer Vacation Plan of 2020 时间轴可以起到这一作用。但希望以美观的形式出现,想到尝试使用学习SaaS时,蓝鲸的MagicBox前端代码可以直接使用。

效果

  • 2015-05-21
  • blue king 给你发了一封邮件

    我们的目标是让您对腾讯云的服务…
  • 5 分钟前

    blue king 已经接受你的认证申请!

  • 27 分钟前

    blue king 给你回复

    我们会用饱满的热情、诚恳的态度、专业的知识背景,耐心、细致地为用户解决问题…
  • 2015-05-20
  • 2 天前

    blue king 上传一组照片

    ...
  • 5 分钟前

    blue king 已经接受你的认证申请!

  • 27 分钟前

    blue king 给你回复

    我们会用饱满的热情、诚恳的态度、专业的知识背景,耐心、细致地为用户解决问题…
  • 2015-05-20
  • 2 天前

    blue king 上传一组照片

    ...

使用方法

前往平台https://magicbox.bk.tencent.com/static_api/v3/main/index.html#,进入jQuery组件1.0版,内容更完整丰富。

选取自己需要的样式,进行代码的复制。

将代码粘贴进wordpress的customHTML块中即可,记得要将删去依赖文件的注释。

自定义

添加新项

利用两组套件,一个是时间轴,另一个是编辑器。通过在编辑器中输入,实时添加至时间轴中新项目。

var list =$("#timeline_item");
list.prepend(' <li>\
                        <i class="fa fa-clock-o king-bg-gray"></i>\
                        <h3>2020年6月22日</h3>\
                      </li>');
  • 通过Ajax选择器得到时间轴列表
  • prepend倒序添加新的列表项

当前日期及时间

var date = new Date()<!--获得日期数据-->
var Y = date.getFullYear();<!--年-->
var M = date.getMonth()+1;<!--月,这里的月份必须要+1才是当前月份-->
var D = date.getDate(); <!--日,getDay是获得当前星期几(0-6),getDate是获得当前日期-->
var dateStr=Y+"-"+M+"-"+D;

var h=date.getHours();//小时
var m=date.getMinutes();//分钟
var s=date.getSeconds();//秒钟
//补零
if(h < 10){h="0" + h;}
if(m < 10){m="0" + m;}
if(s < 10){s="0" + s;}
var timeStr=h+":"+m+":"+s;

问题记录

在本地测试没有问题,但复制到wordpress中会报错

转义字符\”

当字符串中包括”会被截断,需要在前面加上转义字符\

防止同名函数

当排除了字符串截断的问题后,出现了函数xx is not a function的错误。我命名这个函数为addComment,显然容易与wordpress的函数重名,试着改为其他名称myAddComment,正常工作。

发表评论

电子邮件地址不会被公开。 必填项已用*标注