📅  最后修改于: 2023-12-03 15:29:38.991000             🧑  作者: Mango
Bootstrap Offcanvas 是基于 Bootstrap 框架的一个插件,它可以实现一个侧边栏,包含导航菜单、设置、信息等。用户可以通过点击按钮或手势来打开和关闭侧边栏。
需要引入最新版本的 Bootstrap 和 Offcanvas 插件。
<!-- 引入 Bootstrap 样式 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入 Offcanvas 插件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>
使用 Offcanvas 插件需要在 HTML 结构中添加一些标记和类名。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<!-- 按钮 -->
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Offcanvas 内容 -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<!-- 导航菜单 -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
在 JavaScript 中初始化 Offcanvas 插件。
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Offcanvas 插件提供了多个选项,可以在初始化时传入。
| 名称 | 类型 | 默认值 | 描述 |
| ------------------ | ------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| backdrop | boolean | true | 是否显示背景遮罩。 |
| keyboard | boolean | true | 是否允许使用 ESC 键关闭 Offcanvas。 |
| scroll | boolean | true | 是否禁止页面滚动。 |
| toggle | boolean | true | 是否允许通过数据属性 data-bs-toggle="offcanvas"
和 data-bs-target
来切换 Offcanvas。 |
| dismiss | boolean | true | 是否允许通过数据属性 data-bs-dismiss="offcanvas"
来关闭 Offcanvas。 |
| focus | boolean | true | 是否将焦点设置为 Offcanvas 内容。 |
| animation | boolean | true | 是否启用动画效果。 |
| autohide | boolean | true | 是否自动隐藏。 |
| placement | string | start | Offcanvas 的位置。可选 start
, end
, top
, bottom
。 |
| container | string|node | body | Offcanvas 的包含元素。你可以传入一个元素的 ID 或 DOM 节点。 |
| element | string|node | null | 触发 Offcanvas 的元素。你可以传入一个元素的 ID 或 DOM 节点。 |
| rootElement | node | null | 设置 Offcanvas 根元素,即 position:fixed
元素的祖先元素。默认为 document.documentElement
。 |
| backdropOpacity | number | 0.5 | 背景遮罩的透明度。 |
| offcanvasBodyClass | string | null | Offcanvas 内容区域的类名。 |
| triggerEvents | array | [] | 触发 Offcanvas 显示的事件名称数组,可选值有 click
, hover
, focus
和 manual
。当设置了 trigger
选项后,toggle
和 dismiss
选项将自动忽略。 |
| relatedTarget | node | null | 触发 Offcanvas 的元素。 |
| onShow | function | null | 显示 Offcanvas 时触发的回调函数。 |
| shown | function | null | 显示 Offcanvas 完毕时触发的回调函数。 |
| onHide | function | null | 隐藏 Offcanvas 时触发的回调函数。 |
| hidden | function | null | 隐藏 Offcanvas 完毕时触发的回调函数。 |
可以在初始化 Offcanvas 时传入选项。
var offcanvas = new bootstrap.Offcanvas(document.querySelector('#offcanvasExample'), {
backdrop: true,
keyboard: true,
scroll: true,
toggle: true,
dismiss: true,
focus: true,
animation: true,
autohide: true,
placement: 'start',
container: 'body',
element: null,
rootElement: document.documentElement,
backdropOpacity: 0.5,
offcanvasBodyClass: null,
triggerEvents: [],
relatedTarget: null,
onShow: function (event) {},
shown: function (event) {},
onHide: function (event) {},
hidden: function (event) {}
})
Offcanvas 插件提供了多个方法,可以使用 JavaScript 调用。
打开 Offcanvas。可以通过参数来设置触发打开 Offcanvas 的元素。
offcanvas.show(relatedTarget)
关闭 Offcanvas。
offcanvas.hide()
切换 Offcanvas 的打开和关闭状态。
offcanvas.toggle()
销毁 Offcanvas 实例。
offcanvas.dispose()
Offcanvas 插件提供了多个事件,可以监听使用 JavaScript 绑定回调函数。
在 Offcanvas 打开前触发。
offcanvasElement.addEventListener('show.bs.offcanvas', function (event) {
// ...
})
在 Offcanvas 打开后触发。
offcanvasElement.addEventListener('shown.bs.offcanvas', function (event) {
// ...
})
在 Offcanvas 关闭前触发。
offcanvasElement.addEventListener('hide.bs.offcanvas', function (event) {
// ...
})
在 Offcanvas 关闭后触发。
offcanvasElement.addEventListener('hidden.bs.offcanvas', function (event) {
// ...
})
Offcanvas 是一个强大的插件,可以让你快速创建一个响应式侧边栏。它具有易用性、灵活性和可定制性。在开发响应式页面时,你一定会用到这个插件。