DIY你的网页分隔条，打造更具个性化和灵活性的UI布局

2023-02-11 20:52:00

网页分隔条：打造灵活性和个性化UI布局

在网页设计中，巧妙地运用分隔条（splitter）可以极大地提升用户体验，让界面的布局更美观大方。特别是在宽屏普及的今天，合理安排左侧菜单栏、右侧内容区域以及分隔条splitter的宽度，成为了一项难题。

如果你厌倦了现成的组件，渴望亲手打造一个网页分隔条，那么这篇教程将一步步带你实现。准备好踏上DIY之旅了吗？

HTML结构：为分隔条构建基础

<div id="splitter">
  <div id="left-pane">
    <!-- 菜单或选项面板的内容 -->
  </div>
  <div id="right-pane">
    <!-- 与菜单或选项对应的内容 -->
  </div>
  <div id="splitter-bar"></div>
</div>

这个HTML结构构建了分隔条splitter的基础框架：

#splitter： 分隔条的容器，采用flex布局。
#left-pane： 左侧菜单栏或选项面板的容器。
#right-pane： 右侧内容区域的容器。
#splitter-bar： 分隔条splitter的容器。

CSS样式：定义分隔条的外观和布局

#splitter {
  display: flex;
  flex-direction: row;
  height: 100%;
}

#left-pane {
  width: 250px;
  background-color: #f0f0f0;
}

#right-pane {
  flex: 1;
  background-color: #ffffff;
}

#splitter-bar {
  width: 5px;
  background-color: #999999;
  cursor: col-resize;
}

CSS样式赋予了分隔条splitter特定的外观和布局：

分隔条容器采用flex布局，子元素水平排列。
左侧菜单栏宽度固定为250px，背景色为浅灰色。
右侧内容区域占据剩余空间，背景色为白色。
分隔条splitter宽度为5px，背景色为深灰色，鼠标悬停时显示为可调整大小的光标。

JavaScript脚本：让分隔条动起来

const splitter = document.getElementById('splitter');
const leftPane = document.getElementById('left-pane');
const rightPane = document.getElementById('right-pane');
const splitterBar = document.getElementById('splitter-bar');

splitterBar.addEventListener('mousedown', (event) => {
  const initialX = event.clientX;
  const initialWidth = leftPane.offsetWidth;

  document.addEventListener('mousemove', (event) => {
    const deltaX = event.clientX - initialX;
    const newWidth = initialWidth + deltaX;

    if (newWidth >= 0 && newWidth <= splitter.offsetWidth - rightPane.offsetWidth) {
      leftPane.style.width = `${newWidth}px`;
      rightPane.style.width = `${splitter.offsetWidth - newWidth}px`;
    }
  });

  document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove', mousemoveHandler);
  });
});