layui

御丽诗妃.以下内容来源于网络，著作权归属原作者。 前端工程师写CSS的通病，你中了几条？内附解决方案 陕西文都智链 2020-08-10 17:24:12 1.CSS简单说明 对于Web的初学者来说，网站不外乎就是HTML和CSS，JS三大板块组合而成，HTML主要是用来负责网络的结构，CSS则是对样式的设计，JS则是交互效果的核心，这篇文章主要讲一下CSS相关的内容，因为CSS本身学习就相对来说比较简单，但是如果如果很容易那就大错特错，入门快，想要精通却非常不易，花时间做项目提升非常重要。 我们简单从概念上来说，CSS属于层叠样式表，主要用在网页排版设计和装修效果，让网页看起来美观漂亮，对于刚入行的初学者来说，会使用是不难的，但是如果要用的熟练精通，那可并不容易，下面我就说一下常见的通病吧，帮大家排排雷。 2.常见通病 布局不清晰，制作结构混乱，HTML和CSS样式过多 如果对常见板块的设计思路有问题，就会导致做出的效果一致，但是CSS样式和HTML代码标签相对来说比较麻烦，初学者常常会用30行代码来完成10行代码就可以完成的事情。 代码的规范 初学者写出的代码往往只有自己看的懂，让别人来看，可能就是一种煎熬，甚至只能看懂一部分，写代码是一种艺术，写得好叫大神，写的差，也太为难看的人了。作为一个合格的IT从业者，代码应该同出一门，让所有的同行都应该看的懂，如果你写的代码很难辨认

1. 前言 在使用form表单的按钮时，点击按钮总是页面刷新，代码如下 <button class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button> 2. 方案 通过监听submit事件，并在监听最后 return false; 即可阻止页面刷新 form.on('submit(search)', function (data) { //alert(111); return false; }); 另外，在 form表单中不能直接监听 button 按钮 ，不要问，问就是没有 目前是通过在 button 标签中添加 lay-submit 和 lay-filter="search" 再加上 return false; 实现 来源： oschina 链接： https://my.oschina.net/u/4260217/blog/4387488

摘要：使用validate.js在前端实现表单数据提交前的验证 　 　好久没写博客了，真的是罪过，以后不能这样了，只学习不思考，学的都是白搭，希望在博客园能记录下自己学习的点滴，虽然记录的都是些浅显的技术，但能起到巩固自己和稍微帮助一下和我一样的菜鸡也是不错的，哈哈，不好意思，闲话扯多了。 　　今天想把之前学的表单验证的方法复习一遍，因为明天的工作中要用到，而且好久没复习了，都快忘记了。 　　现在是学的ASP.NET，关于表单验证，目前知道的，除了以前那种傻瓜式的每个表单选项都用一个函数去验证之外，有两种方法是比较方便的，今天先介绍一下第一种，在前端实现表单验证的方法——基于validate.js的表单验证方法。 注意哟，以下我都用截图的方式挂出代码，然后最后会把完整代码贴出来，提供复制粘贴，小伙伴不要急着敲哦！ 1.下载和引入validate.js 　　首先，我们需要下载一份validate.js文件，这个文件可以去JQuery官网或者csdn等网站下载。 　　 下载好之后，新建一个html文件，然后先后将jquery.js文件和validate.js引入html代码，我这里新建一个名为formCheck.html的文件，如下图所示： 这里为了待会的表单表现的好看一些，我引入了layui.css的样式文件。 2.建立表单 3.使用validate.js实现表单数据的验证 同样

实现效果:表头和底部分页固定，鼠标滚动只会滚顶body中数据。效果如下： 1、找到layui中的table.js文件，在变量table中加入属性，如图红框中内容： fiexdRowHeight：是否开启固定行高，默认是false fiexdRowHeight_rows：表格中显示条数，默认是10条 以上两个参数都可以通过自己传入参数值 2、找到pullData函数： 在此函数中ajax异步请求成功回调的success函数中最后添加如下代码： //固定行高、表头处理 if(Object.prototype.toString.call(options.fiexdRowHeight).slice(8, -1) === 'Boolean' && options.fiexdRowHeight) { var div_ = $("[lay-id='" + options.id + "']") var tr_len = div_.find(ELEM_MAIN).find("tr").length if(tr_len > 10){ if(Object.prototype.toString.call(options.fiexdRowHeight_rows).slice(8, -1) !== 'Number') { options.fiexdRowHeight_rows = 10 } var

html页面的代码（注意：引入layui相关的css）： <div class="layui-upload" style="margin-left: 130px"> <button type="button" class=" layui-btn" id="choiceList"><i class="iconfont icon-e645"></i>选择多文件</button> <div class="layui-upload-list layui-upList-minHeight"> <table class="layui-table"> <thead> <tr> <th>文件名</th> <th>大小</th> <th>状态</th> <th>操作</th> </tr> </thead> <tbody id="demoList"> <tr id="upload"> <td>xxx.txt</td> <td>xxxkb</td> <td>等待上传</td> <td><button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button><button class="layui-btn layui-btn-xs layui-btn-danger demo-delete" disabled>删除</button><

今天遇到这样一个需求，将查查出来的数据导出来，不是将所有的数据导出来，而是要导出满足条件的数据，也就是说下载的时候要将查询的条件传到后台。 例如: 先查询课程性质是选修的课程然后导出来: 前台封装条件的form: < form class ="layui-form layui-col-md12 x-so" id ="queryCourseForm" > <% -- 隐藏两个，一个当前页，一个页号 -- %> <% -- 当前页 -- %> < input type ="hidden" name ="pageNum" /> < input type ="hidden" name ="pageSize" /> < div class ="layui-input-inline" > < input type ="text" name ="coursenamecn" placeholder ="请输入课程中文名称" autocomplete ="off" class ="layui-input" > </ div > < div class ="layui-input-inline" > < select name ="courseplatform" > < option value ="" > 请选择课程平台 </ option > < option value ="通识教育" >

如果content取的的事当前页面元素内容时，type类型应该为1 layer.open({ type: 1, title: '内容区域', content: $('#DIV_EditUserInfo'), // 设置跳转的div，跳转到对应的页面 area: ["920px", "250px"], }); 如果content取的的路径，或者某个页面，type类型应该为2 layer.open({ type: 2, title: "内容区域", content: 'UserInfoEdit.html?actionType=new', // 设置跳转的url，跳转到对应的页面 area: ["1500px", "100%"], }); 来源： oschina 链接： https://my.oschina.net/u/4381686/blog/4496473

我上个项目是做了一个关于教育方面的web端页面，其中的课程表就要用到fullcalendar日历插件，刚开始也是不会用，因为以前也没用过，后面也是看官方文档，问同事，最后完成了这个课程表，个人感觉fullcalendar这个日历插件功能很强大！下面我来附上几张图片： 1、刚进去默认显示当前月份，查出数据库的数据并展示，今天是2018年1月19号，所以我给上过的课次颜色变为灰色，而没上过的课次变为橙色： 2、点击特定的日期，添加课次： 点击未上过的课次进行编辑或删除： 以及课次的拖动，如将1月22号的“08:00-09:00 高数一班”拖动到1月29号： 下面我来说一下我是怎么实现的 首先需要导入必须的css和js： <link href=' ../../../../static/fullcalendar/css/fullcalendar.css ' rel=' stylesheet' /> <script src=' ../../../../static/fullcalendar/js/jquery.min.js '> </script> <script src=' ../../../../static/fullcalendar/js/moment.min.js '> </script> <script src=' ../../../../static/fullcalendar

本地存储 本地存储是对 localStorage 和 sessionStorage 的友好封装，可更方便地管理本地数据。 localStorage 持久化存储： layui.data(table, settings)，数据会永久存在，除非物理删除。 sessionStorage 会话性存储： layui.sessionData(table, settings) ，页面关闭后即失效。注： layui 2.2.5 新增 上述两个方法的使用方式是完全一样的。其中参数 table 为表名， settings 是一个对象，用于设置 key、value。下面以 layui.data 方法为例： //【增】：向 test 表插入一个 nickname 字段，如果该表不存在，则自动建立。 layui.data('test', { key: 'nickname' ,value: '贤心' }); //【删】：删除 test 表的 nickname 字段 layui.data('test', { key: 'nickname' ,remove: true }); layui.data('test', null); //删除test表 //【改】：同【增】，会覆盖已经存储的数据 //【查】：向 test 表读取全部的数据 var localTest = layui.data('test');

物联网项目开发 start 01 小威架构 / boot-backend https://gitee.com/zhang.w/boot-backend.git 此项目源码采用前后端分离方式，spring boot开发后端，使用shiro进行权限控制,layui、bootstrap、jquery、html为前端,基于json进行交互,接口完全采用Restful的风格， 实现按钮级权限控制，可以作为开发项目的脚手架，做为基础项目。 1、git maven spring java web jdk idea community https://gitee.com/zhang.w/boot-backend.git sprint boot 2、source db code dependencies database script sql config db password　　 config email and password 3、pom file pom parent spring boot test spring boot spring boot aop actuator apring boot lombok 　plugins 　 lombok json fastjson starter-web mybatis for db connection shiro mysql ehcache