layui框架 dropdown 模块

137 2

找了半天没找到一个合适的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,可以不设置
    });

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

0
  • 本文分类:Layui
  • 本文标签:模块dropdownlayui
  • 流行热度:已超过 137 人围观了本文
  • 最后更新:2020年09月26日 - 17时42分10秒
  • 发布日期:2020年09月26日 - 17时39分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码