学习使用layui前端UI框架

最近有一个学习前端的需要,当看完CSS基础之后便准备简单了解一下各个框架,起初选择bootstrap,后经朋友推荐简单的学习了layui框架。

layui框架真的是超级超级超级简单,本着是时候发篇博客的需求,记录一下。

初始化

前往官网( https://www.layui.com/ )直接下载,然后将内容解压到项目根目录。

注意,框架内容是下图这个亚子。

image.png

在要使用的html中引入

“/layui/css/layui.css”“/layui/layui.js”两个文件。

我们以执行js的方式加载以下代码,便成功将框架初始化。

layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});

layer.use()的意思是加载一个模块,假设你使用一个‘导航’的页面元素,那么你就得加载“element”模块,以代码形式显示就是:

layui.use('element');

这样,你就成功的初始化啦~

页面元素

实际上我以为使用各种美化的页面元素应该是一个很麻烦的事情,原谅我对前端的无知吧。

一般的,使用layui的页面元素只需要在class参数中添加对应的值就ok。

例如我们想要获得button,则是:

<button type="button" class="layui-btn">立即提交</button>

image.png

这时我们就得到了一个相对于原始按钮很是优雅的按钮。其他的页面元素实际上都大同小异,唯一的差别似乎就是有的元素需要导入对应的模块,而在初始化已经讲过使用layui.use()函数即可加载。

弹出层

我觉得似乎这个是最有趣的~

image.png

初看以为只是简单的提示框,通过浏览开发文档得知,弹出层不仅可以显示出字符串还可以显示html或者dom。

简单的演示

layer.open({
 title:'我是一个标题',
 content:'我是内容',
 btn:['yes','no']
});

image.png

代码很清晰,常用的有三个参数,标题、显示内容和按钮内容,同样的还可以设置提示的图标、宽高、坐标、显示动画,我们在这里就不再一一阐述。

回调

当然,很简单的弹出提示似乎很难满足我们的需求,我们还可以设置回调函数:

layer.open({
  content: '测试回调',
  btn:['yes','no'],
  yes: function(index, layero){
    layer.msg(1000); 
  }
});  

这时按下确认按钮(yes)便会显示layer内置的提示。

image.png

而相同的还有:success(弹出成功的回调)、cantel(关闭后的回调)、等。

加载HTML

而如果我们想要将弹出层显示html,我们需要设置一个tyep参数,这个参数决定了content参数以什么形式显示出内容。

类型:Number,默认:0
layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)

因此,我们将tyep参数设置为2,即可显示指定的html。

layer.open({
		type:2,
		area: ['450px', '450px'],
		title: '留言',
		anim:6,
		scrollbar: false,
		content: './leave.html'
	});     

image.png

# 前端