信息
最新版本
2.5.6,2020-01-15 [4]
类    型
开源的模块化前端 UI 框架 [1]
面向人群
后端开发者,前端工程师
优    点
原生开发模式、模块化、兼容性强 [3]
外文名
layui [1]
作    者
贤心 [2]
layui存在价值
事实上,layui更多是面向于后端开发者,所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式,却又并非受限于 CommonJS 的那些条条框框,它拥有自己的模式,更加轻量和简单。layui 定义为“经典模块化”,并非是刻意强调“模块”理念本身,而是有意避开当下 JS 社区的主流方案,试图以尽可能简单的方式去诠释高效!它的所谓经典,是在于对返璞归真的执念,它以当前浏览器普通认可的方式去组织模块! layui 认为这种轻量的组织方式,仍然可以填补 WebPack 以外的许多场景。所以它坚持采用经典模块化,也正是能让人避开工具的复杂配置,重新回归到原生态的 HTML/CSS/JavaScript本身! [3] 
收起全文
精华内容
参与话题
问答
  • 搭建layUI框架(一)

    千次阅读 2019-02-18 11:59:25
    因为工作需要开发一个后端系统,用layUI,虽然这想UI出来有一段时间了,同时也比较火,但是没有用过,以前用的UI都是easyUI,或者自己画的UI,等之类的框架,本人觉得还是很不错的,当然以前的一些框架也很不错!...

    因为工作需要开发一个后端系统,用layUI,虽然这想UI出来有一段时间了,同时也比较火,但是没有用过,以前用的UI都是easyUI,或者自己画的UI,等之类的框架,本人觉得还是很不错的,当然以前的一些框架也很不错!废话不多说,上代码,哈哈

    1,引用layui的js文件和Css文件就不说了,自己官网下载 https://www.layui.com/

    2,页面框架搭建

    2.1样式部分

    <style>
        .logo-pic {
            float:left;
            height:43px;
            margin-top:5px;
            margin-left:5px;
        }
        .school-name{
            position:fixed;
            top:32px;
            left:97px;
            font-size:10px;
            font-weight:600;
            line-height:14px;
            margin-left:-45px;
            color:#eeeeee;
            
        }
    
        .rightmenu {
            position: absolute;
            width: 80px;
            z-index: 9999;
            display: none;
            background-color: #fff;
            padding: 2px;
            color: #333;
            border: 1px solid #eee;
            border-radius: 2px;
            cursor: pointer;
        }
    
            .rightmenu li {
                text-align: center;
                display: block;
                height: 25px;
                line-height: 25px;
            }
    
                .rightmenu li:hover {
                    background-color: #666;
                    color: #fff;
                }
    
    
        .layui-tab-title li:hover {
            background-color: #009688;
            color:white;
        }
    
        .layui-tab-titleAdd {
            background-color: #009688;
            color: white;
        }
    
    </style>

    2.2页面布局,完成,菜单部分用的json动态生成,在实际开发中可以扩展,菜单的配置从数据库中读取 

    <div class="layui-layout layui-layout-admin kit-layout-admin">
        <div class="layui-header">
            <div class="layui-logo"><a href=""><img class="logo-pic" src="~/Content/images/logo3.png" /><div class="school-name" id="school-name"></div></a></div>
            <div class="layui-logo kit-logo-mobile">logo</div>
            <ul class="layui-nav layui-layout-left kit-nav" lay-filter="TopMenu" kit-one-level></ul>
            <ul class="layui-nav kit-nav layui-layout-right">
                 
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="~/Content/images/noPic3.png" class="layui-nav-img"> @ViewBag.AccountName
                    </a>
    
                </li>
    
                <li class="layui-nav-item" id="logoff"><a href="javascript:logoff();"><i class="fa fa-power-off" aria-hidden="true"></i> 退出</a></li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black kit-side">
            <div class="layui-side-scroll">
                
                <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
                <ul id="nav" class="layui-nav layui-nav-tree " lay-filter="LeftMenu" kit-navbar>
                    
    
                </ul>
            </div>
        </div>
    
    
        <!--左侧菜单-->
     
    
        <script>
     
    
            var data = [
                {
                    "mid": 1,
                    "menuName": "商户管理",
                    "alink": "/Home/Main",
                    "pareMenuId": 0
                },
                {
                    "mid": 2,
                    "menuName": "商户信息",
                    "alink": "/BusinessmanMng/index",
                    "pareMenuId": 1
                },
                {
                    "mid": 6,
                    "menuName": "设备管理", 
                    "alink": "/DeviceMNG/index",  
                    "pareMenuId": 1
                },
                {
                    "mid": 3,
                    "menuName": "aa会",
                    "alink": "",
                    "pareMenuId": 0
                },
                {
                    "mid": 4,
                    "menuName": "用户备案",
                    "alink": "/GWH/Index",
                    "pareMenuId": 3
                },
                {
                    "mid": 5,
                    "menuName": "推车管理",
                    "alink": "/GWH/CarMang",
                    "pareMenuId": 3
                }
            ]
    
    
            var menu = ""; //定义变量存储
            for (var i = 0; i < data.length; i++) {
                menu += "<li class='layui-nav-item'>"
                if (data[i].pareMenuId == 0) { //取出父元素的菜单,拼进页面
                    menu += "<a href='javascript:;'>" + data[i].menuName + "</a>"
                    for (var j = 0; j < data.length; j++) { //继续遍历这几条数据
                        /*  if (data[j].mid > data[i].mid && data[j].mid < (data[i].mid) + 1000) {*/ //取出这个父元素所对应的子元素
                        if (data[j].pareMenuId == data[i].mid) {
                            menu += "<dl class='layui-nav-child' data-id=" + data[j].mid + " data-url=" + data[j].alink + " data-title=" + data[j].menuName +">"
                            menu += "<dd>"
                            //menu += "<a href='" + data[j].alink + "'  target='option'>" + '     ' + data[j].menuName + "</a>"
                            menu += "<a   target='option'>" + '     ' + data[j].menuName + "</a>"
                            menu += "</dd>"
                            menu += "</dl>"
                        }
                    }
                }
                menu += "</li>";
            }
    
    
            $("#nav").html(menu);
    
            $("#nav li:eq(1)").removeClass("layui-nav-item").addClass("layui-nav-item layui-nav-itemed");
    
        </script>
    
        <!-- 鼠标右键-->
        <ul class="rightmenu">
            <li data-type="closethis">关闭当前</li>
            <li data-type="closeall">关闭所有</li>
        </ul>
    
        <!-- 内容主体区域 -->
        <div class="layui-body" id="container" >
    
            <!-- <div style="padding: 15px;"><i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop">&#xe63e;</i> 请稍等...</div> -->
            <div class="layui-tab" lay-filter="demo" lay-allowclose="true"  style="margin:0; background-color:white;">
                <ul class="layui-tab-title"></ul>
                <div class="layui-tab-content"></div>
            </div> 
            
        </div>
    
    </div>

    2.3接下来是关键性的脚本

     layui.use('element', function () {
                 var $ = layui.jquery;
                 var element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
    
                 //触发事件
                 var active = {
                     //在这里给active绑定几项事件,后面可通过active调用这些事件
                     tabAdd: function (url, id, name) {
                         //新增一个Tab项 传入三个参数,分别对应其标题,tab页面的地址,还有一个规定的id,是标签中data-id的属性值
                         //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                         element.tabAdd('demo', {
                             title: name,
                             //content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '.html" style="width:100%;height:99%;"></iframe>',
                             content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>',
                             id: id //规定好的id
                         })
                         CustomRightClick(id); //给tab绑定右击事件
                         FrameWH();  //计算ifram层的大小
                     },
                     tabChange: function (id) {
                         //切换到指定Tab项
                         element.tabChange('demo', id); //根据传入的id传入到指定的tab项
                     },
                     tabDelete: function (id) {
                         element.tabDelete("demo", id);//删除
                     }
                     , tabDeleteAll: function (ids) {//删除所有
                         $.each(ids, function (i, item) {
                             element.tabDelete("demo", item); //ids是一个数组,里面存放了多个id,调用tabDelete方法分别删除
                         })
                     }
                 };
    
    
     //左侧菜单栏中内容 ,触发点击事件
                 $('#nav .layui-nav-child').on('click', function () {
                     var dataid = $(this);
    
                     //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目,即已经打开的tab项数目
                     if ($(".layui-tab-title li[lay-id]").length <= 0) {
                         //如果比零小,则直接打开新的tab项
                         active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                     } else {
                         //否则判断该tab项是否以及存在
    
                         var isData = false; //初始化一个标志,为false说明未打开该tab项 为true则说明已有
                         $.each($(".layui-tab-title li[lay-id]"), function () {
                             //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到,则说明该tab项已经打开
                             if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                                 isData = true;
                             }
                         })
                         if (isData == false) {
                             //标志为false 新增一个tab项
                             active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                         }
                     }
                     //最后不管是否新增tab,最后都转到要打开的选项页面上
                     active.tabChange(dataid.attr("data-id"));
                 });
    
    function CustomRightClick(id) {
                     //取消右键  rightmenu属性开始是隐藏的 ,当右击的时候显示,左击的时候隐藏
                     $('.layui-tab-title li').on('contextmenu', function () { return false; })
                     $('.layui-tab-title,.layui-tab-title li').click(function () {
                         $('.rightmenu').hide();
                     });
                     //桌面点击右击 
                     $('.layui-tab-title li').on('contextmenu', function (e) {
                         var popupmenu = $(".rightmenu");
                         popupmenu.find("li").attr("data-id", id); //在右键菜单中的标签绑定id属性
    
                         //判断右侧菜单的位置 
                         l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
                         t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
                         popupmenu.css({ left: l, top: t }).show(); //进行绝对定位
                         //alert("右键菜单")
                         return false;
                     });
                 }
    
    
    $(".rightmenu li").on("click", function () { 
                     //右键菜单中的选项被点击之后,判断type的类型,决定关闭所有还是关闭当前。
                     if ($(this).attr("data-type") == "closethis") {
                         //如果关闭当前,即根据显示右键菜单时所绑定的id,执行tabDelete
                         active.tabDelete($(this).attr("data-id"))
                     } else if ($(this).attr("data-type") == "closeall") {
                         var tabtitle = $(".layui-tab-title li");
                         var ids = new Array();
                         $.each(tabtitle, function (i) {
                             ids[i] = $(this).attr("lay-id");
                         })
                         //如果关闭所有 ,即将所有的lay-id放进数组,执行tabDeleteAll
                         active.tabDeleteAll(ids);
                     }
    
                     $('.rightmenu').hide(); //最后再隐藏右键菜单
                 })
    
    
                 function FrameWH() {
                     var h = $(window).height() - 41 - 10 - 60 - 10 - 44 - 10;
                     $("iframe").css("height", h + "px");
                 }
    
                 $(window).resize(function () {
                     FrameWH();
                 })
             });
    
    function CustomRightClick(id) {
                 //取消右键 
                 $('.layui-tab-title li').on('contextmenu', function () { return false; })
                 $('.layui-tab-title,.layui-tab-title li').click(function () {
                     $('.rightmenu').hide();
                 });
                 //桌面点击右击 
                 $('.layui-tab-title li').on('contextmenu', function (e) {
                     var popupmenu = $(".rightmenu");
                     popupmenu.find("li").attr("data-id", id);
                     l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
                     t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
                     popupmenu.css({ left: l, top: t }).show();
                     //alert("右键菜单")
                     return false;
                 });
             }

    到这里layui 布局搭建就基本完成了

    看下效果

    2,接下来看看在功能页的一些要注意的地方,点击商户信息

    效果是这样子的,那么怎么实现呢,,下一章介绍

    展开全文
  • 使用Layui搭建后台管理界面

    万次阅读 多人点赞 2019-08-05 21:56:20
    Layui是一个样式比较丰富艳丽的UI框架,通过自学了相关api文档,自己手工搭建了一个后台管理页面。页面布局是常用的一套,上面是一个logo,左边区域是一个导航,中间是内容tab页,底部是版权信息,好了,看代码吧!&...

    Layui是一个样式比较丰富艳丽的UI框架,通过自学了相关api文档,自己手工搭建了一个后台管理页面。页面布局是常用的一套,上面是一个logo,左边区域是一个导航,中间是内容tab页,底部是版权信息,好了,看代码吧!

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>黄宝康个人搭建的后台管理页面</title>
        <link rel="stylesheet" href="css/layui.css">
        <script src="layui.js"></script>
    </head>
    <body>
        <div class="layui-layout-admin">
            <!--头部-->
            <div class="layui-header">
                <div class="layui-logo">Huang BaoKang</div>
                <ul class="layui-nav layui-layout-left">
                    <li class="layui-nav-item"><a href="javascript:void(0)">控制台</a></li>
                    <li class="layui-nav-item"><a href="javascript:;">商品管理</a></li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">其他系统</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">邮件管理</a></dd>
                            <dd><a href="javascript:;">消息管理</a></dd>
                            <dd><a href="javascript:;">授权管理</a></dd>
                        </dl>
                    </li>
                </ul>
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item">
                        <a href=""><img src="http://m.zhengjinfan.cn/images/0.jpg" class="layui-nav-img">Huang BaoKang</a>
                        <dl class="layui-nav-child">
                            <dd><a href="">基本资料</a></dd>
                            <dd><a href="">安全设置</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
            
            <!--左侧-->
            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    <ul class="layui-nav layui-nav-tree" lay-filter="hbkNavbar">
                        <li class="layui-nav-item">
                            <a href="javascript:;">基本元素</a>
                            <dl class="layui-nav-child">
                                <dd lay-id="111"><a href="javascript:;" data-options="{url:'test.html',title:'表格'}">表格</a></dd>
                                <dd><a href="">表单</a></dd>
                                <dd><a href="">导航栏</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item layui-nav-itemed">
                            <a href="">组件</a>
                            <dl class="layui-nav-child">
                                <dd><a href="">Navbar</a></dd>
                                <dd><a href="">Tab</a></dd>
                                <dd><a href="">OneLevel</a></dd>
                                <dd><a href="">app.js主入口</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="">表格</a>
                        </li>
                        <li class="layui-nav-item">
                            <a href="">表单</a>
                        </li>
                    </ul>
                </div>
            </div>
    
            <!--中间主体-->
            <div class="layui-body" id="container">
                <div class="layui-tab" lay-filter="tabs" lay-allowClose="true">
                    <ul class="layui-tab-title">
                        <li class="layui-this">首页</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">首页内容</div>
                    </div>
                </div>
            </div>
    
            <!--底部-->
            <div class="layui-footer">
                <center>黄宝康版权所有&copy;Tel:18679758769</center>
            </div>
        </div>
    <script>
        //JavaScript代码区域
        layui.use('element', function(){
            var element = layui.element;
            element.on('nav(hbkNavbar)',function(elem){
                /*使用DOM操作获取超链接的自定义data属性值*/
                var options = eval('('+elem.context.children[0].dataset.options+')');
                var url = options.url;
                var title = options.title;
                element.tabAdd('tabs',{
                    title : title,
                    content : '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>',
                    id : '111'
                });
            });
            /*使用下面的方式需要引用jquery*/
           /* $('.layui-nav-child a').click(function () {
                var options = eval('('+$(this).data('options')+')');
                var url = options.url;
                var title = options.title;
                element.tabAdd('tabs',{
                    title : title,
                    content : '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>'
                });
            });*/
        });
    </script>
    </body>
    </html>
    

    代码布局都加入了相关注释,很好理解,需要说明的是,中间增加Tab使用DOM元素获取a标签的data属性,tab页内容主体采用的iframe,真正项目应用中,只需要关注url,比如常用的后台框架Jfinal,只需要render下即可。

    页面效果如下:(截图时缩放了浏览器),项目只引入了layui的css和js,没有第三方的,小伙伴们,可以参考哦,觉得不错,记得点赞哦-

    这里写图片描述

    ###专业墙纸贴纸厨房用具装饰出售,本人网店经营
    博客对你有用记得访问下哦,增加下访问量,如有需要可以下单购买哦_https://item.taobao.com/item.htm?id=569617707364

    展开全文
  • Layui简单使用总结

    万次阅读 多人点赞 2018-05-27 19:02:04
    Layui使用总结 Layui是什么? layer,一个可以让你想到即可做到的web弹窗(层)解决方案(js组件),作者贤心。layer侧重于用户灵活的自定义,为不同人的使用习惯提供动力。其意义在于,可以让您的页面拥有更...

    Layui使用总结

    Layui是什么?

    layer,一个可以让你想到即可做到的web弹窗(层)解决方案(js组件),作者贤心。layer侧重于用户灵活的自定义,为不同人的使用习惯提供动力。其意义在于,可以让您的页面拥有更丰富与便捷的操作体验,而您只需在调用时简单地配置相关参数,即可轻松实现。—–来自百度百科

    根据layer组件使用人数,就可以看出layui框架是非常不错的,接下来我们就开启layui之旅吧!
    liyu

    Layui的结构

    
    ├─css //css目录
      │  │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
      │  │  ├─laydate
      │  │  ├─layer
      │  │  └─layim
      │  └─layui.css //核心样式文件
      ├─font  //字体图标目录
      ├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
      │─lay //模块核心目录
      │  └─modules //各模块组件
      │─layui.js //基础核心库
      └─layui.all.js //包含layui.js和所有模块的合并文件
    

    layui内置模块
    这里写图片描述

    下面列出我感觉比较重要的几个组件模块,毕竟不是专门从事前端的。
    这里写图片描述

    获取Layui

    通过Layui官网获取,详情请参考layui官网。

    Layer弹层之美

    我们也可以通过访问Layer来获取,获取到layer组件后导入项目中。具体步骤结构参考下图:
    1.在页面中引入jQuery框架
    2.将下载的layer文件夹完整复制到项目中
    3.引入layer目录下的layer.js文件
    4.开启layer弹层之旅

    这里写图片描述

    初体验

     <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <title>layer弹层之美</title>
      <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
      <script type="text/javascript" src="layer/layer.js" ></script>
    </head>
    <script type="text/javascript">
          $(function(){
    
            $("#btn").click(function(){
                 //询问框
                            layer.confirm('您是如何看待前端开发?', {
                              btn: ['重要','奇葩'] //按钮
                            }, function(){
                              layer.msg('的确很重要', {icon: 1});
                            }, function(){
                              layer.msg('也可以这样', {
                                time: 20000, //20s后自动关闭
                                btn: ['明白了', '知道了']
                              });
                            });
            })
          })
    </script>
    <body>
        <input type="button" value="提交" id="btn"/>
    </body>
    </html>

    这里只做了简单的演示,更多弹层实现请参考Layer官网 具体代码贴出。

    //初体验
    layer.alert('内容')
    //第三方扩展皮肤
    layer.alert('内容', {
      icon: 1,
      skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,去这里查阅
    })
    //询问框
    layer.confirm('您是如何看待前端开发?', {
      btn: ['重要','奇葩'] //按钮
    }, function(){
      layer.msg('的确很重要', {icon: 1});
    }, function(){
      layer.msg('也可以这样', {
        time: 20000, //20s后自动关闭
        btn: ['明白了', '知道了']
      });
    });
    //提示层
    layer.msg('玩命提示中');
    //墨绿深蓝风
    layer.alert('墨绿风格,点击确认看深蓝', {
      skin: 'layui-layer-molv' //样式类名
      ,closeBtn: 0
    }, function(){
      layer.alert('偶吧深蓝style', {
        skin: 'layui-layer-lan'
        ,closeBtn: 0
        ,anim: 4 //动画类型
      });
    });
    //捕获页
    layer.open({
      type: 1,
      shade: false,
      title: false, //不显示标题
      content: $('.layer_notice'), //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
      cancel: function(){
        layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', {time: 5000, icon:6});
      }
    });
    //页面层
    layer.open({
      type: 1,
      skin: 'layui-layer-rim', //加上边框
      area: ['420px', '240px'], //宽高
      content: 'html内容'
    });
    //自定页
    layer.open({
      type: 1,
      skin: 'layui-layer-demo', //样式类名
      closeBtn: 0, //不显示关闭按钮
      anim: 2,
      shadeClose: true, //开启遮罩关闭
      content: '内容'
    });
    //tips层
    layer.tips('Hi,我是tips', '吸附元素选择器,如#id');
    //iframe层
    layer.open({
      type: 2,
      title: 'layer mobile页',
      shadeClose: true,
      shade: 0.8,
      area: ['380px', '90%'],
      content: 'mobile/' //iframe的url
    }); 
    //iframe窗
    layer.open({
      type: 2,
      title: false,
      closeBtn: 0, //不显示关闭按钮
      shade: [0],
      area: ['340px', '215px'],
      offset: 'rb', //右下角弹出
      time: 2000, //2秒后自动关闭
      anim: 2,
      content: ['test/guodu.html', 'no'], //iframe的url,no代表不显示滚动条
      end: function(){ //此处用于演示
        layer.open({
          type: 2,
          title: '很多时候,我们想最大化看,比如像这个页面。',
          shadeClose: true,
          shade: false,
          maxmin: true, //开启最大化最小化按钮
          area: ['893px', '600px'],
          content: '//fly.layui.com/'
        });
      }
    });
    //加载层
    var index = layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
    //loading层
    var index = layer.load(1, {
      shade: [0.1,'#fff'] //0.1透明度的白色背景
    });
    //小tips
    layer.tips('我是另外一个tips,只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
      tips: [1, '#3595CC'],
      time: 4000
    });
    //prompt层
    layer.prompt({title: '输入任何口令,并确认', formType: 1}, function(pass, index){
      layer.close(index);
      layer.prompt({title: '随便写点啥,并确认', formType: 2}, function(text, index){
        layer.close(index);
        layer.msg('演示完毕!您的口令:'+ pass +'<br>您最后写下了:'+text);
      });
    });
    //tab层
    layer.tab({
      area: ['600px', '300px'],
      tab: [{
        title: 'TAB1', 
        content: '内容1'
      }, {
        title: 'TAB2', 
        content: '内容2'
      }, {
        title: 'TAB3', 
        content: '内容3'
      }]
    });
    //相册层
    $.getJSON('test/photos.json?v='+new Date, function(json){
      layer.photos({
        photos: json //格式见API文档手册页
        ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机
      });
    });

    LayerDate时间组件

    和 layer 一样,你可以在 layui 中使用 layDate,也可直接使用 layDate 独立版,请按照你的实际需求来选择。
    官方网站 下载

    场景 用前准备 调用方式
    在 layui 模块中使用 下载 layui 后,引入layui.css和layui.js即可 通过layui.use(‘laydate’, callback)加载模块后,再调用方法
    作为独立组件使用 去 layDate 独立版本官网下载组件包,引入 laydate.js 即可 直接调用方法使用

    这里采用的第二种方式进行演示:详细代码如下:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>使用 layDate独立版</title>
    </head>
    <body>
    <input type="text" id="test1">
    <script src="laydate/laydate.js"></script> <!-- 改成你的路径 -->
    <script>
    //执行一个laydate实例
    laydate.render({
      elem: '#test1' //指定元素
    });
    </script>
    </body>
    </html>
    

    这里写图片描述

    更多属性请参考日期和时间组件文档

    layPage分页组件

    layPage 致力于提供极致的分页逻辑,既可轻松胜任异步分页,也可作为页面刷新式分页。

    • laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>layPage快速使用</title>
      <link rel="stylesheet" href="layui/css/layui.css" media="all">
    </head>
    <body>
    <div id="test1"></div>
    <script src="layui/layui.js"></script>
    <script>
    layui.use('laypage', function(){
      var laypage = layui.laypage;
      //执行一个laypage实例
      laypage.render({
        elem: 'test1' //注意,这里的 test1 是 ID,不用加 # 号
        ,count: 50 //数据总数,从服务端得到
      });
    });
    </script>
    </body>
    </html>
    

    这里写图片描述

    jump切换分页的回调当分页被切换时触发,函数返回两个参数:obj(当前分页的所有选项值)、first(是否首次,一般用于初始加载的判断)

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title>layPage快速使用</title>
            <link rel="stylesheet" href="layui/css/layui.css" media="all">
        </head>
    
        <body>
            <div id="test1"></div>
            <script src="layui/layui.js"></script>
            <script>
                layui.use('laypage', function() {
                    var laypage = layui.laypage;
                    //执行一个laypage实例
                    laypage.render({
                        elem: 'test1' //注意,这里的 test1 是 ID,不用加 # 号
                            ,
                        count: 50 //数据总数,从服务端得到
                            ,
                        jump: function(obj, first) {
                            //obj包含了当前分页的所有参数,比如:
                            console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
                            console.log(obj.limit); //得到每页显示的条数
                            console.log(obj.count);
                            //首次不执行
                            if(!first) {
                                //do something
                            }
                        }
                    });
                });
            </script>
        </body>
    
    </html>

    具体效果图:
    这里写图片描述

    基础参数设置:更多请参考layPage
    这里写图片描述

    layui.form表单模块组件

    form 是我们非常看重的一块,这块得好好看!
    layui 针对各种表单元素做了较为全面的UI支持,你无需去书写那些 UI 结构,你只需要写 HTML 原始的 input、select、textarea 这些基本的标签即可。我们在 UI 上的渲染只要求一点,你必须给表单体系所在的父元素加上class=”layui-form”,一切的工作都会在你加载完form模块后,自动完成。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>layui.form小例子</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    </head>
    <body>
    <form class="layui-form"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
      <div class="layui-form-item">
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-block">
          <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">下拉选择框</label>
        <div class="layui-input-block">
          <select name="interest" lay-filter="aihao">
            <option value="0">写作</option>
            <option value="1">阅读</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
          <input type="checkbox" name="like[write]" title="写作">
          <input type="checkbox" name="like[read]" title="阅读">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">开关关</label>
        <div class="layui-input-block">
          <input type="checkbox" lay-skin="switch">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">开关开</label>
        <div class="layui-input-block">
          <input type="checkbox" checked lay-skin="switch">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
          <input type="radio" name="sex" value="0" title="男">
          <input type="radio" name="sex" value="1" title="女" checked>
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">请填写描述</label>
        <div class="layui-input-block">
          <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
      <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
    <script src="layui/layui.js"></script>
    <script>
    layui.use('form', function(){
      var form = layui.form;
    
      //各种基于事件的操作,下面会有进一步介绍
    });
    </script>
    

    这里写图片描述

    看起来还是很舒服的,现在有个场景,我给复选框一个id

    这里写图片描述

    然后我们写方法让她默认选中,
    这里写图片描述

    我们在看看页面渲染成功了吗?
    这里写图片描述

    更新渲染

    • 有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制 但没有关系,你只需要执行 form.render(type, filter); 方法即可。

    这里写图片描述
    加入这行代码,我们在看页面渲染问题,
    这里写图片描述

    第一个参数:type,为表单的 type 类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表:

    参数(type)值 描述
    select 刷新select选择框渲染
    checkbox 刷新checkbox复选框(含开关)渲染
    radio 刷新radio单选框框渲染
    form.render(); //更新全部
    form.render('select'); //刷新select选择框渲染
    

    第二个参数:filter,为 class=”layui-form” 所在元素的 lay-filter=”” 的值。你可以借助该参数,对表单完成局部更新。

    【HTML】
    <div class="layui-form" lay-filter="test1">
      …
    </div>
    
    <div class="layui-form" lay-filter="test2">
      …
    </div>
    
    【JavaScript】
    form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态
    form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
    //……
    

    预设元素属性

    这里写图片描述

    事件监听

    form模块在 layui 事件机制中注册了专属事件,所以当你使用layui.onevent()自定义模块事件时,请勿占用form名。form支持的事件如下:

    event 描述
    select 监听select下拉选择事件
    checkbox 监听checkbox复选框勾选事件
    switch 监听checkbox复选框开关事件
    radio 监听radio单选框事件
    submit 监听表单提交事件

    默认情况下,事件所监听的是全部的form模块元素,但如果你只想监听某一个元素,使用事件过滤器即可。

    form.on('select(test)', function(data){
      console.log(data);
    });

    下面我们就看下监听select选择怎么实现,还是用我们刚才的例子写!
    首先找到select的 lay-filter=”aihao”值
    这里写图片描述

    这里写图片描述

    我们在详细看下页面监听情况:
    这里写图片描述
    监听成功!
    其他事件监听这里不做演示了,详情请参考表单模块文档 - layui.form

    表单初始赋值

    语法:form.val('lay-filter的值', object);
    用于给指定表单集合的元素初始赋值。

    //formTest 即 class="layui-form" 所在元素对应的 lay-filter="" 对应的值
    form.val("formTest", {
      "username": "李宇" // "name": "value"
      ,"sex": "男"
      ,"auth": 3
      ,"check[write]": true
      ,"open": false
      ,"desc": "银河贝思特"
    })
    

    表单验证

    大多数时候你只需要在表单元素上加上 lay-verify=”” 属性值即可。

    <input type="text" lay-verify="username"> 
    
    还同时支持多条规则的验证,如下:
    <input type="text" lay-verify="required|phone|number">
    

    这里写图片描述

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>layui</title>
      <link rel="stylesheet" href="layui/css/layui.css"  media="all">
    </head>
    <body>
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
          <input type="text" name="title" required lay-verify="required|mail" autocomplete="off" placeholder="请输入邮箱" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
    
    <script src="layui/layui.js" charset="utf-8"></script>
    <script>
        layui.use('form', function(){
            var form = layui.form;
            //自定义验证规则
            form.verify({
                mail: [/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, '请输入正确的邮箱'],                
            });
           });
    </script>
    </body>
    </html>
    

    页面测试:
    这里写图片描述

    这里写图片描述

    总结也不是很完整!深入学习请大家参考layui官网来学习!加油

    展开全文
  • layUi框架入门篇(一)——引入

    万次阅读 多人点赞 2018-10-18 21:58:00
    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的...附上layui官网 https://www.layui.com/ 下载完后我们将其解压拿出 layui 文件夹 打开编辑器,将其放入。 然后在html...

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。
    但是想用它,必须要按照他的规矩老干事,毕竟那人的手短,骚操作可以有,那也是规矩里的。
    附上layui官网
    https://www.layui.com/

    在这里插入图片描述

    下载完后我们将其解压拿出 layui 文件夹

    打开编辑器,将其放入。
    在这里插入图片描述
    然后在html中开始引入css文件和js文件。

    在这里我们需要的是 layui.css 和 layui.js 这两个layui核心文件。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <link rel="stylesheet" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>
        
    </head>
    <body>
    
    
    //模块和回调函数
    <script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form'], function(){
      var layer = layui.layer
      ,form = layui.form;
      
      layer.msg('Hello World');
    });
    </script> 
    
    
    
    </body>
    </html>
    

    到这里,我们还需要 声明需要使用的 模块回调函数

    当然,参照官方文档,选择自己想要的效果就行!!
    比如:
    在这里插入图片描述

    接下来我们以一个实例作为结束
    在这里插入图片描述
    我在官方文档 导航做例子:
    在这里插入图片描述

    大家没看错,我就是拷贝下来,然后

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <link rel="stylesheet" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>
    </head>
    <body>
    <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <li class="layui-nav-item layui-this"><a href="">产品</a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>
    
    <script>
        //注意:导航 依赖 element 模块,否则无法进行功能性操作
        layui.use('element', function(){
            var element = layui.element;
    
            //…
        });
    </script>
    </body>
    </html>
    

    就没有然后了,这样子就好了,效果拿来了…
    在这里插入图片描述

    展开全文
  • layUi框架入门篇(二)——布局

    万次阅读 多人点赞 2018-10-28 17:53:36
    今天我们继续就layUi官网提供的文档来一次后台布局,官网如下: https://www.layui.com/doc/ 效果如下: 1、 正常的布局大致的内容概括: &lt;body class="layui-layout-body"&gt; &lt;div...
  • 前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test8.aspx.cs" Inherits="Forms_Chase_test8" %> <!DOCTYPE html> <... <head...
  • 今天小编就为大家分享一篇Layui数据表格之获取表格中所有的数据方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui之数据表格--与后台交互获取数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 前端html页面 思路步骤:1.请求后端的总条数 2.后端数据的格式顺序要与表头数据相同 3.table组件接受数据的格式为 table.render({ elem: '#demp' ... ,parseData: function(res){ //res 即...
  • layui 表格 获取所有数据

    万次阅读 2018-09-03 15:03:17
    版本2.2.6 中 使用 layui.table.cache.tablename 可以取到表格中所有数据 可以打印 console.log("data-----"+JSON.stringify(table.cache)); 看看
  • layui简介

    千次阅读 2019-05-05 23:49:32
    layui是什么? layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处...
  • 快速上手前端框架layui

    万次阅读 多人点赞 2018-04-26 19:50:32
    目录: ... 在使用layui之前,我们先要了解一下layui是什么? 我觉得用贤心大大的一句话来概括就好了:为后端程序员设计的前端框架。 更加详细的描述是:这是一个封装了各种css和js、Ajax等等...
  • layui框架与SSM前后台交互

    万次阅读 2018-04-05 09:18:29
    采用layui前台框架实现前后台交互,数据分页显示以及删除操作,具体方式如下: 一、数据分页显示 1.前端 (1)html页面 <!--轮播数据分页显示--> <table class="layui-hide" id="content_lbt" lay-...
  • layui

    2018-07-06 19:45:43
    layui 的强大我不多说,在此总结自己在写项目时遇到的问题及解决方法总结出来. 写的教程是给有 layui 基础的人才看得懂,没学过,恐怕有点吃力,如果想学 layui ,可以下面留言,我有时间写写简单易懂的博客 一...
  • layUI展示树状treetable树形表格完整代码

    万次阅读 多人点赞 2018-10-23 10:01:33
    前言:因项目功能需要,在shiro权限管理模块中需要使用树状展示,前端使用的layUI框架,在官网的开发文档上没有找到树状表格的内容。只有树状菜单的文档:https://www.layui.com/doc/modules/tree.html 树状表格...
  • 使用 Vue + LayUI 做后台管理、RESTful 交互

    万次阅读 热门讨论 2018-08-22 14:27:08
    一、前言 1、之前使用了 React/Angular,使用起来显然是比 jQuery 好多了,但时隔半年,最近再次...2、使用 vue + layui 了,但 layui 里边的 layui.js 模块 vue.js 冲突, 因此放弃使用 layui.js,导致很多高级...
  • layui ztree 实现下拉树

    万次阅读 热门讨论 2018-01-26 15:42:11
    完整代码下载 JS 代码 //id div 的id,isMultiple 是否多选,chkboxType 多选框类型{"Y": "ps", "N": "s"} 详细请看ztree官网 function initSelectTree(id, isMultiple, chkboxType) { var setting = { ...
  • 使用layui 渲染table数据表格

    万次阅读 热门讨论 2018-04-18 15:37:00
    先上最终效果图:1,引入layui的css和js文件&lt;link rel="stylesheet" href="lib/layui/css/layui.css"&gt;&lt;script src="lib/layui/layui.js"&gt;&lt;/...
  • spring boot+layui实现增删改查实战

    千次阅读 多人点赞 2019-12-24 01:43:23
    最近在做一个后台,希望用一个现成的前端模板,找了一圈发现Layui比较合适。我知道很多人都有这个需求,为了使大家快速上手,我把自己写的最实用的增删改查案例完整的展示出来。 需要源码的请留下邮箱! ...
  • 使用layui实现的左侧菜单栏以及动态操作tab项

    万次阅读 多人点赞 2018-03-01 15:45:56
    首先说一下左侧菜单栏:这是一个最基本的左侧菜单栏,实现的过程很简单,官方的说明文档就有,但是我在到入layer.js之后,直接复制这段官方代码到我的编辑器上时,发现页面是这样的:发现,绑定属性的菜单并没有下拉...

空空如也

1 2 3 4 5 ... 20
收藏数 50,392
精华内容 20,156
关键字:

layui