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. GIT本地库基本操作-命令行

    GIT本地库操作基本原理 GIT作为分布式版本库软件,每个机器上都是一个版本库. git初始化后,有三个区,分别是 工作区,暂存区,本地库: 工作区是我们编辑代码的区别,包括新增,修改,删除代码操作, ...

  2. 3、struct2的常见配置

    1.在eclipse中如何复制一个工程作为一个新的工程 在struct.xml中: <result name="success">/login_sucess.jsp&l ...

  3. Ueditor富文本添加视频内容,视频不显示以及编辑富文本时,视频不显示解决方案

    问题是在添加视频时,编辑器会把视频标签<video>换成<img>.很讨厌... 1.2是解决添加视频时不显示,3是解决编辑时不显示 ueditor.all.js文件中  第7 ...

  4. js进度条

    第一步//====================.wrap,.circle,.percent{                  position: absolute;                ...

  5. sorted 函数及小练习

    python 中sorted函数 sorted() 函数对所有可迭代的对象进行排序操作. sorted 语法: sorted(iterable[, cmp[, key[, reverse]]]) 参数 ...

  6. Spring Boot入门系列(十七)整合Mybatis,创建自定义mapper 实现多表关联查询!

    之前讲了Springboot整合Mybatis,介绍了如何自动生成pojo实体类.mapper类和对应的mapper.xml 文件,并实现最基本的增删改查功能.mybatis 插件自动生成的mappe ...

  7. CentOS 关闭暂不需要的系统服务

    需要保留的服务:crond.iptables.irqbalance.microcode_ctl.network.random.sshd.syslog.local 一 .使用命令:ntsysv 打开选项 ...

  8. Python3笔记019 - 4.4 字典

    第4章 序列的应用 python的数据类型分为:空类型.布尔类型.数字类型.字节类型.字符串类型.元组类型.列表类型.字典类型.集合类型 在python中序列是一块用于存放多个值的连续内存空间. py ...

  9. MACOS使用VScode进行C语言编程

    [B站有同步视频教程] 安装VScode 从官网下载vscode安装https://code.visualstudio.com/ 安装code runner插件 配置code runner从终端输出 ...

  10. 组合 a 标签与 canvas 实现图片资源的安全下载的方法与技巧

    普通用户下载图片时只需一个「右键另存为」操作即可完成,但当我们做在线编辑器.整个 UI 都被自定义实现时,如何解决不同域问题并实现页面中图片资源的安全下载呢?本文就解决该问题过程中所涉及的正则表达式. ...