layui

昨天有个同事问我有没有可以直接上手的前端UI框架。 那今天就给大家推荐6个简单、视觉体验好的前端框架 没吃过猪肉，肯定见过猪跑！ Jquery Mobile demo地址： https://demos.jquerymobile.com/1.1.0/ 教程地址: https://www.codesocang.com/jquerymobile/jquerymobile/7/index.html 这个应该是最简单的，能够快速上手了！ jQuery Mobile 还发布一个完整统一的jQuery移动 UI组件。支持全球主流的移动平台。 部件是功能丰富，有状态的插件。随着方法和事件，有一个完整的生命周期。 如果想5分钟就能直接上手的，Jquery Mobile首当其冲！ ColorUI github地址： https://github.com/weilanwl/ColorUI 官网地址： https://www.color-ui.com/ 鲜亮的高饱和色彩，专注视觉的小程序组件库 ColorUI 是小程序组件库，但不是纯样式库。由于WeUI有些淡雅，可能不合某些时尚公司的风格，因此 ColorUI 也有庞大的追捧者。 github上标星高达8.8k 相信你肯定有用过使用ColorUI的小程序 如果要开发小程序，这款开源框架是一个不错的选择。 Material material

html: <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header" style="background-color: #e6e6e6">资料清单</div> <div class="layui-card-body" style="height: 200px;"> <table class="layui-hide" id="serviceMaterialListTable" lay-filter="serviceMaterialListTable"></table> <script type="text/html" id="serviceMaterialListTable-toolbar"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" data-type="addMaterial">添加</button> </div> </script> <script type="text/html" id="serviceMaterialListTable-bar"> <%--<a class="layui-btn layui-btn-xs" lay-event=

表格div: <div style="width: 100%;overflow-x: auto;"> <table class="layui-hide" id="businessMenuListTable" lay-filter="businessMenuListTable"></table> </div> js,引入treeTable layui.config({ base: '${ctxLayui}/layuiadmin/' }).extend({ index: 'lib/index' }).use(['index', 'table','dict','laydate','util','treeTable'], function(){ var $ = layui.$,table = layui.table,form = layui.form; var dict = layui.dict; var laydate = layui.laydate; var admin = layui.admin; var util = layui.util; var treeTable = layui.treeTable; treeTable 下载： https://fly.layui.com/extend/treeTable/ 表格： var insTb = treeTable.render({

最近做一个后台项目，用到了layui，需要设计一个单选按钮并且添加点击事件。 参考了下官方文档 https://www.layui.com/doc/modules/form.html#onradio ，最终还是实现了这个效果。给layui一个好评，用layui来做后台管理系统确实不错。 html代码 < div class ="layui-form-item" > < label class ="layui-form-label" >< span style ="color: red" > * </ span > 选择: </ label > < div class ="layui-input-inline" > < input type ="radio" lay-filter ="testRadio" lay-verify ="required" name ="state" value ="pass" title ="通过" > < input type ="radio" lay-filter ="testRadio" lay-verify ="required" name ="state" value ="reject" title ="驳回" > </ div > </ div > js代码 form.on('radio(testRadio)', function (data

top.layui.form.on('submit(auditEgressionTodoList-refresh)', function(data){ top.layui.$(':input').not(':button, :submit, :reset').val('').removeAttr('selected').removeAttr('checked') search_field = {}; top.layui.form.render(); table.reload('auditEgressionTodoList', { where: $.extend({ userName:null, companyName:null, beginTimeStart:null, beginTimeEnd:null, endTimeStart:null, endTimeEnd:null, withType:null, status:null, createTimeStart:null, createTimeEnd:null, },where) }); }); $.extend 的第一个参数：为搜索字段， 需要全部置为 null 来源： oschina 链接： https://my.oschina.net/u/4334778/blog/4619338

处理方法：直接用html处理元素的方法， 在table的done方法处理： ,done: function(res, curr, count){ var divArr = $(".layui-table-total div.layui-table-cell"); $.each(divArr,function (index,item) { var _div = $(item); var content = _div.html(); content = content.replace(".00",""); _div.html(content); }); } 来源： oschina 链接： https://my.oschina.net/u/4400968/blog/4608370

下载地址： 百度网盘 Java可视化UML工作流系统（Activiti7+SpringBoot） “程序是有逻辑的，业务是有流程的”，工作流引擎可以减少硬编码，高效处理业务需求变更，所以领悟工作流引擎背后的思想，将有助于在职场中高效交付工作结果，是助你奠定程序生涯迈向更高平台的“基石”。讲师倾囊相授三大核心：① 以“代码驱动式”教学模式，精讲最新版工作流引擎Activiti7核心组件；② 传授你业 务建模或者软件建模的“工程化思维”；③ 基于SpringBoot+Activiti+SpringSecurity 等技术栈，“手把手”带你设计与实战企业级的黑马项目：《通用型可视化UML工作流系统》。 适合人群 有志于成为“程序员”的优秀青年 初入职场Java工程师 对业务建模、UML软件建模感兴趣的人 技术储备要求 熟悉Java基本语法 了解Maven基本使用 MySQL基本的CRUD 章节目录： 第1章 清晰的学习目标，让学习更轻松 首先项目演示了解项目整体情况，便于小伙伴通过本课程学习，能够最终做出的怎样的项目效果。同时，明确学习activiti工作流对今后工作的重要性，确立学习目标。 1-1 玩转黑马项目，“技术+业务”能力齐飞试看 第2章 开发前准备：环境搭建篇【选修】 所谓“君欲善其事，必先利其器”，因此本章带着小伙伴们将课程所需环境一一构建起来，小伙伴们可以结合自己情况

打开的页面为一个页签 top.layui.index.openTabsPage('business/businessUserShow.jsp#/self=1','个人信息') businessUserShow.jsp: <script> layui.config({ base: '${ctxLayui}/layuiadmin/' }).extend({ index: 'lib/index' }).use(['index', 'form','dict','laytpl','util','element'], function(){ var $ = layui.$ ,form = layui.form; var dict = layui.dict; var laytpl = layui.laytpl; var util = layui.util; var router = layui.router(); var admin = layui.admin; var formData = window.parent.formData; var self = null; try{ self = router.search.self; if(self==1){ // top.layui.index.openTabsPage('business/businessUserShow.jsp#/self

　　前言 　　前段时间我们写一个简单的后台模板 SpringBoot系列——Security + Layui实现一套权限管理后台模板 ，今天我们把它完善成一个简单通用的后台管理系统，我把它叫做：Base Admin 　　这套Base Admin是一套简单通用的后台管理系统，主要功能有：权限管理、菜单管理、用户管理，系统设置、实时日志，实时监控，API加密，以及登录用户修改密码、配置个性菜单等 　　技术栈 　　前端：layui 　　java后端：SpringBoot + Thymeleaf + WebSocket + Spring Security + SpringData-Jpa + MySql 　　工程结构说明 　　java部分、html、js、css部分都是大目录下面按单表一个子目录存放 　　2020-06-10更新 　　之前调整过前端文件结构布局，现在重新更新说明一下 　　运行预览 　　效果先睹为快，具体介绍在下方，按功能点进行详情介绍 　　功能演示 　　登录 　　（为了方便演示，密码输入框的类型改成text） 　　配置文件分支选择，dev环境无需输入验证码 　　同时支持多种登录限制 　　允许/禁止账号多人在线 　　软删除 　 　　　限制登录IP地址 　　账号过期 　　更多登录限制，还可以继续扩展 　　系统设置 　　一下简单的系统属性设置，想支持更多的配置可自行扩展

文中使用的LayUI版本：layui-v2.5.5 问题描述： 最近参与开发了 狐小E智慧办公 （https://www.hixiaoe.com）项目的 管理中台 模块，前端技术使用了LayUI作为前端开发的主要控件，但在使用过程中，有些功能控件未尽其能。比如遇到的问题：产品人员针对项目整体风格给出的设计，方案是项目中所有列表的展示无论每列是否完整，当鼠标悬浮到当前列时，必须出现浮动显示当前列所有内容的效果。但是原生的Layui中并未提供相关的功能实现，深表遗憾。 问题分析： 要实现鼠标悬浮显示所有内容，一般采用的都是给对应元素上添加 title 属性，这样当鼠标悬浮在对应列的时候，就可以显示该列所有内容。 可以利用Layui table模块的 templet - 自定义列模板 给每个列都返回新的元素带上 title 属性即可。但是由于项目风格要求凡是列表中的列都必须有这样的效果，给每个页面每个表格的每列都写templet模板，给元素添加title属性这样实现肯定不现实，一样的效果应该全局统一改，在一处地方能实现这样最好，所以想的方案就是——改源码（从渲染表格的单元格处入手）。 解决方案： 首先找到加载表格的源代码，在下图位置： 由于是自执行函数，需要在此处拼接div，并给div加入title属性，属性内容为当前列所有文字内容： 改动后如下图： 这样每列数据都会添加title属性