LayUI基本介绍

简介: LayUI基本介绍


LayUI 是阿里大神贤心的核心技术作品 采用经典模块化,也正是能让人避开工具的复杂配置,回归到简单而原生态的HTML/CSS/JavaScript layerlayer 至今仍作为 layui 的代表作 sea.js 在 SeaJS 的世界里,一个文件就是一个模块。所有模块都遵循 CMD 规范,我们可以像在 Node 环境中一样来书写模块代码

快速上手

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

./layui/css/layui.css
./layui/layui.js <!--如果是采用非模块化方式可换成:./layui/layui.all.js-->

模块化方式

<!-- 你的HTML代码 -->
<script src="../layui/layui.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
        ,form = layui.form;
        layer.msg('Hello World');
    });
</script>

非模块化方式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>非模块化方式使用layui</title><link rel="stylesheet" href="../layui/css/layui.css"></head>
<body>
<!-- 你的HTML代码 -->
<script src="../layui/layui.all.js"></script><script>
    //由于模块都一次性加载,因此不用执行 layui.use() 来加载对应模块,直接使用即可:
    ;!function(){
        var layer = layui.layer
        ,form = layui.form;
        layer.msg('Hello World');
    }();
</script>
</body>
</html>
  • 引入自定义插件
layui.config({
    base: '../../static/common/yutons-mods/' //根据实际路径设置自定义插件路径
}).use(['yutons_sug'], function() {});
layui.config({
    base: './module/'  
}).extend({
    iconPicker: 'iconPicker/iconPicker'  //实际路径 ./module/iconPicker/iconPicker.js
});
  • 渲染更新
form.render(); //更新全部
//或者
form.render('select'); //刷新select选择框渲染
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
//注意一下 layui版本
layui.form().render(); //这是1.0的写法
layui.form.render(); //这是2.0更新后的写法


相关文章
|
存储 缓存 分布式计算
HBase入门指南
HBase是一个开源的非关系型分布式数据库,设计初衷是为了解决大量结构化数据存储与处理的需求
1452 0
HBase入门指南
|
消息中间件 NoSQL Java
Redis Streams在Spring Boot中的应用:构建可靠的消息队列解决方案【redis实战 二】
Redis Streams在Spring Boot中的应用:构建可靠的消息队列解决方案【redis实战 二】
8600 1
|
9月前
|
消息中间件 缓存 负载均衡
php怎么解决高并发的问题
在实际应用中,应根据具体需求和应用场景,选择合适的优化方案,并进行持续监控和优化,确保系统的高效稳定运行。
462 6
|
消息中间件 设计模式 Java
Java技术栈梳理
Java技术栈梳理
|
开发框架 UED 开发者
鸿蒙next版开发:ArkTS组件通用属性(显隐控制)
在HarmonyOS 5.0中,ArkTS引入了显隐控制属性,允许开发者通过`visibility`属性控制组件的显示与隐藏,优化用户体验和应用性能。本文详细解析了`visibility`属性的三种状态(Visible、Hidden、None)及其应用场景,并通过示例代码展示了如何使用显隐控制属性,避免组件频繁创建和销毁,提升性能。
996 8
|
消息中间件 NoSQL Redis
【赵渝强老师】Redis的消息发布与订阅
本文介绍了Redis实现消息队列的两种场景:发布者订阅者模式和生产者消费者模式。其中,发布者订阅者模式通过channel频道进行解耦,订阅者监听特定channel的消息,当发布者向该channel发送消息时,所有订阅者都能接收到消息。文章还提供了相关操作命令及示例代码,展示了如何使用Redis实现消息的发布与订阅。
399 0
|
Java 开发工具 git
解决Error running XXXApplicationCommand line is too long.报错
解决Error running XXXApplicationCommand line is too long.报错
|
前端开发 JavaScript 数据库
layui框架实战案例(20):常用条件判断和信息展示技巧(图片预览、动态表格、短信已读未读、链接分享、信息脱敏、内置框架页)
layui框架实战案例(20):常用条件判断和信息展示技巧(图片预览、动态表格、短信已读未读、链接分享、信息脱敏、内置框架页)
1109 0
|
弹性计算 运维 安全
阿里云轻量应用服务器是什么?轻量和ECS有啥区别?
云服务器ECS和轻量应用服务器的区别,那么如何选择呢?阿小云建议根据实际自身应用情况来选择,例如个人用户或开发者来简单网站、测试环境等,可以选择轻量应用服务器,简单方便并且性价比高;如果是企业级应用,流量较大的网站、游戏应用、深度计算或大数据分析等使用场景,建议首选云服务器ECS这种更为专业级的云服务器
634 0
|
JavaScript 容器
layui实现选项卡(万字博客!!!)
layui实现选项卡(万字博客!!!)
468 0

热门文章

最新文章