layui工作学习笔记

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

layui轮播
html

				<div class="layui-carousel" id="div_carousel">
                    <div carousel-item>
                        <div>
                            <img lay-src="1.png" alt="...">
                        </div>
                        <div>
                            <img lay-src="2.jpg" alt="...">
                        </div>
                        <div>
                            <img lay-src="1.png" alt="...">
                        </div>
                    </div>
                </div>

js

//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

<!--layui-nav-tree导航垂直样式,不加这个为正常横向导航-->
<ul class="layui-nav layui-nav-tree  "  style="margin-left: 10px">
		<!--layui-nav-itemed为默认展开--> 
        <li class="layui-nav-item layui-nav-itemed">
         <!--layui-nav-item必须要有a标签，不然导航下拉操作实现不了，layui-nav-child也是--> 
            <a href="javascript:;">默认展开</a>
           <!--layui-nav-child为导航的下拉菜单--> 
            <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>

js

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

layui分页
html

<div id="test1"></div>

js

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选项卡（这个是直接复制官网的，加一些自己理解的东西，也就几个字 笑）

<!-- html -->
<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>
<!-- js-->
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’){} 这样就可以在工具条上使用其他事件。

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