SideBarButtonLibrary 是一个轻量级的 JavaScript 库，用于创建可展开和收起的侧边栏按钮容器，支持自定义吸附方向（左、右、上、下）、按钮排列方式（水平或垂直）以及样式，适用于快速构建侧边栏工具栏或导航菜单。
此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.greasyfork.icu/scripts/453745/1525524/SideBarButtonLibrary.js
SideBarButtonLibrary 是一个用于创建侧边栏按钮容器的 JavaScript 库。它支持将按钮吸附到页面的左侧、右侧、顶部或底部，并允许用户自定义按钮的样式、排列方式以及展开/收起行为。
吸附方向：支持将按钮容器吸附到页面的 left、right、top 或 bottom。
展开/收起：支持动态展开和收起按钮容器，支持自定义展开延迟和收起延迟。
按钮排列：支持水平排列（row）和垂直排列（column）。
样式自定义：用户可以通过配置对象自定义按钮样式、删除按钮样式以及容器样式。
灵活配置：支持通过配置对象动态调整所有行为和样式。
将以下代码保存为 SideBarButtonLibrary.js，并在你的 HTML 文件中引入该脚本：
HTML复制
<script src="path/to/SideBarButtonLibrary.js"></script>
或者，直接将代码嵌入到你的 HTML 文件中：
HTML复制
<script>
// 将 SideBarButtonLibrary 的代码粘贴到这里
</script>
使用 SideBarButtonLibrary.createButtons 方法初始化按钮容器。你可以通过配置对象自定义按钮的行为和样式。
JavaScript复制
SideBarButtonLibrary.createButtons([
{ name: 'Button 1', func: () => alert('Button 1 clicked') },
{ name: 'Button 2', func: () => alert('Button 2 clicked') }
], {
container: {
width: '5px', // 收起时宽度/高度
expandedWidth: '200px', // 展开时宽度
backgroundColor: 'rgba(0, 0, 0, 0.2)', // 容器背景颜色
className: 'my-sidebar-container', // 容器类名
position: 'left', // 吸附位置：left/right/top/bottom
flexDirection: 'column' // 排列方向：row/column
},
buttonStyles: {
width: '180px', // 按钮宽度
background: '#ff5722', // 按钮默认背景
hoverBackground: '#cc4400', // 按钮悬停背景
defaultBackground: '#ff5722' // 按钮默认背景
},
deleteButtonStyles: {
right: '-40px', // 收起时删除按钮位置
expandedRight: '20px', // 展开时删除按钮位置
background: 'rgba(255, 0, 0, 0.8)', // 删除按钮背景
color: '#000' // 删除按钮字体颜色
},
hoverDelay: 300, // 悬停延迟（毫秒）
hideDelay: 800 // 收起延迟（毫秒）
});
以下是 SideBarButtonLibrary.createButtons 方法中可用的配置选项：
container（容器配置）width：收起时的宽度或高度（对于 top 和 bottom 是高度）。
expandedWidth：展开时的宽度或高度。
backgroundColor：容器的背景颜色。
className：容器的类名（用于自定义样式）。
position：容器吸附的位置（left、right、top、bottom）。
flexDirection：按钮的排列方向（row 或 column）。
buttonStyles（按钮样式）width：按钮的宽度。
background：按钮的默认背景颜色。
hoverBackground：按钮悬停时的背景颜色。
defaultBackground：按钮的默认背景颜色。
color：按钮的字体颜色。
borderRadius：按钮的圆角大小。
fontSize：按钮的字体大小。
cursor：鼠标悬停时的光标样式。
deleteButtonStyles（删除按钮样式）right：收起时删除按钮的位置。
expandedRight：展开时删除按钮的位置。
background：删除按钮的背景颜色。
color：删除按钮的字体颜色。
borderRadius：删除按钮的圆角大小。
fontSize：删除按钮的字体大小。
hoverDelay 和 hideDelayhoverDelay：鼠标悬停后展开的延迟时间（单位：毫秒）。
hideDelay：鼠标移出后收起的延迟时间（单位：毫秒）。
你可以多次调用 SideBarButtonLibrary.createButtons 方法，向同一个容器中添加更多按钮。只需确保使用相同的 className。
JavaScript复制
SideBarButtonLibrary.createButtons([
{ name: 'Button 3', func: () => alert('Button 3 clicked') },
{ name: 'Button 4', func: () => alert('Button 4 clicked') }
], {
container: {
className: 'my-sidebar-container' // 使用相同的容器类名
}
});
类名冲突：确保你提供的 className 不会与页面上现有的类名冲突。
样式覆盖：如果需要进一步自定义样式，可以通过 CSS 覆盖默认样式。
删除按钮：删除按钮会移除整个容器，请谨慎使用。
以下是一个完整的 HTML 示例，展示如何使用 SideBarButtonLibrary：
HTML复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SideBarButtonLibrary 示例</title>
<style>
/* 可选：自定义样式 */
.my-sidebar-container {
/* 自定义容器样式 */
}
</style>
</head>
<body>
<script src="path/to/SideBarButtonLibrary.js"></script>
<script>
SideBarButtonLibrary.createButtons([
{ name: 'Button 1', func: () => alert('Button 1 clicked') },
{ name: 'Button 2', func: () => alert('Button 2 clicked') }
], {
container: {
width: '5px',
expandedWidth: '200px',
backgroundColor: 'rgba(0, 0, 0, 0.2)',
className: 'my-sidebar-container',
position: 'left',
flexDirection: 'column'
},
buttonStyles: {
width: '180px',
background: '#ff5722',
hoverBackground: '#cc4400',
defaultBackground: '#ff5722'
},
deleteButtonStyles: {
right: '-40px',
expandedRight: '20px',
background: 'rgba(255, 0, 0, 0.8)',
color: '#000'
},
hoverDelay: 300,
hideDelay: 800
});
</script>
</body>
</html>
如果你在使用过程中遇到任何问题，或者有任何建议和反馈，欢迎随时联系我。
作者：otc 邮箱：[email protected]