木灵鱼儿

木灵鱼儿

阅读：4805

最后更新：2020/09/26/ 17:42:10

layui框架 dropdown 模块

找了半天没找到一个合适的dropdown模块，本来就很简单的需求，就是希望在hover的时候能显示一个二维码小窗口出来，实在无奈，自己造了个模块用了。

预览图

支持

  1. 四个方向
  2. 简单快速

使用方式

资源下载： 蓝奏云 密码:6szx

下载模块，layui使用自定义模块不用多说吧，不知道看我博客发布的layui模块文章，然后自己把对应的样式css单独引入就行了。

html格式

<div class="layui-dropdown" id="dropdown">
  <button class="layui-dropdown-toggle">触发按钮</button>
  <div class="layui-dropdown-popper dropdown-top">
    ...显示的内容
  </div>  
</div>

html元素可以自己自定义，没必要限制在上面例子的元素，然后弹窗的大小是根据显示内容的大小而定的，本身没有限制，所有写的时候注意自己设置好css

控制方向

有四个class类：

  1. dropdown-top
  2. dropdown-bottom
  3. dropdown-left
  4. dropdown-right

如果你需要修改方向，在layui-dropdown-popper上加上对应的方向类就行了，必须要写，我没弄默认，只能存在一个方向类。

例：

<div class="layui-dropdown-popper dropdown-left">
    ...显示的内容
</div>

js

layui.use("dropdown",function(){
  const dropdown = layui.dropdown; //dropdown

  dropdown({
      el: "#dropdown"
    });
});

dropdown支持两个参数，一个是el，是容器的jq选择器，第二个是time，表示动画时间

 dropdown({
      el: "#dropdown"   //必须填写
      time: 300  //默认300,可以不设置
    });

到这里就结束了，有兴趣可以自己二开。

文章分类 Layui
文章标签 模块dropdownlayui
木灵鱼儿

木灵鱼儿

发布了 716 篇文章获得点赞 0获得阅读 4805

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three
  1. 1
    1
    Google Chrome Windows 10

    写的不错

    回复
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @1

      Σ( ￣□￣||)

      回复

关于作者

站点职位 博主
获得点赞 0
文章被阅读 4805

相关文章

利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类
利用typescript实现原生css变量的主题切换功能类利用typescript实现原生css变量的主题切换功能类
typecho主题开发：基于webpack5的多页面打包项目typecho主题开发：基于webpack5的多页面打包项目