您现在的位置是:首页 > 正文

Layui概述---学习笔记

2024-04-01 01:20:58阅读 3

Layui框架-图标组件&按钮组件

Layui概述

layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

Layui的获取

直接访问官网就可以下载Layui框架的最新版本
Layui官网

Layui的目录结构

在下载了Layui之后,解压打开之后,可以看到如图:
在这里插入图片描述
点击layui文件夹,就可以看见layui框架的全部内容
在这里插入图片描述

Layui的引入

1.首先在Hbuilder x(小编用的是这个,大家可以根据自己的爱好来选择)创建一个新的项目:在这里插入图片描述
2.将解压后的layui整个文件夹复制到这个项目中去:
在这里插入图片描述
3.新建一个html文件,打开新建 的html文件,然后通过如下两行代码引入layui.css和layui.js
在这里插入图片描述

 <link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.js"></script>

由于有一些人会在项目下新建一个resources文件夹,然后放入layui相关文件,所以上述路径需要根据自己放的目录进行填写
上述为第一种方式,叫做模块化式引入,之所以这么起名,是因为我们每次想要调用一些模块时都需要通过如下的方法

<!-- 引入js -->
		<script src="layui/layui.js"></script>
		<script type="text/javascript">
			layui.use(["jquery"],function(){
				//获取jquery对象
				var $ = layui.jquery;
				//为按钮添加事件
				$("#add").click(function(){
					alert($(this).html())
				});
			
				$("#delete").click(function(){
					alert($(this).html())
				});
		
			});
		</script>

这里引入了jquery模块,layui有很多模块,在layui-v2.5.6\layui-v2.5.6\layui\lay\modules这里我们可以看到,layui有如图所示的一些模块:
在这里插入图片描述
这里每一个模块的使用都需要通过上述代码的形式进行引入,希望大家熟记,这也是layui作者推荐大家使用的一种方式。
官网还为我们提供了第二种引入方式(不推荐,因为一个项目很难用到所有模块,所以不需要全部引入),非模块化方式,引入代码如下

 <link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.all.js"></script>
//模块通过layui.all.js全部加载完毕,所以直接使用即可,不需要通过layui.use的方式。
;!function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
}();

除了内置的一些模块外,layui还支持模块的拓展,具体的使用方法官网文档也给出了使用方法,各位小伙伴们可以自己去看呀,小编这里暂时用不到就不详细解释啦
以上就是layui的概述和引用方式了,做好了以上工作以后,我们就可以开始学习使用layui的一些页面元素和内置模块了

网站文章

  • 工作2年的java程序员怎么提高技术?

    工作2年的java程序员怎么提高技术?

    首先你基础要扎实.这里的基础不是说Java基础.而是算法,数据结构,典型的设计模式等原理并能用代码实现.这个开发两年了,可以重新温故一下了.这方面资料很多,可以到某些电商平台,搜索对应的热销书籍,或者...

    2024-04-01 01:20:33
  • TCP的拥塞控制

    TCP的拥塞控制

    介绍了拥塞控制的概念以及拥塞控制的四个算法

    2024-04-01 01:20:25
  • 快手19春招实习笔试(Leetcode 136 && Leetcode 665)

    快手19春招实习笔试(Leetcode 136 && Leetcode 665)快手3.30晚笔试编程题,比较简单,两道都是Leetcode原题。1.Leetcode 136 Single NumberGiven a non-empty array of integers, every element appears twice except for one. Find t...

    2024-04-01 01:20:18
  • 2020年牛客网校招编程笔试题相关问题

    2020年牛客网校招编程笔试题相关问题

    这里主要是介绍一些关于牛客网上面编程题笔试系统的一些容易踩的坑。希望大家春招顺利!据说点一下关注可以拿到满意的 offer! 1. 接口类型测试 牛客网的编程题目分为两种形式,第一种形式是完善核心代码...

    2024-04-01 01:20:10
  • Spring Boot全局支持CORS(跨源请求)的配置方法

    http://blog.csdn.net/zhangchao19890805/article/details/53893735 开发的时候,后端应用了 RESTful 风格的开发方式。同时使用了前后端完全分离的架构设计。这样的话就会碰到浏览器需要处理ajax请求跨源资源的问题。因为需要所有 Web API 都需要支持跨源资源共享(CORS),所以需要进行全局设置。 sprin

    2024-04-01 01:19:44
  • input 与 inline 标签水平不对齐的解决办法

    input 与 inline 标签水平不对齐的解决办法

    今天做一个网页,input 与 a 高度一致却遇到了平时认为理所当然水平对齐的事情,居然做不到了。。。。细心的小伙伴发现了吗?input 与 变成行级块元素的a标签竟然出现了水平不对齐,于是找度娘问问...

    2024-04-01 01:19:34
  • excel表数据挂接到arcgis中

    excel表数据挂接到arcgis中

    不需要在arcmap中新增字段,直接挂接即可 不需要编辑图层 要导入的excel表: 右键选中操作图层 点击连接和关联选择连接: 最终导入:

    2024-04-01 01:19:04
  • 数组左移一位,右移一位,左移k位,右移k位

    void Print_Array(int *br,const int n) //输出打印数组 { for(int i=0;i0); int temp=*(br + n-1); //把数组最后一位元素给t.

    2024-04-01 01:18:57
  • 如何解决 Camtasia9 导入 srt 字幕后出现乱码的问题

    如何解决 Camtasia9 导入 srt 字幕后出现乱码的问题

    最近在用Camtasia9 做视频录制的时候,需要导入第三方的字幕文件(SRT文件),在操作无误的情况下,字幕可以顺利导入软件中,但字幕出现了乱码的现象。 ...

    2024-04-01 01:18:49
  • 端口号占用快速解决方法

    端口号占用快速解决方法

    有的时候我们的电脑中突然软件卡死、然后重启的时候。之前运行的项目在端口没杀死就会被占用掉,无法启动。这个时候我们就需要找出这个端口,并杀死它。

    2024-04-01 01:18:22