X-Tag实战:给博客加一个隐藏侧栏的功能
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实战:给博客加一个隐藏侧栏的功能的更多相关文章
- 给俺的 CSDN 博客加背景音乐 - 高大尚的《心经》背景音乐
给俺的 CSDN 博客加背景音乐 - 高大尚的<心经>背景音乐 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途- ...
- Vue实战狗尾草博客管理系统第一章
Vue实战狗尾草博客后台管理系统第一章 这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vu ...
- Vue实战狗尾草博客后台管理系统第七章
Vue实战狗尾草博客后台管理平台第七章 本章内容为借助模块化来阐述Vuex的进阶使用. 在复杂项目的架构中,对于数据的处理是一个非常头疼的问题.处理不当,不仅对维护增加相当的工作负担,也给开发增加巨大 ...
- 一步步搭建自己的博客 .NET版(2、评论功能)
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- 基于.NetCore开发博客项目 StarBlog - (13) 加入友情链接功能
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- 基于.NetCore开发博客项目 StarBlog - (14) 实现主题切换功能
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- 用 Flask 来写个轻博客 (30) — 使用 Flask-Admin 增强文章管理功能
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 实现文章管理功能 实现效果 前文列表 用 Flask 来写个 ...
- Vue实战狗尾草博客管理平台第六章
Vue实现狗尾草博客后台管理系统第六章 本章节内容 文章列表 文章详情 草稿箱 文章发布. 本章节内容呢,开发的很是随意哈,因为多数就是element-ui的使用,熟悉的童鞋,是可以很快完成本章节的内 ...
- Vue实战狗尾草博客管理平台第五章
本章主要内容如下: 静态资源服务器的配置.学会如何使用静态资源服务器引入静态资源.并给大家推荐一个免费可使用的oss服务器~ 页面的开发由于近期做出的更改较大.就放在下一篇中. 静态资源服务器 静态资 ...
随机推荐
- Jmeter接口测试,往MySQL数据库写数据时,中文显示???
调Jmeter接口测试,请求字段输入中文,查看数据库插入情况, 发现数据库显示 ???
- 说说TCP的三次握手和四次挥手
一.传输控制协议TCP简介 1.1 简介 TCP(Transmission Control Protocol) 传输控制协议,是一种 面向连接的.可靠的.基于字节流的传输层 通信协议. TCP是一种面 ...
- Spring 中Controller 获取请求参数的方法笔记
1.直接把表单的参数写在Controller相应的方法的形参中,适用于get方式提交,不适用于post方式提交.若"Content-Type"="application/ ...
- JavaWeb网上图书商城完整项目--day02-28.查询所有分类功能之left页面使用Q6MenuBar组件显示手风琴式下拉菜单
首先页面去加载的时候,会去加载main.js文件,我们在加载left.jsp.top.jsp body.jsp,现在我们修改main.jsp的代码,让它去请求的时候去访问的是不在直接去访问left.j ...
- 僵尸扫描-scapy、nmap
如果不知道僵尸扫描是什么,请参考我的这篇博客 实验环境: kali(攻击者) 192.168.0.103 metasploitable2(目标主机) 192.168.0.104 win xp sp2( ...
- 使用word2016发有代码高亮的博客
复制使用notepad++,eclipse这类有高亮的编辑器编写的代码到word中是默认有高亮的. 测试有没有代码高亮(eclipse代码): package p_day1; public class ...
- springboot项目打war包发布到外置tomcat
第一步:修改pom.xml 1. <version>0.0.1-SNAPSHOT</version> <packaging>war</packaging> ...
- SpringBoot之入门教程-SpringBoot项目搭建
SpringBoot大大的简化了Spring的配置,把Spring从配置炼狱中解救出来了,以前天天配置Spring和Mybatis,Springmvc,Hibernate等整合在一起,感觉用起来还是挺 ...
- 微信开发_Exception_02_"errcode":40164,"errmsg":"invalid ip 61.172.68.219, not in whitelist hint
ip查询网址: http://www.ip.cn/ 一.异常现象 今天开始做微信开发,在办公室时能正常获取access_token,晚上回家之后获取access_token时却报出下列错误信息: {& ...
- JavaScript基础对象创建模式之链式调用模式(Chaining Pattern)(029)
链式调用模式允许一个接一个地调用对象的方法.这种模式不考虑保存函数的返回值,所以整个调用可以在同一行内完成: myobj.method1("hello").method2().me ...