X-Tag是什么?

X-Tag是一个库,这个库可以让你用面向对象的方式定义自定义标签并给与其功能,很适合用来写一些网页小组件。

xtag.create('x-clock', class extends XTagElement {
connectedCallback () {
this.start();
}
start (){
this.update();
this._interval = setInterval(() => this.update(), 1000);
}
stop (){
this._interval = clearInterval(this._data.interval);
}
update (){
this.textContent = new Date().toLocaleTimeString();
}
'tap::event' (){
if (this._interval) this.stop();
else this.start();
}
});

以上,创建一个时钟组件。

这个功能首先需要一个交互的东西,即一个按钮。

样式可以写在博客园设置的样式区里。

.x-switch{
background-color:#fff;
border-radius:50%;
width:30px;
height:30px;
position:fixed;
bottom:20px;
right:10px;
box-shadow: 0px 0px 10px #fff;
cursor:pointer;
}

然后就是写交互逻辑,找到了相关DOM的ID就很简单。

clock.js

window.$contentStyle = {
content:''
} const Frank = xtag.create('x-switch', class extends XTagElement {
'::template(true)' (){
return `<div class="x-switch"></div>`
}
'click::event' (){
if (document.getElementById("leftmenu").style.display !== "none") {
if (window.$contentStyle.content.length === 0) {
window.$contentStyle.content = document.getElementById("content").style.marginLeft
}
document.getElementById("leftmenu").style.display = "none"
document.getElementById("content").style.marginLeft = "0"
} else {
document.getElementById("leftmenu").style.display = "block"
document.getElementById("content").style.marginLeft = window.$contentStyle.content
}
}
}); const FrankNode = new Frank();
FrankNode.render();

HTML标签的话,设置里的侧边栏、页首、页脚都可以放HTML代码。

<x-switch></x-switch>

把自己写的文件 clock.js 和 X-Tag 库的文件传进博客园。

最后再引用这两个文件。

用<script>在设置可以放HTML的地方引入。

<script type="text/javascript" src="http://files.cnblogs.com/foxcharon/x-tag-raw.min.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/foxcharon/clock.js"></script>

最后看一下效果。

交互按钮看起来是这样的:

以上。

X-Tag实战:给博客加一个隐藏侧栏的功能的更多相关文章

  1. 给俺的 CSDN 博客加背景音乐 - 高大尚的《心经》背景音乐

    给俺的 CSDN 博客加背景音乐 - 高大尚的<心经>背景音乐 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途- ...

  2. Vue实战狗尾草博客管理系统第一章

    Vue实战狗尾草博客后台管理系统第一章 这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vu ...

  3. Vue实战狗尾草博客后台管理系统第七章

    Vue实战狗尾草博客后台管理平台第七章 本章内容为借助模块化来阐述Vuex的进阶使用. 在复杂项目的架构中,对于数据的处理是一个非常头疼的问题.处理不当,不仅对维护增加相当的工作负担,也给开发增加巨大 ...

  4. 一步步搭建自己的博客 .NET版(2、评论功能)

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  5. 基于.NetCore开发博客项目 StarBlog - (13) 加入友情链接功能

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  6. 基于.NetCore开发博客项目 StarBlog - (14) 实现主题切换功能

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  7. 用 Flask 来写个轻博客 (30) — 使用 Flask-Admin 增强文章管理功能

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 实现文章管理功能 实现效果 前文列表 用 Flask 来写个 ...

  8. Vue实战狗尾草博客管理平台第六章

    Vue实现狗尾草博客后台管理系统第六章 本章节内容 文章列表 文章详情 草稿箱 文章发布. 本章节内容呢,开发的很是随意哈,因为多数就是element-ui的使用,熟悉的童鞋,是可以很快完成本章节的内 ...

  9. Vue实战狗尾草博客管理平台第五章

    本章主要内容如下: 静态资源服务器的配置.学会如何使用静态资源服务器引入静态资源.并给大家推荐一个免费可使用的oss服务器~ 页面的开发由于近期做出的更改较大.就放在下一篇中. 静态资源服务器 静态资 ...

随机推荐

  1. Spring Boot 分离资源文件打包

    Spring Boot项目默认的会打包成单一的jar文件,但是有时候我们并不想让配置文件.依赖包都跟可执行文件打包到一起.这时候可以在pom.xml文件中进行配置,从而使资源文件.依赖包和可执行文件分 ...

  2. vue 生成二维码+截图

    链接生成二维码 1.npm安装 npm install --save qrcodejs2 2.引入 import QRCode from 'qrcodejs2' 3.生成二维码 new QRCode( ...

  3. MonoBehaviour.StartCoroutine开启协同程序

    StartCoroutine协同程序 StartCoroutine(IEnumerator) StartCoroutine(string methodName) StartCoroutine(stri ...

  4. Beta冲刺--项目测试

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta 冲刺 这个作业的目标 Beta冲刺--项目测试 作业正文 如下 其他参考文献 ... Beta冲刺 ...

  5. 性能测试之JVM的故障分析工具VisualVM

    VisualVM 是随JDK一同发布的jvm诊断工具,通过插件可以扩展很多功能,插件扩展也是其精华所在. 提供了一个可视界面,用于在Java应用程序在Java虚拟机上运行时查看有关Java应用程序的详 ...

  6. mybatis读写分离

    mybatis读写分离实现方式有很多种,当然如果没有太过复杂的处理,可以使用阿里云数据库自带的读写分离连接,那样会更加简洁.本文主要对mybatis实现读写分离.主要的实现方式有一下四种: 方案1 通 ...

  7. 强大的IntelliJ IDEA怎么破解?

    IntelliJ IDEA是非常好用的一个开发工具,怎么样才可以破解也是非常关键的问题,本文简单介绍破解方法. 第一种方式,我们进入以下网站http://idea.lanyus.com/ 这里要注意一 ...

  8. 微信小程序-Page生命周期

    QQ讨论群:785071190 微信小程序开发之前我们还需认识一下小程序页面的生命周期,丛"微信小程序-代码构成"一文中我们可以了解到小程序页面中有一个.js的文件,这篇博文我们来 ...

  9. 手写React的Fiber架构,深入理解其原理

    熟悉React的朋友都知道,React支持jsx语法,我们可以直接将HTML代码写到JS中间,然后渲染到页面上,我们写的HTML如果有更新的话,React还有虚拟DOM的对比,只更新变化的部分,而不重 ...

  10. 微服务配置中心 Apollo 源码解析——Admin 发送发布消息

    内容参考:https://www.toutiao.com/a6643383570985386509/ 摘要: 原创出处http://www.iocoder.cn/Apollo/admin-server ...