moxunpw
/
layui_toolnb


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594
							

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>镜像站@下拉菜单组件</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" tppabs="https://www.layui.com/layuiadmin/std/dist/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" tppabs="https://www.layui.com/layuiadmin/std/dist/layuiadmin/style/admin.css" media="all">
</head>
<body>

  <div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
      <a lay-href="">主页</a>
      <a><cite>组件</cite></a>
      <a><cite>下拉菜单组件</cite></a>
    </div>
  </div>
  
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">初演示</div>
          <div class="layui-card-body">
            
            <div class="layui-btn-container">
              <button class="layui-btn test-dropdown-demo1">
                下拉菜单
                <i class="layui-icon layui-icon-down layui-font-12"></i>
              </button>
              <button class="layui-btn layui-btn-primary test-dropdown-demo1">
                下拉菜单
                <i class="layui-icon layui-icon-down layui-font-12"></i>
              </button>
              <button class="layui-btn" id="test-dropdown-demo100">
                无限层级 + 跳转 + 事件 + 自定义模板
              </button>
            </div>
            
            <div class="layui-inline" style="width: 235px;">
              <input name="" placeholder="在输入框提供一些常用的选项" class="layui-input" id="test-dropdown-demo2">
            </div>
            <div class="layui-inline layui-word-aux layui-font-gray">
              可以绑定任意元素，<a href="javascript:;" class="layui-font-blue" id="test-dropdown-demo3">比如这段文字 <i class="layui-icon layui-font-12 layui-icon-down"></i></a>
            </div>        
            
          </div>
        </div>
      </div>
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">在表格中的应用</div>
          <div class="layui-card-body">
            
            <table class="layui-hide" id="test-dropdown-table"  lay-filter="test-dropdown-table"></table>
            <script type="text/html" id="test-dropdown-toolbar-barDemo">
              <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">编辑</a>
              <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
            </script>
            
          </div>
        </div>
      </div>
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">自定义事件</div>
          <div class="layui-card-body">
            
            <div class="layui-btn-container">
              <button class="layui-btn layui-btn-primary" id="test-dropdown-demo4">
                hover
                <i class="layui-icon layui-icon-more-vertical layui-font-12"></i>
              </button>
              <button class="layui-btn layui-btn-primary" id="test-dropdown-demo5">
                mousedown
                <i class="layui-icon layui-icon-down layui-font-12"></i>
              </button>
              <button class="layui-btn layui-btn-primary" id="test-dropdown-demo6">
                dblclick - 双击
                <i class="layui-icon layui-icon-circle layui-font-12"></i>
              </button>
            </div>
            
          </div>
        </div>
      </div>
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">右键菜单</div>
          <div class="layui-card-body">
            
            <div class="layui-bg-gray" style="height: 260px; text-align: center;" id="test-dropdown-demo7">
              <span class="layui-font-gray" style="position: relative; top:50%;">在此区域单击鼠标右键</span>
            </div>
            <button class="layui-btn" style="margin-top: 15px;" lay-demoactive="rightclick">
              开启全局右键菜单
            </button>
            
          </div>
        </div>
      </div>
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">重定义风格</div>
          <div class="layui-card-body">
            
            <div class="layui-btn-container">
              <button class="layui-btn" id="test-dropdown-demo8">
                重定义样式
                <i class="layui-icon layui-icon-list layui-font-14"></i>
              </button>
              <style>
                .test-dropdown-demo,
                .test-dropdown-demo .layui-menu{background-color: #000; border: none;}
                .test-dropdown-demo .layui-menu li{color: #fff;}
                .test-dropdown-demo .layui-menu li:hover{background-color: #333;}
              </style>
              <button class="layui-btn" id="test-dropdown-demo9">
                重定义内容
                <i class="layui-icon layui-icon-list layui-font-14"></i>
              </button>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script src="../../../layuiadmin/layui/layui.js" tppabs="https://www.layui.com/layuiadmin/std/dist/layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: '../../../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'dropdown', 'util', 'layer', 'table'], function(){
    var dropdown = layui.dropdown
    ,util = layui.util
    ,layer = layui.layer
    ,table = layui.table
    ,$ = layui.jquery;
    
    //初演示
    dropdown.render({
      elem: '.test-dropdown-demo1'
      ,data: [{
        title: 'menu item11'
        ,id: 100
      },{
        title: 'menu item22'
        ,id: 101
      },{
        title: 'menu item33'
        ,id: 102
      }]
      ,click: function(obj){
        layer.tips('点击了：'+ obj.title, this.elem, {tips: [1, '#5FB878']})
      }
    });
    
    //初演示 - 绑定输入框
    dropdown.render({
      elem: '#test-dropdown-demo2'
      ,data: [{
        title: 'menu item 1'
        ,id: 101
      },{
        title: 'menu item 2'
        ,id: 102
      },{
        title: 'menu item 3'
        ,id: 103
      },{
        title: 'menu item 4'
        ,id: 104
      },{
        title: 'menu item 5'
        ,id: 105
      },{
        title: 'menu item 6'
        ,id: 106
      }]
      ,click: function(obj){
        this.elem.val(obj.title);
      }
      ,style: 'width: 235px;'
    });
    
    //初演示 - 绑定文字
    dropdown.render({
      elem: '#test-dropdown-demo3'
      ,data: [{
        title: 'menu item 1'
        ,id: 100
      },{
        title: 'menu item 2'
        ,id: 101
        ,child: [{  //横向子菜单
          title: 'menu item 2-1'
          ,id: 1011
        },{
          title: 'menu item 2-2'
          ,id: 1012
        }]
      },{
        title: 'menu item 3'
        ,id: 102
      },{
        type: '-' //分割线
      },{
        title: 'menu group'
        ,id: 103
        ,type: 'group' //纵向菜单组
        ,child: [{
          title: 'menu item 4-1'
          ,id: 1031
        },{
          title: 'menu item 4-2'
          ,id: 1032
        }]
      },{
        type: '-' //分割线
      },{
        title: 'menu item 5'
        ,id: 104
      },{
        title: 'menu item 5'
        ,id: 104
      }]
      ,click: function(obj){
        this.elem.val(obj.title);
      }
    });
    
    //无限层级
    dropdown.render({
      elem: '#test-dropdown-demo100'
      ,data: [{
        title: 'menu item 1'
        ,templet: '<i class="layui-icon layui-icon-picture"></i> {{d.title}} <span class="layui-badge-dot"></span>'
        ,id: 100
        ,href: '#'
      },{
        title: 'menu item 2'
        ,templet: '<img src="https://sentsin.gitee.io/res/images/demo/layer.png?t=123" style="width: 16px;"> {{d.title}}'
        ,id: 101
        ,href: '/'
        ,target: '_blank'
      }
      ,{type: '-'} //分割线
      ,{
        title: 'menu item 3'
        ,id: 102
        ,type: 'group'
        ,child: [{
          title: 'menu item 3-1'
          ,id: 103
        },{
          title: 'menu item 3-2'
          ,id: 104
          ,child: [{
            title: 'menu item 3-2-1'
            ,id: 105
          },{
            title: 'menu item 3-2-2'
            ,id: 11
            ,type: 'group'
            ,child: [{
              title: 'menu item 3-2-2-1'
              ,id: 111
            },{
              title: 'menu item 3-2-2-2'
              ,id: 1111
            }]
          },{
            title: 'menu item 3-2-3'
            ,id: 11111
          }]
        },{
          title: 'menu item 3-3'
          ,id: 111111
          ,type: 'group'
          ,child: [{
            title: 'menu item 3-3-1'
            ,id: 22
          },{
            title: 'menu item 3-3-2'
            ,id: 222
            ,child: [{
              title: 'menu item 3-3-2-1'
              ,id: 2222
            },{
              title: 'menu item 3-3-2-2'
              ,id: 22222
            },{
              title: 'menu item 3-3-2-3'
              ,id: 2222222
            }]
          },{
            title: 'menu item 3-3-3'
            ,id: 333
          }]
        }]
      }
      ,{type: '-'}
      ,{
        title: 'menu item 4'
        ,id: 4
      },{
        title: 'menu item 5'
        ,id: 5
        ,child: [{
          title: 'menu item 5-1'
          ,id: 55
          ,child: [{
            title: 'menu item 5-1-1'
            ,id: 5555
          },{
            title: 'menu item 5-1-2'
            ,id: 55555
          },{
            title: 'menu item 5-1-3'
            ,id: 555555
          }]
        },{
          title: 'menu item 5-2'
          ,id: 52
        },{
          title: 'menu item 5-3'
          ,id: 53
        }]
      },{type:'-'},{
        title: 'menu item 6'
        ,id: 66
        ,type: 'group'
        ,isSpreadItem: false
        ,child: [{
          title: 'menu item 6-1'
          ,id: 666
        },{
          title: 'menu item 6-2'
          ,id: 6666
        },{
          title: 'menu item 6-3'
          ,id: 66666
        }]
      }]
      ,click: function(item){
        layer.msg(util.escape(JSON.stringify(item)));
      }
    });
    
    
    // dropdown 在表格中的应用
    table.render({
      elem: '#test-dropdown-table'
      ,url: layui.setter.base + '/json/table/demo.js'
      ,title: '用户数据表'
      ,cols: [[
        {type: 'checkbox', fixed: 'left'}
        ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
        ,{field:'username', title:'用户名', width:120, edit: 'text'}
        ,{field:'email', title:'邮箱', minWidth:150}
        ,{fixed: 'right', title:'操作', toolbar: '#test-dropdown-toolbar-barDemo', width:150}
      ]]
      ,page: true
    });
    //监听行工具事件
    table.on('tool(test-dropdown-table)', function(obj){
      var that = this
      ,data = obj.data;
        
      if(obj.event === 'edit'){
        layer.prompt({
          formType: 2
          ,value: data.email
        }, function(value, index){
          obj.update({
            email: value
          });
          layer.close(index);
        });
      } else if(obj.event === 'more'){
        //更多下拉菜单
        dropdown.render({
          elem: that
          ,show: true //外部事件触发即显示
          ,data: [{
            title: 'item 1'
            ,id: 'aaa'
          }, {
            title: 'item 2'
            ,id: 'bbb'
          }, {
            title: '删除'
            ,id: 'del'
          }]
          ,click: function(data, othis){
            //根据 id 做出不同操作
            if(data.id === 'del'){
              layer.confirm('真的删除行么', function(index){
                obj.del();
                layer.close(index);
              });
            } else {
              layer.msg('得到表格下拉菜单 id：'+ data.id);
            }
          }
          ,style: 'margin-left: -45px; box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
        }); 
      }
    });
    
    
    //自定义事件 - hover
    dropdown.render({
      elem: '#test-dropdown-demo4'
      ,trigger: 'hover'
      ,data: [{
        title: 'menu item 1'
        ,id: 100
      },{
        title: 'menu item 2'
        ,id: 101
      },{
        title: 'menu item 3'
        ,id: 102
      }]
    });
    
    //自定义事件 - mousedown
    dropdown.render({
      elem: '#test-dropdown-demo5'
      ,trigger: 'mousedown'
      ,data: [{
        title: 'menu item 1'
        ,id: 100
      },{
        title: 'menu item 2'
        ,id: 101
      },{
        title: 'menu item 3'
        ,id: 102
      }]
    });
    
    //自定义事件 - dblclick
    dropdown.render({
      elem: '#test-dropdown-demo6'
      ,trigger: 'dblclick'
      ,data: [{
        title: 'menu item 1'
        ,id: 100
      },{
        title: 'menu item 2'
        ,id: 101
      },{
        title: 'menu item 3'
        ,id: 102
      }]
    });
    
    //右键菜单
    var inst = dropdown.render({
      elem: '#test-dropdown-demo7' //也可绑定到 document，从而重置整个右键
      ,trigger: 'contextmenu' //contextmenu
      ,isAllowSpread: false //禁止菜单组展开收缩
      ,style: 'width: 200px' //定义宽度，默认自适应
      ,id: 'test777' //定义唯一索引
      ,data: [{
        title: 'menu item 1'
        ,id: 'test'
      }, {
        title: 'Printing'
        ,id: 'print'
      },{
        title: 'Reload'
        ,id: 'reload'
      },{type:'-'},{
        title: 'menu item 3'
        ,id: '#3'
        ,child: [{
          title: 'menu item 3-1'
          ,id: '#1'
        },{
          title: 'menu item 3-2'
          ,id: '#2'
        },{
          title: 'menu item 3-3'
          ,id: '#3'
        }]
      },{type:'-'},{
        title: 'menu item 4'
        ,id: ''
      },{
        title: 'menu item 5'
        ,id: '#1'
      },{
        title: 'menu item 6'
        ,id: '#1'
      }]
      ,click: function(obj, othis){
        if(obj.id === 'test'){
          layer.msg('click');
        } else if(obj.id === 'print'){
          window.print();
        } else if(obj.id === 'reload'){
          location.reload();
        }
      }
    });
    
    //重定义样式
    dropdown.render({
      elem: '#test-dropdown-demo8'
      ,data: [{
        title: 'menu item 1'
        ,id: 100
      },{
        title: 'menu item 2'
        ,id: 101
      },{
        title: 'menu item 3'
        ,id: 103
      },{
        title: 'menu item 4'
        ,id: 104
      },{
        title: 'menu item 5'
        ,id: 105
      },{
        title: 'menu item 6'
        ,id: 106
      }]
      ,className: 'test-dropdown-demo'
      ,ready: function(elemPanel, elem){
        layer.msg('定义了一个 className');
      }
    });
    
    //重定义内容
    dropdown.render({
      elem: '#test-dropdown-demo9'
      ,content: ['<div class="layui-tab layui-tab-brief">'
        ,'<ul class="layui-tab-title">'
          ,'<li class="layui-this">Tab header 1</li>'
          ,'<li>Tab header 2</li>'
          ,'<li>Tab header 3</li>'
        ,'</ul>'
        ,'<div class="layui-tab-content">'
          ,'<div class="layui-tab-item layui-text layui-show"><p style="padding-bottom: 10px;">在 content 参数中插入任意的 html 内容，可替代默认的下拉菜单。 从而实现更多有趣的弹出内容。</p><p> 是否发现，dropdown 组件不仅仅只是一个下拉菜单或者右键菜单，它能被赋予许多的想象可能。</p></div>'
          ,'<div class="layui-tab-item">Tab body 2</div>'
          ,'<div class="layui-tab-item">Tab body 3</div>'
        ,'</div>'
      ,'</div>'].join('')
      ,style: 'width: 370px; height: 200px; padding: 0 15px; box-shadow: 1px 1px 30px rgb(0 0 0 / 12%);'
      ,ready: function(){
        layui.use('element', function(element){
          element.render('tab');
        });
      }
    });
    
    
    //其他操作
    util.event('lay-demoactive', {
      //全局右键菜单
      rightclick: function(othis){
        if(!othis.data('open')){
          dropdown.reload('test777', {
            elem: document //将事件直接绑定到 document
          });
          layer.msg('已开启全局右键菜单，请尝试在页面任意处单击右键。')
          othis.html('取消全局右键菜单');
          othis.data('open', true);
        } else {
          dropdown.reload('test777', {
            elem: '#test-dropdown-demo7' //重新绑定到指定元素上
          });
          layer.msg('已取消全局右键菜单，恢复默认右键菜单')
          othis.html('开启全局右键菜单');
          othis.data('open', false);
        }
      }
    })
  });
  </script>
</body>
</html>