Layui使用简要
layui是采用自身模块规范编写的前端ui框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。
核心模块一般放于layui/lay/modules文件夹中
快速搭建使用环境:
在页面引入一下两个文件:
- layui.js (/layui/layui.js)
- layui.css (layui/css/layui.css)
模块的使用:
通过layui.use([model],callback)加载模块;
//layer必须是合法的模块,即自定义或存在于
//layui/lay/modulse文件夹中,模块名即对应的文件名。
layui.use(['layer',function(){
var lay = Layui.layer;//获得layer模块(即弹出层模块)
lay.msg('hello world');
}]);
提示: layui 的模块接口会绑定在 layui 对象下,内部由 layui.define() 方法来完成。每一个模块都会一个特有的名字,并且无法被占用。所以你无需担心模块的空间被污染,除非你主动 delete layui.{模块名}。调用模块可通过 layui.use 方法来实现,然后再通过 layui 对象获得模块接口。如:
layui.use(['layer', 'laypage', 'laydate'], function(){
var layer = layui.layer //获得layer模块
,laypage = layui.laypage //获得laypage模块
,laydate = layui.laydate; //获得laydate模块
//使用模块
});
自定义模块:
同过 layui.define([model],callback)自定义;
model为需要依赖的模块,当然也可以不为数组,这样的话就只能依赖单个模块。callback为回调函数:
layui.define(['myModel', 'laypage'],function(){
//dosometing
});
layui.define('myModel',function(){
//dosometing
});
完整案例:
A>定义模块:myModel
//假定当前文件为src/js/models/Myobj.js
layui.define('myModel',function(exports){//*
//-----------------创建方法1------------------
/*var Obj = {
//定义方法
myFunction:function(){
alert('Hello World');
}
};*/
//---------------创建方法2:(建议使用)------------
//创建Obj对象,值为空
var Obj = function(){};
//为Obj对象添加属性和方法
Obj.prototype.functionName = function(){
alert('function');
}
Obj.prototype.functionName1 = function(){
alert('function1');
}
//暴露接口
/**
*使用exprots('name',callback)函数;
*name为接口名称,callback为回调函数
*接口名称应当与文件名保持一致
*方法名因与define()方法中回调函数的参数保持一致
*通常为exprots
*/
//exprots('Myobj',Obj);//方法1
exprots('Myobj',new Obj);//方法2
});
不使用方法1的原因是每当实例化Obj对象时都会对其下面的每个属性造成影响,方法2则将其属性分离开来,实> 例化时不会对其属性和方法造成影响 请看下面↓↓↓*/
使用自定义模块
//创建文件entrance.js
layui.config({
//base:'自定义模块的目录';
base:'src/js/models';
}).use(['Myobj'],!function(){//自执行
//获取Myobj模块
ver myObj = layui.Myobj;
//调用其成员方法
myObj.functionName();//弹出function
myObj.functionName1();//弹窗function1
})
//加载入口,使用自定义模块模块名即为暴露的接口名;
最后将entrance.js引入页面即可,可在use中添加需要的模块
前端页面美化详情请参考官方文档:
https://www.layui.com/doc/
使用方法很简单,只需添加依赖的模块。再到需要美化的元素上添加对应的类名即可。