建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS定位插件popper.js

来源:易助科技网浏览量:141收藏

简介


Popper.js是一款功能强大的JS定位引擎,旨在提供一个可靠且可扩展的定位引擎,您可以使用它来确保所有 popper 元素都定位在正确的位置。它将定位从文档流中“弹出”并漂浮在目标元素附近的任何 UI 元素。 最常见的示例是工具提示,但它也包括弹出窗口、下拉菜单等。 所有这些都可以概括地描述为“popper”元素。

Popper 用于流行的库,如 Bootstrap、Foundation、Material UI 等。在过去几年的中,您可能已经在网络上使用过由 Popper 定位的 popper 元素。由于我们现在使用强大的抽象库(例如 React 或 Angular)编写 UI, Popper 可以与它们完全集成并与您的其他组件一起构建很好的应用。


JS定位插件popper.js-示例图



使用


1.  引入popper.js文件。


2.  HTML


<style>
#tooltip {background-color: #333;color: white;padding: 5px 10px;border-radius: 4px;font-size: 13px;}
</style>

<button id="button" aria-describedby="tooltip">
  I'm a button
</button>
<div id="tooltip" role="tooltip">
  I'm a tooltip
</div>


3.  调用


<script src="https://unpkg.com/@popperjs/core@2"></script>

<script>
  const button = document.querySelector('#button');
  const tooltip = document.querySelector('#tooltip');
  // 传递按钮、工具提示和一些选项,Popper 将执行
  // 神奇的定位
  
  Popper.createPopper(button, tooltip, {
    placement: 'right',
  });
</script>



相关链接


官网 :https://popper.js.org/

GitHub 地址 :  https://github.com/popperjs/popper-core