jQuery powerFloat万能浮动层下拉层插件使用介绍

jQuery powerFloat浮动层插件使用介绍

简介

jQuery powerFloat是一款高度可定制性的浮动层插件，提供了多种浮动层效果和选项，可以实现鼠标悬停或点击触发的弹出框、下拉菜单、提示层等功能。使用powerFloat插件可以快速地为网站添加浮动层效果，提升交互体验。

使用方法

引入文件

在网页中引入jQuery库和powerFloat库。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/powerFloat/1.0.6/powerFloat.min.js"></script>

HTML代码

为了触发powerFloat的显示，需要在HTML代码中定义一个触发器元素，并为其设置class属性。对于下拉层，需要在触发器元素之后添加一个下拉层DIV，用于显示下拉内容。

<!--触发器元素-->
<button class="trigger">点击显示下拉层</button>

<!--下拉层-->
<div class="dropdown"> 
    <ul>
      <li><a href="#">菜单项1</a></li>
      <li><a href="#">菜单项2</a></li>
      <li><a href="#">菜单项3</a></li>
    </ul>
</div>

JS代码

使用powerFloat插件初始化下拉层：

$(function(){
    $('.trigger').powerFloat({
        target: '.dropdown', //下拉层的选择器，必填项
        position: '3-4', //定位方式，可选项
        edgeAdjust: false, //是否调整下拉层位置，可选项
        eventType: 'click', //触发方式，可选项
        showDelay:100, //鼠标悬停多少毫秒后显示，可选项
        hideDelay:100 //鼠标移出多少毫秒后隐藏，可选项
    });
});

这样就完成了下拉层的初始化。

示例说明

示例一：鼠标悬停显示下拉层

<button class="trigger">鼠标悬停</button>

<div class="dropdown">
    <p>内容1</p>
    <p>内容2</p>
    <p>内容3</p>
</div>

$(function(){
    $('.trigger').powerFloat({
        target: '.dropdown',
        position: '5-7',
        eventType: 'hover',
        showDelay: 0,
        hideDelay: 0
    });
});

鼠标悬停在按钮上，下拉层数秒后显示。鼠标移开后，下拉层隐藏。

示例二：右键菜单

<button class="trigger">右键菜单</button>

<div class="dropdown">
    <ul>
        <li><a href="#">编辑</a></li>
        <li><a href="#">剪切</a></li>
        <li><a href="#">复制</a></li>
        <li><a href="#">粘贴</a></li>
    </ul>
</div>

$(function(){
    $('.trigger').powerFloat({
        target: '.dropdown',
        position: '7-9',
        eventType: 'contextmenu',
        showDelay: 0,
        hideDelay: 0,
        hoverHold:true
    });
});

在按钮上右键，即可显示下拉菜单。菜单项支持hover效果，鼠标离开菜单后，菜单项高亮效果消失，但是菜单不会消失，直到再次右键才会隐藏。