layui的fieldset

关于layui

2019-03-18 10:10:03

layui 官网地址：layui 使用方式：下载后导入项目，然后引用即可先要引用jquery，然后再引用layui.js和layui.css ...fieldset class="layui-elem-field layui-field-title" style="margin-top:3...

layui
官网地址：layui

使用方式：下载后导入项目，然后引用即可



先要引用jquery，然后再引用layui.js和layui.css
## layui表单
下面以HTML中最常见的form表单来演示layui的使用。

html部分：
<fieldset class="layui-elem-field layui-field-title" style="margin-top:30px;">
    <legend style="text-align:center;">注册新账户</legend>
</fieldset>
<form id="reform" class="layui-form layui-form-pane"  th:action="@{/user/register.html}" method="POST">
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
        <input type="text" name="email" lay-verify="email" placeholder="请输入" autocomplete="off" class="layui-input" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="name" 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-block">
            <input type="password" name="password"  lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">重复密码</label>
        <div class="layui-input-block">
            <input type="password" name="repassword"   lay-verify="repass" placeholder="请输入密码" autocomplete="off" class="layui-input" />
        </div>
    </div>

    <div class="layui-form-item">
        <button  class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">注册</button>
    </div>

    <div style="text-align:center;margin-top:15px;">
        <input type="checkbox" name="agree"  lay-skin="primary" checked=""/>
                               我已阅读并同意
        <a href="#" id="agreementLink">《隐私条款》</a>
    </div>
</form>

javscript部分：
<!-- js for form input and submit -->
<script>
layui.use(['form'], function(){
  var form = layui.form;

  //自定义验证规则
  form.verify({
    pass: [/(.+){6,12}$/, '密码必须6到12位']
    ,repass:function(value){
        var pvalue = $("input[name='password']").val();
        if(pvalue!=value){
            return "两次输入的密码不一致";
        }
    }
  }); 
  //监听提交
  form.on('submit(demo1)', function(data){
    var agreeChecked = data.field.agree;
    if(agreeChecked!="on"){
        msg("未同意隐私条款");
        return false;//阻止表单提交
    }
  });
});
</script>

注册界面
layui弹出层
首先，从layer官网下载layer的文件，解压并放入自己的项目下，然后类似这样的形式引入layer.js文件。
Example：
function msg(msg){
    //墨绿深蓝风
    layer.alert(msg, {
      title:'消息'
      ,skin: 'layui-layer-molv' //样式类名
      ,closeBtn: 0
     },function(index){
        layer.close(index);//关闭
     });
}

layer不仅仅可以弹出提示框，还可以做到一些有趣且实用的动态效果，甚至可以加载一个弹出的HTML界面出来。更多的东西请参考layer官网。
文件上传
<!-- 上传图片-->
<div class="layui-tab-item">
    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="headButton">
            <i class="layui-icon"></i>选择图片
        </button>    
        <button type="button" class="layui-btn" id="headAddButton">开始上传</button>
    </div>

    <div class="layui-inline layui-word-aux" style="margin-top:20px;">
        <label>注意：支持jpg，png和gif格式，文件大小应小于10MB</label>
    </div>
</div>
<!-- 文件上传 -->
<script>
layui.use('upload',function(){
    var $ = layui.jquery
    ,upload = layui.upload;

    //选完文件后不自动上传
    upload.render({
        elem: '#headButton'
        ,url: getRootPath()+'/user/uploadPicture'
        ,size: 10*1024 //10*1024KB = 10MB
        ,accept: 'images'
        ,acceptMime: 'image/jpg,image/png,image/gif'
        ,auto: false
        ,bindAction: '#headAddButton'
        ,done: function(res){
            msg(res.msg);
            //刷新头像地址
            var resUrl = res.url;
            if(resUrl!=""){
                document.getElementById("userImg").src=getRootPath()+ resUrl;
            }
        }
    });
});
</script>

后端（java-spring-controller类中）：
@Autowired
FileService fileService;

@RequestMapping(path="/uploadPicture",method= {RequestMethod.POST})
@ResponseBody
public Map<String,Object> uploadFile(@RequestParam("file")MultipartFile file,HttpServletRequest request){
    Map<String,Object> map = new HashMap<String,Object>();
    String path = fileService.uploadImg(file, "head");//service层保存文件

    //返回值，必须按照这样写——要符合upload模块的回调接口才行
    map.put("code", 0); //0表示成功
    map.put("msg","上传成功");
    map.put("data", "");
    map.put("url", path);
    return map;
}   

upload上传接口和返回值：
//上传接口
upload.render({
  elem: '#id'
  ,url: '/api/upload/' //必填项
  ,method: ''  //可选项。HTTP类型，默认post
  ,data: {} //可选项。额外的参数，如：{id: 123, abc: 'xxx'}
});   

//返回值
{
  "code": 0
  ,"msg": ""
  ,"data": {
    "src": "http://cdn.layui.com/123.jpg"
  }
} 

有关Javaweb文件上传可以参照我的另一篇博客：轻松实现Javaweb文件上传

图片上传
layui的upload模块能够在前端进行配置文件大小、格式、预览，还可以做到批量上传、重传功能。更多的内容请参照layui的upload模块。
六、layui分页

在网站中也经常会用到分页，后端的分页是容易实现的，但对于前端来说就不是那么理想了。layui提供了自己的分页模块——laypage。
<div id="allNewsDiv"></div>
<div id="demo"></div>

layui.use(['element','laypage'], function(){
      var element = layui.element
      ,laypage = layui.laypage;

      $.ajax({
         url:getRootPath()+'/news/count'
         ,type:'GET'
         ,async:true  //false表示非异步，即同步，即请求处理完毕后才能返回；
         ,data:{"page":1, "limit":10}
         ,dataType:'json'
         ,success:function(alldata){
            var numbers = alldata.count;
            //总页数大于页码总数
            laypage.render({
                elem: 'demo'
                ,count: numbers//数据总数
                ,first: '首页'
                ,last: '尾页'
                ,jump: function(obj){
                  $.ajax({
                    url:getRootPath()+'/news/list'
                    ,type:'GET'
                    ,async:true
                    ,data:{"page":obj.curr, "limit":obj.limit}
                    ,dataType:'json'
                    ,success:function(data){
                        var shtml = getNewsContentHTML(data);//js处理数据并填充div
                        document.getElementById("allNewsDiv").innerHTML=shtml;
                    }
                  });
                }
             });
         } 
      });
});

如上，分页跳转的事件是在jump中进行的，在里面编写AJAX请求，通过jump的obj参数获得page和limit参数，然后在请求执行完毕并返回数据后进行处理即可
layui数据表格
表格时常见的功能，但js拼接HTML表格算是一件比较繁琐且容易出错的事情。
<table class="layui-hide" id="teamTable" lay-filter="teamTool">
</table>
<script>
layui.use('table',function(){
    var table = layui.table;//模块声明

    table.render({
        elem:'#teamTable'
        ,method:'get'
        ,url:getRootPath()+'/team/admin/list' //返回一个List<TeamMember>的list
        ,cellMinWidth:80
        ,cols:[[
            {field:'id', title:'ID', sort:true}
            ,{field:'name', title:'姓名'}
            ,{field:'birth', title:'出生日期'} //这里的templet值时模板元素的选择器
            ,{field:'position', title:'身份'}
            ,{field:'information', title:'个人信息'}
            ,{field:'right', title:'操作', toolbar:'#barDemo'}
        ]]
        ,page:true  //开启分页

    });
    //监听工具条
    table.on('tool(teamTool)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的DOM对象

      console.log("id:"+data.id);
      if(layEvent === 'detail'){ //查看
        //do something
        layer.msg('ID：'+ data.id + ' 的查看操
      } else if(layEvent === 'del'){ //删除
        layer.confirm('确认删除人员信息？', function(index){
          //do something
          layer.close(index);
        }); 
      } else if(layEvent === 'edit'){ //编辑
          //do something
      }
    });
});
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

收起

展开全文

Layui之进度条

千次阅读 2020-07-03 11:10:18

进度条准备工作： ...fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>默认风格的进度条</legend> </fieldset> <div class="layui-

进度条
准备工作：

导入layui.js和layui.css
一、默认风格的进度条
1、默认的进度条风格是小的细的，且颜色为绿

2、进度条的宽度是100%适配于它的父级元素，如上面的进度条是在一个300px的父容器中。
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>默认风格的进度条</legend>
</fieldset>
  
<div class="layui-progress">
  <div class="layui-progress-bar" lay-percent="40%"></div>
</div>
<div style="margin-top: 15px; width:300px">
  <div class="layui-progress">
    <div class="layui-progress-bar" lay-percent="70%"></div>
  </div>
</div>

效果：


二、不同颜色的进度条
1、进度条颜色可自由更改，在div内添加语法（layui-bg-想要更改的颜色）

2、进度百分比也可自由更改，在div内添加语法（lay-percent=“要更改百分比”）
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>更多颜色选取</legend>
</fieldset>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-green" lay-percent="40%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="50%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-cyan" lay-percent="60%"></div>
</div>

效果：


三、不同尺寸的进度条
1、想要不同尺寸的进度条，只需要在div内添加语法（layui-progress-big）

2、进度条百分比可更改
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>大尺寸进度条</legend>
</fieldset>
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar" lay-percent="20%"></div>
</div>
   
<br>
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar layui-bg-green" lay-percent="35%"></div>
</div>
<br>
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar layui-bg-cyan" lay-percent="75%"></div>
</div>


效果：


四、显示进度百分比进度条
1、进度可以自己调节（lay-percent="?"）支持输入的有普通数字、百分比、分数

2、如果不想显示进度的百分比，可以删掉（lay-showpercent）

3、默认风格进度百分比会在进度条上方显示，大尺寸进度条的百分比会在进度条内部显示
<fieldset class="layui-elem-field layui-field-title" style="margin: 50px 0 30px;">
  <legend>显示进度比文本</legend>
</fieldset>
<div class="layui-progress" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="20%"></div>
</div>
 
<br>
 
<div class="layui-progress" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="5 / 10"></div>
</div>
 
<br>
 
<div class="layui-progress layui-progress-big" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="70%"></div>
</div>

效果：


五、动态改变进度
1、依赖方法进行
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>动态改变进度</legend>
</fieldset>
 
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
  <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>
 
<div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
  <button class="layui-btn site-demo-active" data-type="setPercent">设置50%</button>
  <button class="layui-btn site-demo-active" data-type="loading">模拟loading</button>
</div>

以上需要用到的方法：
<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  
  //触发事件
  var active = {
    setPercent: function(){
      //设置50%进度
      element.progress('demo', '50%')
    }
    ,loading: function(othis){
      var DISABLED = 'layui-btn-disabled';
      if(othis.hasClass(DISABLED)) return;
    
      //模拟loading
      var n = 0, timer = setInterval(function(){
        n = n + Math.random()*10|0;  
        if(n>100){
          n = 100;
          clearInterval(timer);
          othis.removeClass(DISABLED);
        }
        element.progress('demo', n+'%');
      }, 300+Math.random()*1000);
      
      othis.addClass(DISABLED);
    }
  };
  
  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = $(this).data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
</script>

效果：



设置50%的效果：



模拟加载效果：

加载过程中按钮禁用

收起

展开全文

layui菜单的使用

千次阅读 2020-04-04 22:08:24

layUI的菜单分为两类：水平...fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>水平导航菜单</legend> </fieldset> <ul class="layui-n...

layUI的菜单分为两类：水平菜单和垂直菜单。

水平菜单：

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
		<legend>水平导航菜单</legend>
	</fieldset>
	
	<ul class="layui-nav">
		<li class="layui-nav-item">
			<a href="/sys/main">主页</a>
		</li>
		<li class="layui-nav-item">
			<a href="#">用户信息管理</a>
			<dl class="layui-nav-child">
				<dd>
					<a href="/sys/user/add">新增用户</a>
				</dd>
				<dd>
					<a href="/sys/user/list">用户列表</a>
				</dd>
			</dl>
		</li>
		<li class="layui-nav-item">
			<a href="#">角色信息管理</a>
			<dl class="layui-nav-child">
				<dd>
					<a href="/sys/role/add">新增角色</a>
				</dd>
				<dd>
					<a href="/sys/role/list">角色列表</a>
				</dd>
			</dl>
		</li>
		<li class="layui-nav-item">
			<a href="#">菜单信息管理</a>
			<dl class="layui-nav-child">
				<dd>
					<a href="/sys/role/add">新增菜单</a>
				</dd>
				<dd>
					<a href="/sys/role/list">菜单列表</a>
				</dd>
			</dl>
		</li>
	</ul>

 

垂直菜单：

<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 30px;">
		<legend>树形菜单</legend>
	</fieldset>
	<ul class="layui-nav layui-nav-tree">
		<li class="layui-nav-item layui-this">
			<a href="/sys/main">主页</a>
		</li>
		<li class="layui-nav-item layui-nav-itemed">
			<a href="#">用户信息管理</a>
			<dl class="layui-nav-child">
				<dd>
					<a href="/sys/user/add">新增用户</a>
				</dd>
				<dd>
					<a href="/sys/user/list">用户列表</a>
				</dd>
			</dl>
		</li>
		<li class="layui-nav-item">
			<a href="#">角色信息管理</a>
			<dl class="layui-nav-child">
				<dd>
					<a href="/sys/role/add">新增角色</a>
				</dd>
				<dd>
					<a href="/sys/role/list">角色列表</a>
				</dd>
			</dl>
		</li>
		<li class="layui-nav-item">
			<a href="#">菜单信息管理</a>
			<dl class="layui-nav-child">
				<dd>
					<a href="/sys/role/add">新增菜单</a>
				</dd>
				<dd>
					<a href="/sys/role/list">菜单列表</a>
				</dd>
			</dl>
		</li>
	</ul>



总结：

class样式
			含义
			使用方法
		
layui-nav
			导航栏，默认水平菜单
			<ul class="layui-nav">...</ul>
		
layui-nav-tree
			导航栏，树状菜单
			<ul class="layui-nav layui-nav-tree">...</ul>
		
layui-nav-side
			导航栏，侧边导航
			<ul class="layui-nav layui-nav-tree layui-nav-side">
		
layui-nav-item
			导航栏菜单项
			<li class="layui-nav-item">...</li>
		
layui-nav-itemed
			默认展开栏菜单项子项
			<li class="layui-nav-item layui-nav-itemed">...</li>
		
layui-nav-child
			导航栏菜单项子项
			
			<li class="layui-nav-item layui-nav-itemed">

			        <a href="#">用户信息管理</a>

			        <dl class="layui-nav-child">

			                <dd>

			                    <a href="/sys/user/add">新增用户</a>

			                </dd>

			                <dd>

			                    <a href="/sys/user/list">用户列表</a>

			                </dd>

			        </dl>

			</li>
			
		
layui-this
			指向当前选中项
			<li class="layui-nav-item layui-this">

			        <a href="/sys/main">主页</a>

			</li>
		
layui-nav-img
			导航栏图片
			
			<li class="layui-nav-item" lay-unselect="">

			        <a href="javascript:;">

			                <img src="/images/phono" class="layui-nav-img">

			                <span>username</span>

			</a>

收起

展开全文

layui多选

千次阅读 2018-10-12 15:46:56

效果如下，选择某个选项后，会弹出对应输入框填写数据前端页面代码 <style> legend { font-size: 12px; font-weight: inherit; color: #03A9F4;...layui-form-item">...

效果如下，选择某个选项后，会弹出对应输入框填写数据





前端页面代码


<style>
   legend {
      font-size: 12px;
      font-weight: inherit;
      color: #03A9F4;
   }
</style>




<div class="layui-form-item">
   <label class="layui-form-label">功能选择：</label>
   <div class="layui-input-block">
      <input type="checkbox" name="logReport" id="system-room-logReport" title="日志上报" lay-skin="primary"         checked>
      <input type="checkbox" name="receiveFTP" id="system-room-receiveFTP" lay-filter="system-room-receiveFTP" title="接收FTP" lay-skin="primary">
      <input type="checkbox" name="transferFTP" id="system-room-transferFTP" lay-filter="system-room-transferFTP" title="转存FTP" lay-skin="primary">
      <input type="checkbox" name="transferKafka" id="system-room-transferKafka" lay-filter="system-room-transferKafka" title="转存Kafka" lay-skin="primary">
   </div>
</div>



<div class="transferFTP">
   <fieldset class="transferFTP layui-elem-field layui-field-title" >
      <legend>转存FTP配置</legend>
   </fieldset>
   <div class="layui-input-inline">
      <div class="layui-input-inline" style="margin-bottom: 15px">
         <label class="layui-form-label" style="width: 120px">转存FTP地址</label>
         <input type="text" name="ip" placeholder="请输入转存FTP服务器IP地址"
               autocomplete="off" class="layui-input" style="width:300px;" value="#(ip)">
      </div>
      <div class="layui-input-inline" style="margin-bottom: 15px">
         <label class="layui-form-label" style="width: 100px">转存FTP端口</label>
         <input type="text" name="port" placeholder="请输入转存FTP服务器端口"
               autocomplete="off" class="layui-input" style="width:166px;" value="#(port)">
      </div>
      <div class="layui-form-item">
         <label class="layui-form-label" style="width: 120px">转存FTP帐号</label>
         <input type="text" name="username" placeholder="请输入登录转存FTP服务器帐号"
               autocomplete="off" class="layui-input" style="width:600px;" value="#(username)">
      </div>
      <div class="layui-form-item">
         <label class="layui-form-label" style="width: 120px">转存FTP密码</label>
         <input type="password" name="password" placeholder="请输入登录转存FTP服务器密码"
               autocomplete="off" class="layui-input" style="width:600px;" value="#(password)">
      </div>
      <div class="layui-form-item">
         <label class="layui-form-label" style="width: 120px">转存FTP目录</label>
         <input type="text" name="savePath" placeholder="请输入转存FTP存储路径"
               autocomplete="off" class="layui-input" style="width:600px;" value="#(savePath)">
      </div>
   </div>
</div>


JS代码


form.on('checkbox(system-room-transferFTP)', function(data){
    if(data.elem.checked){
        $('.transferFTP').show();
    }else{
        $('.transferFTP').hide();
    }
});

收起

展开全文

表单

layui布局
2019-10-02 14:11:57
布局 ...layui-row |-- layui-col-xs6移动设备占比 |-- layui-col-sm6平板设备占比 |-- layui-col-md6桌面设置占比详细代码： <%-- Created by IntelliJ IDEA. User: Lenovo Date:...
收起
layui面板
2019-10-02 13:50:04
卡片面板相关样式 layui-row 代表一行 ...layui-col-space15 space0-space30 代表卡片之间的间距 |-- layui-col-md6 代表一列 md1-md12 代表当前卡片占整行的X/12 |-- layui-card 代表一个卡片 ...
收起
如何使用layui
千次阅读 2018-11-30 10:31:36
快速上手layui 一、介绍二、开始使用layui 三、layui表单四、layui弹出层五、layui文件上传六、layui分页七、layui数据表格一、介绍在使用layui之前，我们先要了解一下layui是什么？我觉得用....
收起
layui进度条
千次阅读 2019-10-02 13:15:24
layui-progress 代表一个进度条 |-- layui-progress-bar 代表进度条里面的进度 layui-progress-big 变粗了相关属性 lay-percent 代表进度值 lay-showpercent="true" 是否显示进度值代码如下图： <%-...
收起
layui徽章
2019-10-02 14:23:50
layui-badge-dot 小圆点 layui-badge 弧形徽章 layui-badge-rim 边框徽章组合使用详细代码 <%-- Created by IntelliJ IDEA. User: Lenovo Date: 2019/10/2 Time: 14:15 To change this tem...
收起
layui分页
2017-11-10 16:46:15
使用的layui版本为：layui-v1.0.9，现在新版本已经2.X了有些属性改变了，如果你的版本是2.0以上请参照我的博客：《 layui完美分页，ajax请求分页（真分页）【2.0版本】》如果layui分页有的时候可以渲染，有的...
收起
layui-表格
千次阅读 2017-05-19 09:24:46
layui-表格
收起
table
layui-分页
千次阅读 2017-05-19 09:20:29
layui-分页
收起
分页
layui导航栏和layui.layui.msg问题
2017-12-07 10:28:00
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here<...link rel="stylesheet" href="/assets/layui/css/layui.css" media="al...
收起
Layui treeGrid
2018-04-28 17:32:00
目前treeGrid的源码不是很完善, 没有开放, 只有社区里面有, 想用的...(1)layui 的treeGrid 下载地址: https://gitee.com/lrd110/tree_table_treegrid_based_on_layui https://gitee.com/beijiyi/tree_table_treegr...
收起
layui表格实现代码
2020-12-29 11:31:10
本文实例为大家分享了layui基本表格的具体代码，供大家参考，具体内容如下 <!...<... <head>...link rel=stylesheet href=layui/css/layui.css&...<fieldset class=layui-elem-field xss=removed> 默认表格 <
收起
layui标题导航
2020-08-09 10:47:01
fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px; border: 1px solid #c2c2c2 !important"> <legend id="Legend1" runat="server" style="text-align: left; font-size: 16px...
收起
Layui分页
2020-07-03 15:11:21
1.把js修改本地的即可 <!... <... <...Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta
收起
快速上手前端框架layui
万次阅读 多人点赞 2018-04-26 19:50:32
目录： ... 在使用layui之前，我们先要了解一下layui是什么？我觉得用贤心大大的一句话来概括就好了：为后端程序员设计的前端框架。更加详细的描述是：这是一个封装了各种css和js、Ajax等等...
收起
前端框架前端框架
layui导航栏实现代码
2021-01-19 18:39:10
本文实例为大家分享了layui水平导航菜单的具体代码，供大家参考，具体内容如下 <!...<... <head>...link rel=stylesheet href=layui...<fieldset class=layui-elem-field> 水平导航菜单 </fieldset> <ul class
收起
layui实现树菜单
2020-04-15 20:33:19
layui实现树菜单 ...<div class="layui-fluid"> <div class="layui-card"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <lege...
收起
js
layui-选项卡
万次阅读 2017-05-19 09:09:11
layui-选项卡
收起
Tab
layUI实现排行榜效果
千次阅读 2019-05-25 16:35:47
排行榜是现在门户网站，各种网站经常会出现的一种类型的菜单，而可以通过layui简单配置...fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>浏览量总排行榜&l...
收起
layui 穿梭框
千次阅读 2019-03-01 15:34:47
对应的后台代码，有的可能是不通的，不填了。注意点，用到了好多的查询控制。主要思路就是，选择左框数据，按下按钮，存到数据库，然后左右表重载渲染...采用js，调用layui的渲染。 selectDislodgeData ==...
收起
使用layui踩坑记录
2019-07-02 10:33:15
layui 版本 2.5.4 这里代码布局是和这样布局，只有有其它的标签切换，准会变形，是因为fieldset和table不能一起用，要不然每次渲染就会渲染不全弹出框的时候，如果高度不够会不断的闪现解决方法初始化的...
收起
前端
SpringBoot+layui实现文件上传
千次阅读 2018-06-11 09:52:00
页面代码(只需要引入基础layui的css与js) <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>多文件列表上传<...
收起
文件上传
layui-表单集合
万次阅读 2017-05-19 08:55:34
layui-表单集合
收起
表单
layui个人学习
2021-02-20 15:12:50
layui 下载文件说明 css：样式 font：字体 image：图 lay：里面的model对应相应的内置模块 layui.all.js：包含了所有模块的 js layui.js：框架如果要使用必须使用 layui.use([“table”,“layer”,“laydate”],...
收起
前端
layui-导航栏
千次阅读 2017-05-19 09:06:06
layui-导航栏
收起
layui-流加载
千次阅读 2017-05-19 08:52:25
layui-流加载
收起
layui-日期控件
千次阅读 2017-05-19 09:11:58
layui-日期控件
收起
控件 laydate

class样式	含义	使用方法
layui-nav	导航栏，默认水平菜单	<ul class="layui-nav">...</ul>
layui-nav-tree	导航栏，树状菜单	<ul class="layui-nav layui-nav-tree">...</ul>
layui-nav-side	导航栏，侧边导航	<ul class="layui-nav layui-nav-tree layui-nav-side">
layui-nav-item	导航栏菜单项	<li class="layui-nav-item">...</li>
layui-nav-itemed	默认展开栏菜单项子项	<li class="layui-nav-item layui-nav-itemed">...</li>
layui-nav-child	导航栏菜单项子项	<li class="layui-nav-item layui-nav-itemed"> <a href="#">用户信息管理</a> <dl class="layui-nav-child"> <dd> <a href="/sys/user/add">新增用户</a> </dd> <dd> <a href="/sys/user/list">用户列表</a> </dd> </dl> </li>
layui-this	指向当前选中项	<li class="layui-nav-item layui-this"> <a href="/sys/main">主页</a> </li>
layui-nav-img	导航栏图片	<li class="layui-nav-item" lay-unselect=""> <a href="javascript:;"> <img src="/images/phono" class="layui-nav-img"> <span>username</span> </a>

关于layui

layui

layui弹出层

文件上传

layui数据表格

Layui之进度条

进度条

一、默认风格的进度条

二、不同颜色的进度条

三、不同尺寸的进度条

四、显示进度百分比进度条

五、动态改变进度

layui菜单的使用

水平菜单：

垂直菜单：

layui多选

效果如下，选择某个选项后，会弹出对应输入框填写数据

前端页面代码

layui布局

layui面板

如何使用layui

layui进度条

layui徽章

layui分页

layui-表格

layui-分页

layui导航栏和layui.layui.msg问题

Layui treeGrid

layui表格实现代码

layui标题导航

Layui分页

快速上手前端框架layui

layui导航栏实现代码

layui实现树菜单

layui-选项卡

layUI实现排行榜效果

layui 穿梭框

使用layui踩坑记录

SpringBoot+layui实现文件上传

layui-表单集合

layui个人学习

layui-导航栏

layui-流加载

layui-日期控件

layui的fieldset