精华内容
下载资源
问答
  • 关于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
    效果如下,选择某个选项后,会弹出对应输入框填写数据 前端页面代码 &lt;style&gt; legend { font-size: 12px; font-weight: inherit; color: #03A9F4;...layui-form-item"&gt;...

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

    前端页面代码

    <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-表格
  • layui-分页

    千次阅读 2017-05-19 09:20:29
    layui-分页
  • <!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...
  • layui-选项卡

    万次阅读 2017-05-19 09:09:11
    layui-选项卡
  • 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) &lt;fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"&gt; &lt;legend&gt;多文件列表上传&lt;...
  • 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-日期控件

空空如也

空空如也

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

layui的fieldset