您当前的位置:首页 > 电脑百科 > 程序开发 > 框架

嘘,认真看!Layui一定是Java程序员必备后台前端框架

时间:2021-03-09 10:33:58  来源:cnblogs  作者:Stanley 罗昊

本文作者 : Stanley 罗昊

本文转自:
https://www.cnblogs.com/StanleyBlogs/p/14480990.html

下载Layui与文件分析

下载直接去官网下载即可

嘘,认真看!Layui一定是Java程序员必备后台前端框架

 

文件分析

下载完成后,解压会得到一个文件夹,内部有一些文件是可以直接删除的,比如文档与示例,更新日志之类的,我们仅仅只要上面那个layui文件夹。

嘘,认真看!Layui一定是Java程序员必备后台前端框架

 

我们直接点进去,开始文件介绍:

嘘,认真看!Layui一定是Java程序员必备后台前端框架

 

css:样式,使用UI框架以后,基本上不需要我们去写样式,这里的css只是对layui的一些支持文件,当然也缺一不可。

font:字体。

imges:图标,框架内的图片,点进去后发现只是一些小的表情包,意味着layui自带了富文本编辑器。

lay:类的话里面是有一些modules,是一些layui封装好的内置模块,比如弹出层(详细可以在官网内置模块区查看)

layui.all与layui有什么区别呢?

先看大小区别layui.all明显比layui大;

layui.all包含了所有模块的js

layui它只是一个框架,如果要用一些模块功能,那么必须要使用layu.use的方式

当然我们一般都用layui,因为它体积小,另外那个太大了;

不要小看200kb,在网络上200多kb已经比较大了。

layui的使用方法

首先需要先创建一个JAVAWeb项目,因为我们都知道,web项目就不单单去写java代码,逻辑之类的,而是要去全栈,也就是前后端都需要你一个人完成,所以Layui的出世给后端java程序员带来了福音。

简单看一下web项目的结构:

嘘,认真看!Layui一定是Java程序员必备后台前端框架

 

一般web项目创建的时候是不会自带resource文件的,我们需要自己手动创建,这个也是web项目必须要有的文件,要存放所有静态资源,Layui也不例外,它也属于静态资源。

创建一个jsp或者html都行,因为我这里刚好有一个index.jsp我就直接用了;

在jsp页面中,我们需要引入layui,引用代码:

    <link rel="stylesheet" href="resources/layui/css/layui.css">
  <script src="resources/layui/layui.js"></script>
嘘,认真看!Layui一定是Java程序员必备后台前端框架

 

使用layui最终我们就只引用这两行代码即可

如何使用图标

有两种使用方式:

1.使用字符实体

嘘,认真看!Layui一定是Java程序员必备后台前端框架

 

我们看到在图标下方有一串字符,我们直接复制这一串字符,在jsp页面上按照文档上的规范写出来查看效果

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 <html>
 3   <head>
 4     <title>图标</title>
 5     <link rel="stylesheet" href="resources/layui/css/layui.css">
 6   </head>
 7   <body>
 8   <div class="layui-icon"></div>
 9   <script src="resources/layui/layui.js"></script>
10   </body>
11 </html>
嘘,认真看!Layui一定是Java程序员必备后台前端框架

 

2.使用样式

  <div class="layui-icon layui-icon-cellphone"></div>
嘘,认真看!Layui一定是Java程序员必备后台前端框架

 

像这种,前端框架,我们可以只知道基础即可,如果有那些不会的,随时可以访问官方文档进行学习。

按钮

嘘,认真看!Layui一定是Java程序员必备后台前端框架

 

在官方文档处,也有按钮的相关介绍,我们可以简单地了解一下按钮怎么使用;

我们直接切成示例模式,直接复制粘贴一部分按钮代码,我们在页面上直接查看源代码;

具体操作如下:

嘘,认真看!Layui一定是Java程序员必备后台前端框架

 

按钮代码实现:

 1 <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
 2     <legend>按钮主题</legend>
 3     <div>
 4       <button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
 5       <button type="button" class="layui-btn">默认按钮</button>
 6       <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
 7       <button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
 8       <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
 9       <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
10     </div>
11   </fieldset>
嘘,认真看!Layui一定是Java程序员必备后台前端框架

 

jsp代码演示:

嘘,认真看!Layui一定是Java程序员必备后台前端框架

 

 代码分析 (相关样式)

1.必要样式:layui-btn,这个样式就代表一个按钮,标识这一行type采用layui的样式中的按钮样式

2.主题样式:既然已经设置了必要样式,代表它是一个layui的按钮,那么我们就可以切换你想要的样式(样子);比如在后面加了一个kayui-bth-danger这个就代表是一个警告样式的按钮;

      <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>

设置按钮大小

嘘,认真看!Layui一定是Java程序员必备后台前端框架

 

先看源码:

 <button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
    <button type="button" class="layui-btn layui-btn-primary">默认按钮</button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>

这一项就是单纯的可以设置按钮的尺寸,我们可以直接在原本的按钮上添加这行代码比如就像这样:

      <button type="button" class="layui-btn layui-btn-disabled layui-btn-lg">禁用按钮</button>

仅仅在后面追加了一个layui-btn-lg即可在原来按钮的样式基础上追加这个尺寸样式。

图标按钮

刚刚我们尝试了常规按钮样式的基础上添加了尺寸,那么我们就可以举一反三,也在按钮上添加自己喜欢的图标,我们直接写出代码即可,在文档上我们可以去挑选自己喜欢的图标,对应参数即可,在上面也有讲到过;

      <button type="button" class="layui-btn layui-btn-danger layui-icon layui-icon-rate-half">警告按钮</button>

效果图

嘘,认真看!Layui一定是Java程序员必备后台前端框架

 

所以只要灵活运用layui的组件,就可以自行完成拼接,自定义自己喜欢的样式;

带文字的图标按钮正规写法

上述我们直接在button之间写文字即可,但是这样并不规范而且图标与文字也不公正对齐,我们正确的写法:

1   <button type="button" class="layui-btn layui-icon ">
2           <span class="layui-icon"></span>手机按钮
3       </button>

我们删掉了前面警告样式的代码,所以现在只是一个普通样式的按钮:

嘘,认真看!Layui一定是Java程序员必备后台前端框架

 

 事件监听(按钮)

我们使用按钮,那么必然要触发事件,所以,我们该如何判断监听事件呢?

加事件的写法跟Jquery的写写法几乎一模一样:

首先要给标签加id,唯一标识调用的时候要对应:

1       <button type="button" class="layui-btn layui-icon " id="add">添加</button>
2         <button type="button" class="layui-btn layui-icon "id="update">编辑</button>
3         <button type="button" class="layui-btn layui-icon "id="delete">删除</button>

然后引入JS正常写function(方法)即可:

 1  <script src="resources/layui/layui.js"></script>
 2   <script type="text/JavaScript">
 3       <!--调用监听add按钮,点击后触发事件-->
 4       layui.use(["jquery"],function (){
 5           var $=layui.jquery;
 6           $("#add").click(function (){
 7               alert($(this).html())
 8           })
 9       })
10   </script>
嘘,认真看!Layui一定是Java程序员必备后台前端框架

 

写过Js的人应该都发现了,layui的处理事件以及逻辑都依赖于js跟Jquery,当然我们也只是在剖析layui的每个组件,其实我们平时一般都直接下载下来整个layui框架,大部分代码以及组件都是实现好的,我们只需要在上面更改即可。



Tags:Layui   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
本文作者 : Stanley 罗昊本文转自: https://www.cnblogs.com/StanleyBlogs/p/14480990.html下载Layui与文件分析下载直接去官网下载即可 文件分析下载完成后,解压会得到一个文...【详细内容】
2021-03-09  Tags: Layui  点击:(220)  评论:(0)  加入收藏
▌简易百科推荐
近日只是为了想尽办法为 Flask 实现 Swagger UI 文档功能,基本上要让 Flask 配合 Flasgger, 所以写了篇 Flask 应用集成 Swagger UI 。然而不断的 Google 过程中偶然间发现了...【详细内容】
2021-12-23  Python阿杰    Tags:FastAPI   点击:(6)  评论:(0)  加入收藏
文章目录1、Quartz1.1 引入依赖<dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>quartz</artifactId> <version>2.3.2</version></dependency>...【详细内容】
2021-12-22  java老人头    Tags:框架   点击:(11)  评论:(0)  加入收藏
今天来梳理下 Spring 的整体脉络啦,为后面的文章做个铺垫~后面几篇文章应该会讲讲这些内容啦 Spring AOP 插件 (了好久都忘了 ) 分享下 4ye 在项目中利用 AOP + MybatisPlus 对...【详细内容】
2021-12-07  Java4ye    Tags:Spring   点击:(14)  评论:(0)  加入收藏
&emsp;前面通过入门案例介绍,我们发现在SpringSecurity中如果我们没有使用自定义的登录界面,那么SpringSecurity会给我们提供一个系统登录界面。但真实项目中我们一般都会使用...【详细内容】
2021-12-06  波哥带你学Java    Tags:SpringSecurity   点击:(18)  评论:(0)  加入收藏
React 简介 React 基本使用<div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js...【详细内容】
2021-11-30  清闲的帆船先生    Tags:框架   点击:(19)  评论:(0)  加入收藏
流水线(Pipeline)是把一个重复的过程分解为若干个子过程,使每个子过程与其他子过程并行进行的技术。本文主要介绍了诞生于云原生时代的流水线框架 Argo。 什么是流水线?在计算机...【详细内容】
2021-11-30  叼着猫的鱼    Tags:框架   点击:(21)  评论:(0)  加入收藏
TKinterThinter 是标准的python包,你可以在linx,macos,windows上使用它,你不需要安装它,因为它是python自带的扩展包。 它采用TCL的控制接口,你可以非常方便地写出图形界面,如...【详细内容】
2021-11-30    梦回故里归来  Tags:框架   点击:(26)  评论:(0)  加入收藏
前言项目中的配置文件会有密码的存在,例如数据库的密码、邮箱的密码、FTP的密码等。配置的密码以明文的方式暴露,并不是一种安全的方式,特别是大型项目的生产环境中,因为配置文...【详细内容】
2021-11-17  充满元气的java爱好者  博客园  Tags:SpringBoot   点击:(25)  评论:(0)  加入收藏
一、搭建环境1、创建数据库表和表结构create table account(id INT identity(1,1) primary key,name varchar(20),[money] DECIMAL2、创建maven的工程SSM,在pom.xml文件引入...【详细内容】
2021-11-11  AT小白在线中  搜狐号  Tags:开发框架   点击:(29)  评论:(0)  加入收藏
SpringBoot开发的物联网通信平台系统项目功能模块 功能 说明 MQTT 1.SSL支持 2.集群化部署时暂不支持retain&will类型消 UDP ...【详细内容】
2021-11-05  小程序建站    Tags:SpringBoot   点击:(55)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条