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>

最后看一下效果。

 

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

以上。