layui工作学习笔记

墨蓝 2022-02-15 16:25 253阅读 0赞

自己在工作上使用到layui的一些笔记，有的是摘抄自[layui官网][layui]，具体还是到[layui官网][layui]查看文档  
layui的css和bootstrap类似，但是也有一些不同的css，bootstrap默认box-sizing:为border-box;但是layui没有这个默认样式

layui轮播  
html

//layui的轮播
        layui.use('carousel',function () { 
            var carousel = layui.carousel;
            carousel.render({ 
                elem:'#div_carousel',	//对应上面的轮播id
                width:'100%',
                height:'266px',
                arrow:'none',	//左右箭头，在这里是隐藏
                indicator:'none',	//下方的小圆点，在这里是隐藏
                anim:'updown',	//轮播的方式，这里是上下滚动
            });
        });

使用layui的图标，给元素加上class="layui-icon(这个是必须有) layui-icon-rate-half（在layui图标里的class）

layui导航  
html

<ul class="layui-nav layui-nav-tree " style="margin-left: 10px">
    		 
            <li class="layui-nav-item layui-nav-itemed">
              
                <a href="javascript:;">默认展开</a>
                
                <dl class="layui-nav-child">
                    <dd style="color: red"><a href="javascript:;">1</a></dd>
                    <dd style="color: red"><a href="javascript:;">2</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">456</a>
                <dl class="layui-nav-child" >
                    <dd style="color: red"><a href="javascript:;">456</a></dd>
                    <dd style="color: red"><a href="javascript:;">456</a></dd>
                </dl>
            </li>
        </ul>

//注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element',function () { 
            var element = layui.element;
        });

**layui分页**  
html

layui.use('laypage', function(){ 
      var laypage = layui.laypage;
      //执行一个laypage实例
      laypage.render({ 
        elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
        ,count: 50, //数据总数，从服务端得到
         limit:'20', //一页的条数
         jump:function(obj,first){ 
    		//obj包含了当前分页的所有参数
    		//fisrt 加载第一次时的事件
    		console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
    		if(!first){ 	//当页面是首次加载时，不执行操作
         	$.ajax({ ...})	//进行分页的数据加载
        }
    	}
      });
    });

layui点击新增tab选项卡（这个是直接复制官网的，加一些自己理解的东西，也就几个字 笑）

<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="11">网站设置</li>
            <li lay-id="22">用户管理</li>
            <li lay-id="33">权限分配</li>
            <li lay-id="44">商品管理</li>
            <li lay-id="55">订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">内容1</div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">内容5</div>
        </div>
    </div>
    <div class="site-demo-button" style="margin-bottom: 0;">
        <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab项</button>
       
    </div>
    
    layui.use('element', function(){
            var $ = layui.jquery
                ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
            //触发事件
            var active = {
                tabAdd: function(){
                    //新增一个Tab项
                    element.tabAdd('demo', {
                        title: '添加广告位置' //选项卡的名称
                        ,content: `	//选项卡里的内容  注：content可以写成元素形式（<div>...</div>）,也可以写成如下的写好页面的形式
                        <iframe src="" frameborder="0"></iframe>
                        `
                        ,id:1 
                    })
                }
             
            };
    
            $('.site-demo-active').on('click', function(){	
                var othis = $(this), type = othis.data('type');
                active[type] ? active[type].call(this, othis) : '';
            });
        });

在页面中，layui的轮播只能用一次，不能像swiper可以使用多次

layui一个元素同时有表格数据工具条事件和单机或者双击事件时，工具条事件会覆盖其他事件。要使用其他事件，必须在元素上设置一个lay-event=“value”，然后在工具条事件上添加一个判断if(obj.event === ‘value’)\{\} 这样就可以在工具条上使用其他事件。

**最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！**

[layui]: https://www.layui.com/doc/