1 Star 8 Fork 0

Angel-小强 / LayUI.dropMenu下拉菜单组件

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

LayUI.dropMenu下拉菜单组件

介绍

LayUI的下拉菜单组件

软件架构

基于LayUI模块化组件

安装教程

layui.config({
    base: '/js/', //拓展模块的根目录
})
.extend({
    dropMenu: '/dropMenu/dropMenu'
});

使用说明

<input type='button' class='layui-btn rowmoreBtn layui-icon layui-icon-more' value="更多"/>

layui.dropMenu.render({
    type:0, //默认0,单击和鼠标经过时都生效,1点击时,2鼠标经过时(非必填)
	elem:".rowmoreBtn", //$(".rowmoreBtn")
	width:"120px", //菜单宽度(非必填)
    css:{"background":"red"}, //菜单样式(非必填)
    location:"c", //下拉菜单依靠位置,c居中、l左、r右(非必填)
    align: "c", //菜单内容文本对齐方式,c居中、l左、r右(非必填)
    //菜单数据,isShow是否显示,可配合权限来显示
	data:[
		{title:'选项1', icon:'layui-icon-set', event:'more1', isShow:true},
		{title:'选项2', icon:'layui-icon-notice', event:'more2'},
		{title:'选项3', icon:'layui-icon-search', event:'more3'},
		{title:'选项1', icon:'layui-icon-friends', event:'more1'},
		{title:'选项2', icon:'layui-icon-console', event:'more2'},
		{title:'选项3', icon:'layui-icon-app', event:'more3'},
		{title:'选项1', icon:'layui-icon-home', event:'more1'},
		{title:'选项2', event:'more2'},
		{title:'选项3', icon:'layui-icon-face-smile', event:'more3', isShow:false}
	],
    //触发的事件(非必填)
	event:{
		more1: function(){
		  alert('触发了事件1');
		},
		more2: function(){
		  alert('触发了事件2');
		},
		more3: function(){
		  alert('触发了事件3');
		}
	},
    //(新增)菜单点击回调事件,返回false不关闭菜单面板,menuObj点击对象、title菜单标题、event事件名称
    menuClick(menuObj, title, event, value) { return false; },
    done:function(dropM){ } //菜单渲染完成后触发事件,dropM下拉菜单对象
});

//事件可以单独用util.event来处理
  layui.util.event('lay-event', {
    more1: function(){
      alert('触发了事件1');
    },
    more2: function(){
      alert('触发了事件2');
    },
    more3: function(){
      alert('触发了事件3');
    }
  });

//事件可以使用table.on('tool')工具条事件来处理
   layui.table.on(`tool(mytable)`, function(obj){ 
        var layEvent= obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
        var row = obj.data; //获得当前行数据
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
        if(layEvent === 'more1'){
            alert('触发了事件1');
        } 
        else if(layEvent === 'more2'){
            alert('触发了事件2');
        }
   });

//跟layui.table结合,用lay-events标签动态显示菜单内容,没有lay-events标签则显示全部菜单
 <!-- 行操作栏 -->
 <script type="text/html" id="rowtool">
    <div class='layui-inline'>
      <input type='button' class='layui-btn' value="编辑" lay-event="edit"/>
    </div>
    {{#  if(d.is_canDel){ }}
        <input type='button' class='layui-btn layui-btn-xs layui-btn-primary rowmoreBtn' value='更多' lay-events="viewinfo,delete"/>
    {{#  } else { }}
        <input type='button' class='layui-btn layui-btn-xs layui-btn-primary rowmoreBtn' value='更多' lay-events="neworder,recycle"/>
    {{#  } }}
 </script>

//要在table渲染完成之后,done()方法里面渲染dropMenu
layui.table.render({
    elem: '#demo',
    url: '/demo/table/user/',
    page: true,
    cols: [[        
        { field: 'button', title: '操作', align:'center', width: "110", fixed: true, toolbar: '#rowtool' },
        { field: 'id', title: 'ID', align: 'center', width: 120},
        { field: 'name', title: '名称', align: 'center', width: 180 },
    ]],
    done(){
        layui.dropMenu.render({
             elem:".rowmoreBtn",
             data:[
		     {title:'查看', icon:'layui-icon-set', event:'viewinfo'},
		     {title:'删除', icon:'layui-icon-delete', event:'delete'},
                     {title:'新建订单', icon:'layui-icon-add-circle', event:'neworder'},
                     {title:'放入回收站', icon:'layui-icon-cart', event:'recycle'},
             ]
        });
    }
});

//跟input文本框结合使用,做成下拉文本框
layui.dropMenu.render({
    elem: $(layero).find("#domainurl"),
    type: 1,
    location: "r",
    width: "160px",
    data: [
        { title: '192.168.2.56 : 9102', event: 'event1', value:'192.168.2.56:9102'},
        { title: '测试服务器1', event: 'event2', value:'127.0.0.1:9102' },
        { title: '测试服务器2', event: 'event3', value:'127.0.0.1:9002' },
    ],
    menuClick(menuObj, title, event, value) {
        var ip = value.split(":")[0];
        var port = value.split(":")[1];
        $(layero).find("#domainurl").val(ip);
        $(layero).find("#domainport").val(port);
    }
});

效果图

输入图片说明
输入图片说明
输入图片说明
输入图片说明
输入图片说明

特技

  1. 使用 Readme_XXX.md 来支持不同的语言,例如 Readme_en.md, Readme_zh.md
  2. Gitee 官方博客 blog.gitee.com
  3. 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
  4. GVP 全称是 Gitee 最有价值开源项目,是综合评定出的优秀开源项目
  5. Gitee 官方提供的使用手册 https://gitee.com/help
  6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/

Comments ( 8 )

Sign in for post a comment

About

No description expand collapse
JavaScript and 2 more languages
Cancel

Releases

No release

LayUI.dropMenu下拉菜单组件

Contributors

All

Activities

load more
can not load any more
JavaScript
1
https://gitee.com/fkdexq/LayUI.dropMenu.git
git@gitee.com:fkdexq/LayUI.dropMenu.git
fkdexq
LayUI.dropMenu
LayUI.dropMenu下拉菜单组件
master

Search

105716 1d94204e 1850385 105716 2d26be5c 1850385