精华内容
下载资源
问答
  • layui后台布局

    千次阅读 2019-06-17 14:35:30
    <!DOCTYPE html> <html> <head> <meta charset="utf-8">...meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">...layout 后台大布局...

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <title>layout 后台大布局 - Layui</title>
      <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域(可配合layui已有的水平导航) -->
        <ul class="layui-nav layui-layout-left">
          <li class="layui-nav-item"><a href="">控制台</a></li>
          <li class="layui-nav-item"><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>
        </ul>
        <ul class="layui-nav layui-layout-right">
          <li class="layui-nav-item">
            <a href="javascript:;">
              <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
              用户
            </a>
            <dl class="layui-nav-child">
              <dd><a href="">基本资料</a></dd>
              <dd><a href="">安全设置</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
      </div>
      
      <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
          <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
          <ul class="layui-nav layui-nav-tree"  lay-filter="test">
            <li class="layui-nav-item layui-nav-itemed">
              <a class="" 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>
                <dd><a href="">超链接</a></dd>
              </dl>
            </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="">超链接</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">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">内容主体区域</div>
      </div>
      
      <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
      </div>
    </div>
    <script src="layui/layui.js"></script>
    <script>
    //JavaScript代码区域
    layui.use('element', function(){
      var element = layui.element;
      
    });
    </script>
    </body>
    </html>

     

    效果图

     

    layui使用的css和js架包官网下载地址:https://www.layui.com/

    文章转载自:https://www.layui.com/doc/element/layout.html

    参考:https://www.layui.com/demo/layuiAdmin.html

    展开全文
  • layui后台布局和数据表格

    千次阅读 2019-06-25 23:41:34
    文章目录layui的简介后台布局和数据表格 layui的简介 后台布局和数据表格

    layui的简介

    简介:layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。

    layui下载官网:https://www.layui.com/
    和其他的前端框架一样,需要导入它的js和css即可使用,layui需要导入的是

    ./layui/css/layui.css
    ./layui/layui.js //提示:如果是采用非模块化方式(最下面有讲解),此处可换成:./layui/layui.all.js

    导入好这两个就可以使用了

    经典模块化前端框架:这里所谓的模块化也就是它只有在每次调用了某个方法才会加载出那个方法的板块,不是一次性全部加载出来

    后台布局和数据表格

    今天实现在后台布局上实现数据表格的数据绑定,这是前台jsp代码。
    布局没什么好说的,照着API文档来就可以了

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
    
    <script type="text/javascript">
    
    /* layui.use(['jquery', 'layer'], function(){ 
    	  var $ = layui.$ //重点处
    	  ,layer = layui.layer;
    })
     */
    //数据表格
    layui.use('table', function(){
    	  var table = layui.table;
    	  table.render({
    	    elem: '#demo'
    	    ,url:'${pageContext.request.contextPath}/BookAction.action?methodName=list'
    	    ,method:'post'
    	    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
    	    ,cols: [[
    	      {field:'bid', width:180, title: 'ID', sort: true}//minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
    	      ,{field:'bname', width:180, title: '书名'}
    	      ,{field:'price', width:180, title: '价格'}
    	      ,{field:'right', title: '操作', width:250,toolbar:"#barDemo"}
    	    ]]
    	  })
    	})
    
    </script>
    
    <title>layui</title>
    </head>
    <body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <div class="layui-logo">后台管理</div>
        <!-- 头部区域(可配合layui已有的水平导航) -->
        <ul class="layui-nav layui-layout-left">
          <li class="layui-nav-item"><a href="">控制台</a></li>
          <li class="layui-nav-item"><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>
        </ul>
        <ul class="layui-nav layui-layout-right">
          <li class="layui-nav-item">
            <a href="javascript:;">
              <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
              阳某
            </a>
            <dl class="layui-nav-child">
              <dd><a href="">基本资料</a></dd>
              <dd><a href="">安全设置</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
      </div>
      
      <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
          <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
          <ul class="layui-nav layui-nav-tree"  lay-filter="test">
            <li class="layui-nav-item layui-nav-itemed">
              <a class="" 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>
                <dd><a href="">超链接</a></dd>
              </dl>
            </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="">超链接</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">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
        
        	<table id="demo" lay-filter="test"></table>
        	<script type="text/html" id="barDemo">
       			 <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
       			 <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
      			 <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
    		</script>
        	
        </div>
      </div>
      
      <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
      </div>
    </div>
    
    </body>
    </html>
    

    主要是数据表格的数据格式要注意,把查出来的Json数据处理成layui能接收的数据格
    这是layui数据表格要求的数据格式

      ,parseData: function(res){ //res 即为原始返回的数据
        return {
          "code": res.status, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.total, //解析数据长度
          "data": res.data.item //解析数据列表
        };
      }
    

    所以我们在查数据时就要处理一下,我是用的MVC,所以是在控制器进行处理就可以了

    	private BookDao bookDao=new BookDao();
    	
    	public String list(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception {
    		PageBean pageBean=new PageBean();
    		pageBean.setRequest(req);
    		List<Map<String, Object>> list = this.bookDao.list(req.getParameterMap(),pageBean);
    		Map map=new HashMap();
    		map.put("data", list);
    		map.put("code", 0);
    		ObjectMapper om=new ObjectMapper();
    		ResponseUtil.write(resp, om.writeValueAsString(map));
    		return null;
    	}
    

    我们最后出来的结果是:
    在这里插入图片描述

    展开全文
  • layui基本功能的收集

    2019-10-16 23:22:10
    layout 后台大布局 - Layui layui 后台布局 控制台 商品管理 用户 其它系统 邮件管理 消息管理 授权管理 ...
     
    
    • 学员管理
           学员列表
           考勤管理
           沟通计划
           成绩管理
    • 管理设置
           账号管理
           授权管理
    • 系统管理
           系统信息
           操作日志
    内容主体区域 测试按钮 测试
    <div class="layui-tab" lay-allowClose="true" lay-filter="demo">
        <ul class="layui-tab-title">
          <li class="layui-this"><i class="layui-icon layui-icon-face-smile"></i>   日期和表格框</li>
          <li>表单控件</li>
          <li>进度条和表格</li>
          <li>穿梭框</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">内容1
                <input type="text" id="test1" style="width:200px">
                <input type="text" id="test2">
                <table id="demo" lay-filter="test"></table>
          </div>
          <div class="layui-tab-item">内容2
            <div class="" id="">
              <!-- 实现表格功能 -->
                    <form class="layui-form" action="">
                            <div class="layui-form-item">
                              <label class="layui-form-label">输入框111</label>
                              <div class="layui-input-block">
                                <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                              </div>
                            </div>
                            <div class="layui-form-item">
                              <label class="layui-form-label">密码框</label>
                              <div class="layui-input-inline">
                                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                              </div>
                              <div class="layui-form-mid layui-word-aux">辅助文字</div>
                            </div>
                            <div class="layui-form-item">
                              <label class="layui-form-label">选择框</label>
                              <div class="layui-input-block"  style="text-align:left;width:180px;">
                                <!-- 自动筛选文本功能lay-search -->
                                <select name="city" lay-verify="required" lay-search class="">
                                  <option value=""></option>
                                  <option value="0">北京</option>                                  
                                  <option value="1">上海</option>
                                  <option value="2">广州</option>
                                  <option value="3">深圳</option>
                                  <option value="4">杭州</option>
                                  <option value="5">天京</option>
                                  <option value="6">南京</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="阅读" checked>
                                <input type="checkbox" name="like[dai]" title="发呆">
                              </div>
                            </div>
                            <div class="layui-form-item">
                              <label class="layui-form-label">开关</label>
                              <div class="layui-input-block">
                                <input type="checkbox" name="switch" 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="男" title="男">
                                <input type="radio" name="sex" value="女" title="女" checked>
                              </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                              <label class="layui-form-label">文本域</label>
                              <div class="layui-input-block">
                                <textarea name="desc" 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="formDemo">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                              </div>
                            </div>
                          </form>
                
            </div>
        
        
        </div>
          <div class="layui-tab-item">内容3
            <button class="layui-btn" lay-submit lay-filter="login">登入</button>
    
            <div class="layui-progress" lay-showPercent="yes">
                <div class="layui-progress-bar" lay-percent="80%"></div>
            </div>   
            <!-- 表格功能 -->
            <table class="layui-table">
                    <colgroup>
                      <col width="150">
                      <col width="200">
                      <col>
                    </colgroup>
                    <thead>
                      <tr>
                        <th>昵称</th>
                        <th>加入时间</th>
                        <th>签名</th>
                      </tr> 
                    </thead>
                    <tbody>
                      <tr>
                        <td>贤心</td>
                        <td>2016-11-29</td>
                        <td>人生就像是一场修行</td>
                      </tr>
                      <tr>
                        <td>许闲心</td>
                        <td>2016-11-28</td>
                        <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
                      </tr>
                    </tbody>
                  </table>  
          </div>
          <!-- 实现穿梭框功能 -->
        <div class="layui-tab-item">
                <div id="test4"></div>             
                  
        </div>
    
    
        </div>
      </div>
    

    });
    //实现日期选择器功能,详细的
    laydate.render({

    elem: '#test1', //指定元素
    type:'date',
    

    // range: true, //范围选择
    format: ‘yyyy年MM月dd日’, //可任意组合
    theme: ‘molv’, //主题选择
    mark: {
    ‘0-10-14’: ‘生日’
    ,‘0-12-31’: ‘跨年’ //每年12月31日
    ,‘0-0-10’: ‘工资’ //每个月10号
    ,‘2017-8-15’: ‘’ //具体日期
    ,‘2017-8-20’: ‘预发’ //如果为空字符,则默认显示数字+徽章
    ,‘2017-8-21’: ‘发布’
    },
    ready: function(date){
    console.log(date); //得到初始的日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    }
    });
    //实现日期选择器功能
    laydate.render({

    elem: '#test2', //指定元素
    

    });
    //实现表格功能
    table.render({
    elem: ‘#demo’
    ,height: 600
    ,url: ‘/model_table_list/’ //数据接口
    ,page: true //开启分页
    ,limit:10
    ,cols: [[ //表头
    {field: ‘id’, title: ‘ID’, width:80, sort: true, fixed: ‘left’}
    ,{field: ‘title’, title: ‘用户名’, width:80}
    ,{field: ‘semester_long’, title: ‘性别’, width:80, sort: true}
    ,{field: ‘note’, title: ‘城市’, width:80}

    ]]
    

    });

    //实现选择器功能
    transfer.render({
    elem: ‘#test4’ //绑定元素
    ,data: [
    {“value”: “1”, “title”: “李白”, “disabled”: “”, “checked”: “”}
    ,{“value”: “2”, “title”: “杜甫”, “disabled”: “”, “checked”: “”}
    ,{“value”: “3”, “title”: “贤心”, “disabled”: “”, “checked”: “”}
    ,{“value”: “4”, “title”: “屈原”, “disabled”: “”, “checked”: “”}
    ]
    ,id: ‘demo1’ //定义索引

    });

    //实现侧边栏的隐藏和显示功能
    var isShow = true; //定义一个标志位
    $(’.kit-side-fold’).click(function(){
    //选择出所有的span,并判断是不是hidden
    KaTeX parse error: Expected '}', got 'EOF' at end of input: … if((this).is(’:hidden’)){
    $(this).show();
    }else{
    $(this).hide();
    }
    });
    //判断isshow的状态
    if(isShow){
    $(’.layui-side.layui-bg-black’).width(60); //设置宽度
    $(’.kit-side-fold i’).css(‘margin-right’, ‘40%’); //修改图标的位置
    //将footer和body的宽度修改
    $(’.layui-body’).css(‘left’, 60+‘px’);
    $(’.layui-footer’).css(‘left’, 60+‘px’);
    //将二级导航栏隐藏
    $(‘dd span’).each(function(){
    $(this).hide();
    });
    //修改标志位
    isShow =false;
    }else{
    $(’.layui-side.layui-bg-black’).width(200);
    $(’.kit-side-fold i’).css(‘margin-right’, ‘10%’);
    $(’.layui-body’).css(‘left’, 200+‘px’);
    $(’.layui-footer’).css(‘left’, 200+‘px’);
    $(‘dd span’).each(function(){
    $(this).show();
    });
    isShow =true;
    }
    });

    //点击事件
    $("#formDemo1").click(function(){
    // layer.msg(“点击事件”);
    element.tabAdd(‘demo’, {
    title: ‘选项卡的标题’
    ,content: ‘选项卡的内容’ //支持传入html
    ,id: ‘选项卡标题的lay-id属性值’
    });
    });

    });
    function add() {
    element.tabAdd(‘demo’, {
    title: ‘选项卡的标题’
    ,content: ‘选项卡的内容’ //支持传入html
    ,id: ‘选项卡标题的lay-id属性值’
    });
    // alert(‘hello’) // 该函数返回 p1 和 p2 的乘积
    }

    展开全文
  • 整体的效果:一、首先百度搜索layui的地址,然后下载layui的压缩包,,将压缩包的文件解压缩,然后将解压缩后的文件复制到你的编译器上;二、建立一个html文件,引入layui.css 和 layui.js两个文件,一定要将地址写...

    整体的效果:



    一、首先百度搜索layui的地址,然后下载layui的压缩包,,将压缩包的文件解压缩,然后将解压缩后的文件复制到你的编译器上;

    二、建立一个html文件,引入layui.css 和 layui.js两个文件,一定要将地址写对,css和js要一起引用;

    三、将整个页面分为三部分body标签中要引用的class为class="layui-layout-body"

       3.1、头部部分:用一个大的div包裹,class="layui-layout layui-layout-admin",然后可以设计自己的logo或者所需要的二级导航,具体实现代码如下所示:

    3.2、对左边的设置,因为要实现的效果是点击左边显示右边的内容,所以在左边最重要的是iframe框架和新建的两个html文件;在右边的主题内容区域,将iframe的name值的设置为重点,因为在左边得超链接是根据<a>标签里得target=“iframe的name”值才能实现点击左边显示右边的内容,具体实现代码如下:

    <!--用layui布局左边的样式-->
            <div class="layui-side layui-bg-black" style="margin-top: 58px;">
                <div class="layui-side-scroll">
                    <ul class="layui-nav layui-nav-tree" lay-filter="test">
                        <li class="layui-nav-item layui-nav-itemed"><a href="D_righter.html" target="option">数据表格</a></li>
                        <li class="layui-nav-item layui-nav-itemed"><a href="表单.html" target="option">表单</a></li>
                        <li class="layui-nav-item layui-nav-itemed"><a href="javascript:;">数据表格</a></li>
                    </ul>
                </div>
            </div>

    3.3、右边是内容的主题部分,刚开始映入眼帘的就是D_righter.html只需要一个iframe框架中的src属性告诉左边他们跳转的目标是右边即可,具体代码如下:

    <div class="layui-body" style="margin-top: 58px;">
                <div style="padding: 15px; height: 100%;">
                    <iframe id="option" name="option" src="D_righter.html" style="overflow: visible;" scrolling="no" frameborder="no" width="100%" height="100%"></iframe>
                </div>

            </div>

    到此主页部分设置完毕!


    第二部分:D_righter.html(也就是动态生成表格部分)

    由于只是测试代码,并没有后台数据库的支持,所以接口会出现异常;

          注意:总共有三种渲染方式,今天介绍两种:方法渲染和自动渲染;今天用的是方法渲染;

                   方法渲染:其实这是“自动化渲染”的手动模式,本质类似,只是“方法级渲染”将基础参数的设定放在了JS代码中

    ,且原始的 table 标签只需要一个 选择器

                   自动渲染:自动是用自动渲染表格的方法,也就是在一段table容器内配置好相应的参数,由table模块内部实现自动渲染。

                    1、带有class="layui-table"的table标签;

                    2、对标签设置属性lay-data=""用于配置一些基础参数;

                    3、在 <th> 标签中设置属性lay-data=""用于配置表头信息

    具体实现代码如下,



    第三部分:表单的实现

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


    <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" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
              <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
              <select name="city" lay-verify="required">
                <option value=""></option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">杭州</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="阅读" checked>
              <input type="checkbox" name="like[dai]" title="发呆">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
              <input type="checkbox" name="switch" 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="男" title="男">
              <input type="radio" name="sex" value="女" title="女" checked>
            </div>
          </div>
          <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
              <textarea name="desc" 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="formDemo">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>

        </form>


            必须放入 layui 所规范的元素结构,form 模块才会对其进行重置渲染。值得注意的是,在具体的每一块表单元素中,仍是像往日一样写 input 等标签即可。另外,我们对我们所规范的结构进行了响应式的支持,而针对一些不同的表单排版,比如行内表单,也只需要设定所定义好的 class 即可。



    展开全文
  • layui基本使用

    2019-04-19 12:14:00
    https://www.layui.com/doc/ 在线实例https://www.layui.com/demo/ 使用 自己实际操作 <script>... layui.use(['layer', 'form'], function(){ ... var layer = layui.l...
  • layui 一.layui概述 官网:https://www.layui.com/ 官方文档:... 1.layui下载 ...二.layui基本使用 1.引入核心文件 <head> <meta charset="UTF-8"> <title>layui的使用</t
  • layui基本使用 -后台管理

    千次阅读 2017-11-01 16:33:39
    layui.config({ version: true //一般用于更新模块缓存,默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值,如:201610 , debug: false //用于开启调试模式,默认false,如果设为true,则JS模块的...
  • layTabPlus是一个layUI后台Tab布局框架的扩展插件,实现了Tab管理、刷新按钮、iframe优化等功能。 项目地址:https://gitee.com/Leytton/layTabPlus Demo演示:http://leytton.gitee.io/laytabplus 效果截图: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 843
精华内容 337
关键字:

layui基本布局