Layui使用入门教程

2025-10-27
网站建设限时活动促销

layui(谐音:类ui) 是一款采用自身模块规范编写的前端 ui 框架,遵循原生 html/css/js 的书写与组织形式,门槛极低,拿来即用。非常适合界面的快速开发。

获得 layui 后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:

./layui/css/layui.css./layui/layui.js //提示:如果是采用非模块化方式(最下面有讲解),此处可换成:./layui/layui.all.js

没错,不用去管其它任何文件。因为他们(比如各模块)都是在最终使用的时候才会自动加载。

这是一个基本的入门页面:

   开始使用layui  <script src="../layui/layui.js"><script>//一般直接写在一个js文件中layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World');}); 

注:使用layui需要先加载模块使用,上述代码中就是预先加载模块!如果 首先不加载模块就直接layer. 使用的话运行时是会报错的!找不到layer该对象或者找不到方法等其他问题!

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

下面是我使用的代码案例:

调用layui:

  <script src="/libs/layui/layui.js" type="text/javascript">

预先加载:

//layui layerlet layuiLayer;//layui预先加载layui.use(['layer'], function () { layuiLayer = layui.layer;});

使用layui对象:

 layuiLayer.open({ title: '提示', content: '请输入名字!' })

标签: layui菜鸟教程

本文地址:https://www.lifejia.cn/news/204490.html

免责声明:本站内容仅用于学习参考,信息和图片素材来源于互联网,如内容侵权与违规,请联系我们进行删除,我们将在三个工作日内处理。联系邮箱:cloudinto#qq.com(把#换成@)