jQuery Sidebar 插件使用教程

胡寒侃Joe

于 2024-09-01 07:03:48 发布

阅读量1.1k

点赞数 25

本文链接：https://blog.csdn.net/gitblog_00184/article/details/141763903

版权

jQuery Sidebar 插件使用教程

jQuery-sidebar:chocolate_bar: A stupid simple sidebar jQuery plugin.项目地址:https://gitcode.com/gh_mirrors/jq/jQuery-sidebar

1、项目介绍

jQuery Sidebar 是一个简单易用的侧边栏插件，由 @jillix 开发者团队开发并维护。该插件依赖于 jQuery，可以轻松地在网页中添加左侧、右侧、顶部和底部的侧边栏。插件的代码托管在 GitHub 上，遵循 MIT 许可证。

2、项目快速启动

安装

首先，你需要在你的项目中包含 jQuery 和 jQuery Sidebar 插件。你可以通过以下方式引入：

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 jQuery Sidebar 插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sidebar/3.3.2/jquery-sidebar.min.js"></script>

使用

在你的 HTML 文件中添加侧边栏的容器：

<div class="sidebar left">Hello World</div>
<div class="sidebar right">I am on right</div>
<div class="sidebar top">I am on top</div>
<div class="sidebar bottom">I am on bottom</div>

然后在你的 JavaScript 文件中初始化侧边栏：

$(document).ready(function() {
    // 左侧侧边栏（默认）
    $(".sidebar.left").sidebar();
    // 右侧侧边栏
    $(".sidebar.right").sidebar({side: "right"});
    // 顶部侧边栏
    $(".sidebar.top").sidebar({side: "top"});
    // 底部侧边栏
    $(".sidebar.bottom").sidebar({side: "bottom"});
});

自定义 CSS

你还需要为侧边栏编写自定义的 CSS 样式。以下是一个简单的示例：

.sidebar {
    position: fixed;
    background-color: #333;
    color: #fff;
    padding: 10px;
    transition: transform 0.3s ease-out;
}

.sidebar.left {
    left: 0;
    top: 0;
    width: 250px;
    height: 100%;
    transform: translateX(-100%);
}

.sidebar.right {
    right: 0;
    top: 0;
    width: 250px;
    height: 100%;
    transform: translateX(100%);
}

.sidebar.top {
    top: 0;
    left: 0;
    width: 100%;
    height: 250px;
    transform: translateY(-100%);
}

.sidebar.bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 250px;
    transform: translateY(100%);
}