layui入门使用及图标的使用

作者 ： Stanley 罗昊

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

【编程工具：IDEA】

下载Layui与文件分析

下载直接去官网下载即可

文件分析

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

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

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

一般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"></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"></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框架，大部分代码以及组件都是实现好的，我们只需要在上面更改即可。

Java程序员必备后台前端框架--Layui【从入门到实战】（一）的更多相关文章

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

    layui使用 导航菜单.选项卡 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] [编程工具:IDEA] 导航菜单 在layui官网中示例中,我们可以找到关于导航的例子: 我们点击查 ...

  2. Java程序员必备知识-多线程框架Executor详解

    为什么引入Executor线程池框架 new Thread()的缺点 每次new Thread()耗费性能 调用new Thread()创建的线程缺乏管理,被称为野线程,而且可以无限制创建,之间相互竞 ...

  3. Java 程序员必备的 15 个框架，前 3 个地位无可动摇！

    Java 程序员方向太多,且不说移动开发.大数据.区块链.人工智能这些,大部分 Java 程序员都是 Java Web/后端开发.那作为一名 Java Web 开发程序员必须需要熟悉哪些框架呢? 今天 ...

  4. Java程序员必备的一些流程图

    Java程序员必备的一些流程图 转自https://juejin.im/post/5d214639e51d4550bf1ae8df 前言: 整理了一些Java基础流程图/架构图,做一下笔记,大家一起学 ...

  5. Java程序员必备的 15框开发工具

    15款Java程序员必备的开发工具 如果你是一名Web开发人员,那么用膝盖想也知道你的职业生涯大部分将使用Java而度过.这是一款商业级的编程语言,我们没有办法不接触它. 对于Java,有两种截然不同 ...

  6. Android java程序员必备技能，集合与数组中遍历元素，增强for循环的使用详解及代码

    Android java程序员必备技能,集合与数组中遍历元素, 增强for循环的使用详解及代码 作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 For ...

  7. Java程序员必备的10个大数据框架！

    作者:java妞妞 blog.csdn.net/javaniuniu/article/details/71250316 当今IT开发人员面对的最大挑战就是复杂性,硬件越来越复杂,OS越来越复杂,编程语 ...

  8. 干货收藏 | Java 程序员必备的一些流程图

    阅读本文大概需要 6 分钟. 转载自:https://juejin.im/post/5d214639e51d4550bf1ae8df 1.Spring 的生命周期 Spring 作为当前 Java 最 ...

  9. Java 程序员必备的一些流程图

    1.spring的生命周期 2.TCP三次握手,四次挥手 3.线程池执行流程图 4.JVM内存结构 5.Java内存模型 6.springMVC执行流程图 7.JDBC执行流程 8.spring cl ...

随机推荐

  1. Codeforces Global Round 4 B. WOW Factor (前缀和,数学)

    题意:找出序列中有多少子序列是\(wow\),但是\(w\)只能用\(vv\)来表示. 题解:我们分别记录连续的\(v\)和\(o\)的个数,用\(v1\)和\(v2\)存,这里要注意前导\(o\)不 ...

  2. C++中流操作符<<重载的实现

    一.继承fstream后重载其<< 注意:重载函数中不能直接使用参数中的流out,否则会出现递归出错. class CLogStream : public ofstream { publi ...

  3. 创建java文件和注释

    创建java文件和注释 一 创建java文件 在文件夹里创建txt文本文件,后将格式改为.java, 输入 1 public class Hello{ 2 public static void mai ...

  4. Leetcode（870）-优势洗牌

    给定两个大小相等的数组 A 和 B,A 相对于 B 的优势可以用满足 A[i] > B[i] 的索引 i 的数目来描述. 返回 A 的任意排列,使其相对于 B 的优势最大化. 示例 1: 输入: ...

  5. 大数据开发--Hbase协处理器案例

    大数据开发--Hbase协处理器案例 1. 需求描述 在社交网站,社交APP上会存储有大量的用户数据以及用户之间的关系数据,比如A用户的好友列表会展示出他所有的好友,现有一张Hbase表,存储就是当前 ...

  6. set CSS style in js solutions All In One

    set CSS style in js solutions All In One css in js set each style property separately See the Pen se ...

  7. Flow All In One

    Flow All In One Flow is a static type checker for JavaScript https://github.com/facebook/flow https: ...

  8. GitHub in depth

    GitHub in depth GitHub 高级玩法 / 进阶教程 https://github.com/trending/dart?since=daily https://github.com/t ...

  9. Machine Learning & ML

    Machine Learning & ML https://github.com/Avik-Jain/100-Days-Of-ML-Code https://github.com/MLEver ...

  10. js & touch & swiper

    js & touch & swiper https://developer.mozilla.org/en/docs/Web/API/Touch_events "use str ...