bootstrap Offcanvas使用方法以及JS调用Offcanvas

Song93 次浏览0个评论2021年09月20日
js控制bootstrap的Offcanvas的显示隐藏等;bootstrap Offcanvas文档教程。

Offcanvas是一个边栏组件,可以通过JavaScript进行切换,从视口的左、右或下边缘显示。按钮或锚定被用作附加到您切换的特定元素的触发器,数据属性被用于调用我们的JavaScript。

演示案例

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<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">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

JS控制Offcanvas

1、Js控制

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
# 显示Offcanvas
bsOffcanvas.show();
  • toggle 将offcanvas元素切换为显示或隐藏。在offcanvas元素实际显示或隐藏之前(即在Showed.bs.offcanvas或hidden.bs.offcanvas事件发生之前)返回调用方。
  • show 显示Offcanvas
  • hide 隐藏Offcanvas
  • getInstance 静态方法,该方法允许您获取与DOM元素关联的offcanvas实例
  • getOrCreateInstance 静态方法,该方法允许您获取与DOM元素关联的offcanvas实例,或者在未初始化的情况下创建一个新实例

2、JS监听Offcanvas状态

  • show.bs.offcanvas 调用show instance方法时,此事件立即激发。
  • shown.bs.offcanvas 当用户看到offcanvas元素时(将等待CSS转换完成),将触发此事件。
  • hide.bs.offcanvas 调用hide方法后,将立即触发此事件。
  • hidden.bs.offcanvas 当对用户隐藏offcanvas元素时(将等待CSS转换完成),将触发此事件。
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

参考文档Offcanvas

请登录后评论
    当前暂无评价,快来发表您的观点吧...
    公告提示
    本站主要用于学习交流Laravel技术,分享Laravel优秀案例;同时非常欢迎大家投稿哦!如果有招聘信息也可以联系我我帮忙发布哦!