Java程序员必备后台前端框架--Layui【从入门到实战】（一）

时间 2021-03-05

标签 javascript css html 前端 java jquery 程序员 web 编程后端栏目 Java 繁體版

原文原文链接

layui入门使用及图标、按钮的使用

做者： Stanley 罗昊javascript

【转载请注明出处和署名，谢谢！】css

【编程工具：IDEA】html

下载Layui与文件分析

下载直接去官网下载便可前端

文件分析

下载完成后，解压会获得一个文件夹，内部有一些文件是能够直接删除的，好比文档与示例，更新日志之类的，咱们仅仅只要上面那个layui文件夹。java

咱们直接点进去，开始文件介绍：jquery

CSS：样式，使用UI框架之后，基本上不须要咱们去写样式，这里的css只是对layui的一些支持文件，固然也缺一不可。程序员

font：字体。web

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项目的结构:

通常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最终咱们就只引用这两行代码便可

如何使用图标

有两种使用方式：

1.使用字符实体

咱们看到在图标下方有一串字符，咱们直接复制这一串字符，在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">&#xe68f;</div>
 9   <script src="resources/layui/layui.js"></script>
10   </body>
11 </html>

2.使用样式

  <div class="layui-icon layui-icon-cellphone"></div>

像这种，前端框架，咱们能够只知道基础便可，若是有那些不会的，随时能够访问官方文档进行学习。

按钮

在官方文档处，也有按钮的相关介绍，咱们能够简单的了解一下按钮怎么使用；

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

具体操做以下：

按钮代码实现：

 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>

jsp代码演示：

代码分析（相关样式）

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

2.主题样式：既然已经设置了必要样式，表明它是一个layui的按钮，那么咱们就能够切换你想要的样式（样子）；好比在后面加了一个kayui-bth-danger这个就表明是一个警告样式的按钮；

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

设置按钮大小

先看源码：

 <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的组件，就能够自行完成拼接，自定义本身喜欢的样式；

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

上述咱们直接在button之间写文字便可，可是这样并不规范并且图标与文字也不公正对齐，咱们正确的写法：

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

咱们删掉了前面警告样式的代码，因此如今只是一个普通样式的按钮：

事件监听（按钮）

咱们使用按钮，那么必然要触发事件，因此，咱们该如何判断监听事件呢？

加事件的写法跟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>

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