LayUI
前端框架Layui相关内容
小马 同学
Java | Web前端 | 数据结构与算法 | 记录学习
展开
-
Layui图片上传组件使用指南
前言Layui是一套非常棒的前端框架,页面简约美观,关键是非常容易上手,在开发中也是很多项目的首选。之前用Layui做过开发,现在整理一下Layui的文件上传组件,Layui上传组件页面效果看起来非常舒服,简约美观。之前也用过Bootstrap的上传组件,这两款上传组件平分秋色,各有各的特点,总而言之,都是很实用而且很美观的上传组件,想了解BootStrap上传组件的请移步:BootStrap ...原创 2020-02-11 17:32:56 · 7898 阅读 · 16 评论 -
layui富文本域form表单提交和ajax提交获取编辑器内容详解
最近写项目中需要用到LayUI富文本编辑器,提交时发现富文本编辑器中内容是空的,查了很多资料才发现,LayUI在渲染富文本域时,是在下面插入的样式代码。我们页面上定义的是一个textarea标签,之后用JS渲染的。我们获取的内容是textarea中内容,富文本域中的内容和textarea中的内容不是自动同步的,所以我们需要在提交前把内容同步一下。form表单提交:首先定义文本域和提交按...原创 2019-04-21 15:28:29 · 10428 阅读 · 0 评论 -
layui富文本编辑器添加图片回显问题详解
最近写项目中需要用到LayUI富文本编辑器,其他地方都挺好,唯独上传图片时,要不就是上传完成后回显404,要不就是访问时404(访问时我是新打开的一个页面),返回路径一直有问题,之后把返回的路径改成绝对路径就可以。效果图如下:先添加上传图片接口,layui会自动传递参数,后台直接写对应的上传方法就行了。var layedit = layui.layedit;layedi...原创 2019-04-21 15:45:22 · 16547 阅读 · 17 评论 -
LayUI富文本域使用案例
LayUI富文本域是一款轻量级的富文本编辑器,页面设计比较简约。之前写项目时因为用的是LayUI框架,所以富文本域当时就用的LayUI富文本编辑器,这里整理一下。先来看一下效果图,页面效果图。访问效果图:首先需要引入LayUI的JS和CSS样式文件。显示LayUI的富文本域页面只需要放一个textarea标签,可以设置富文本域的默认值。<textarea ...原创 2019-04-26 11:24:44 · 17988 阅读 · 23 评论 -
LayUI树形表格treetable使用详解
LayUI是现在比较流行的一款前端框架,也有很多人基于LayUI开发了很多不错的组件,比如treetable树形表格。因为treetable是第三方基于LayUI开发的,所以需要先用Layui引入一下文件。layui.config({ base : 'static/layui/'}).extend({ treetable : 'treetable-lay/treetab...原创 2019-04-29 12:40:08 · 147473 阅读 · 109 评论 -
LayUI流加载的基本使用
最近写了一个个人博客项目,博客显示用的LayUI流加载实现的。这里整理一下吧。流加载的原理其实和分页一样,每次加载一页的数据显示,只是加载的方式不同。LayUI流加载的官方文档地址:https://www.layui.com/doc/modules/flow.html首先在HTML页面中定义一个存放加载内容的标签(页面样式可以根据自己需求进行调试):<ul class="flow-...原创 2019-06-30 10:34:41 · 9031 阅读 · 0 评论 -
LayUI—tree树形结构的使用
树形结构在实际开发中很长用到,比如部门管理,权限菜单等。因为用树形结构来展示会显的很清晰明了。最近写了一个个人博客小项目中用到了LayUI的树形结构,之后写了一个小案例整理一下。官网地址:https://www.layui.com/v1/doc/modules/tree.html先看一下显示的效果图。点击节点右面会显示对应部门的详情信息,可以修改。可以自定义按钮添加部门,也可以直接...原创 2019-09-01 21:46:46 · 105470 阅读 · 73 评论 -
LayUI时间线优化
layui时间线官方文档:https://www.layui.com/doc/element/timeline.htmllayui原本时间线样式代码部分,首先需要引入layui的样式文件<div style="margin: 20px 50px;"> <ul class="layui-timeline"> <!--定义时间线组件--> ...原创 2019-11-06 13:15:53 · 10457 阅读 · 7 评论 -
LayUI下拉树TreeSelect的使用
树形结构在实际开发中是很长用的一种结构。最近写了一个LayUI的小案例,其中用到了TreeSelect,这里整理一下。TreeSelect官网地址:https://fly.layui.com/extend/treeSelect/显示效果图。因为TreeSelect不是LayUI官方开发的,而是第三方基于LayUI开发的,所以需要先用Layui引入一下文件。之后页面只需要引入...原创 2019-12-30 08:55:31 · 30576 阅读 · 36 评论 -
LayUI数据表格的使用指南
LayUI是现在比较流行的一款前端框架,数据表格也是后台管理中很长用到的工具了。最近做项目就用到了,项目的要求是用数据表格显示出后台文章的列表并且每一行的文章都有对应的修改删除操作按钮。之后就写了一个小案例,做一下整理和记录。首先需要引入LayUI的CSS和JS样式。之后页面代码只需要一个table标签即可,只有用JS请求数据渲染表格。<table class="layui...原创 2020-01-07 18:59:49 · 11580 阅读 · 9 评论