快速上手 Popper.js

文摘资讯

于 2023-12-26 10:05:59 发布

阅读量421

点赞数

原文链接：https://mp.weixin.qq.com/s?__biz=MzI2ODY0ODM2Ng==&mid=2247490890&idx=1&sn=c4a3abab951e9c62edebb4886e45d5ba&chksm=eb6017ca920204442b1ecf10801df73fa1d0d2e77f6a565ec4ec4ee21da9894391a92268ac20&scene=126&sessionid=0

版权

Popper.js是一个用于解决定位和交互问题的JavaScript库。它主要用于在网页中创建弹出窗口、下拉菜单、工具提示等元素，并确保它们正确地定位和与其他元素进行交互。

Popper.js的主要功能包括：

1、弹出窗口定位：Popper.js可以帮助你将弹出窗口定位到目标元素的附近，例如在按钮旁边显示一个下拉菜单或工具提示。它使用计算和定位算法来确保弹出窗口在不同屏幕尺寸和滚动情况下都能正确地定位。

2、弹出窗口对齐：Popper.js允许你指定弹出窗口的对齐方式，例如在目标元素的上方、下方、左侧或右侧显示。它可以根据目标元素和弹出窗口的尺寸自动调整对齐方式，以确保最佳的可见性和布局。

3、弹出窗口交互：Popper.js还提供了一些功能来处理弹出窗口与其他元素的交互。例如，它可以帮助你在弹出窗口显示时阻止目标元素的点击事件，以避免冲突。它还可以处理弹出窗口在滚动或改变窗口大小时的重新定位。

总之，Popper.js是一个非常有用的库，用于处理弹出窗口的定位和交互。它能够帮助开发者轻松地创建各种弹出式元素，并确保它们在不同情况下都能正确地显示和定位。

Popper.js本身只是一个处理弹出窗口定位和交互的JavaScript库，它并没有提供具体的样式。样式的设计和应用是开发者的责任，你可以根据自己的需求和设计来为弹出窗口添加样式。

Popper.js主要关注于计算和管理弹出窗口的位置，以及处理与其他元素的交互。它通过动态地计算并应用CSS样式来调整弹出窗口的位置和对齐方式。但是，它并不提供具体的外观样式，因为外观样式通常与具体项目的设计和风格相关。

因此，在使用Popper.js时，你需要自己编写或引入适合你项目的CSS样式来为弹出窗口元素添加外观和样式。你可以使用CSS来定义弹出窗口的背景、边框、字体、颜色等样式属性，以及添加过渡效果、动画效果等来增强用户体验。

<!DOCTYPE html>
<html>
  <head>
    <title>Popper Tutorial</title>
    <style>
      #tooltip {
        background: #333;
        color: white;
        font-weight: bold;
        padding: 4px 8px;
        font-size: 13px;
        border-radius: 4px;
        display: none;
      }


      #tooltip[data-show] {
        display: block;
      }


      #arrow,
      #arrow::before {
        position: absolute;
        width: 8px;
        height: 8px;
        background: inherit;
      }


      #arrow {
        visibility: hidden;
      }


      #arrow::before {
        visibility: visible;
        content: '';
        transform: rotate(45deg);
      }


      #tooltip[data-popper-placement^='top'] > #arrow {
        bottom: -4px;
      }


      #tooltip[data-popper-placement^='bottom'] > #arrow {
        top: -4px;
      }


      #tooltip[data-popper-placement^='left'] > #arrow {
        right: -4px;
      }


      #tooltip[data-popper-placement^='right'] > #arrow {
        left: -4px;
      }
</style>
  </head>
  <body>
    <button id="button" aria-describedby="tooltip">My button</button>
    <div id="tooltip" role="tooltip">
      My tooltip
      <div id="arrow" data-popper-arrow></div>
    </div>


    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script>
      const button = document.querySelector('#button');
      const tooltip = document.querySelector('#tooltip');


      const popperInstance = Popper.createPopper(button, tooltip, {
        modifiers: [
          {
            name: 'offset',
            options: {
              offset: [0, 8],
            },
          },
        ],
      });


      function show() {
        // Make the tooltip visible
        tooltip.setAttribute('data-show', '');


        // Enable the event listeners
        popperInstance.setOptions((options) => ({
          ...options,
          modifiers: [
            ...options.modifiers,
            { name: 'eventListeners', enabled: true },
          ],
        }));


        // Update its position
        popperInstance.update();
      }


      function hide() {
        // Hide the tooltip
        tooltip.removeAttribute('data-show');


        // Disable the event listeners
        popperInstance.setOptions((options) => ({
          ...options,
          modifiers: [
            ...options.modifiers,
            { name: 'eventListeners', enabled: false },
          ],
        }));
      }


      const showEvents = ['mouseenter', 'focus'];
      const hideEvents = ['mouseleave', 'blur'];


      showEvents.forEach((event) => {
        button.addEventListener(event, show);
      });


      hideEvents.forEach((event) => {
        button.addEventListener(event, hide);
      });
</script>
  </body>
</html>

文摘资讯

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
快速上手 Popper.js

Popper.js是一个用于解决定位和交互问题的JavaScript库。它主要用于在网页中创建弹出窗口、下拉菜单、工具提示等元素，并确保它们正确地定位和与其他元素进行交互。Popper.js的主要功能包括：1、弹出窗口定位：Popper.js可以帮助你将弹出窗口定位到目标元素的附近，例如在按钮旁边显示一个下拉菜单或工具提示。它使用计算和定位算法来确保弹出窗口在不同屏幕尺寸和滚动情况下都能正确地定...
复制链接

扫一扫