layuit 框架_UI框架Layui入门介绍
Layui(谐音,类UI),一款为服务端程序员量身定做的UI框架,采用原生的HTML/CSS/JS编写,体积轻盈,内容丰富。使用Layui后,一次性解决弹出层、日期插件、数据分页、表格、文件上传等常用模块。除此之外,layui兼容除IE6/7外的所有浏览器,可作为 PC端后台系统和前台界面的快速开发方案。
下载layui的三种方法
方法1:官网下载:https://www.layui.com/,解压后,文件夹结构如下:
├─css //css目录
│ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
│ │ ├─laydate
│ │ ├─layer
│ │ └─code.css
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件
方法3:npm下载,下载命令为 npm i layui-src,不知道npm的同学可参考:到底什么是npm
Layui的两种加载方法
方法1:按模块加载layui.css+layui.js,适用于线下开发环境,方便团队调试代码。
单模块加载
;!function(){
//layui.use()加载模块
layui.use(['layer','form'],function(){
var layer=layui.layer;
layer.open({
title: '模块化加载'
,content: 'hello,layui'
});
});
}();
方法2:全模块加载layui.css+layui.all.js,适用于线上环境,介绍请求静态资源的次数。
全模块加载
// 无需再执行layui.use()方法加载模块,直接使用即可
;!function(){
var layer=layui.layer,form=layui.form;
layer.open({
title:"全模块加载",
content:"hello,layui"
});
}();
以上就是layui入门介绍的全部知识,在之后的文章中还会介绍如何使用开发中常用的表单模块、文件上传模块、分页模块等。
layuit 框架_UI框架Layui入门介绍相关推荐
- 分布式事物框架Easy-Transaction--使用入门介绍
分布式事物框架Easy-Transaction--使用入门介绍 The origin This framework is inspired by a PPT (<大规模SOA系统的分布式事务处理 ...
- 分布式事物框架--EasyTransaction的入门介绍
分布式事物框架--EasyTransaction的入门介绍 柔性事务,分布式事务,TCC,SAGA,可靠消息,最大努力交付消息,事务消息,补偿,全局事务,soft transaction, distr ...
- spring框架mvc框架_Spring的MVC测试框架入门–第1部分
spring框架mvc框架 最新推出的主要Spring框架是Spring MVC测试框架,Spring Guys声称它是"一流的JUnit支持,可通过流畅的API测试客户端和服务器端Spri ...
- spring框架mvc框架_Spring MVC测试框架入门–第2部分
spring框架mvc框架 这个迷你系列的第一个博客介绍了Spring MVC测试框架,并演示了其在单元测试Spring MVC Controller类中作为控制器而不是POJO进行单元测试的用途. ...
- 微前端框架 之 qiankun 从入门到源码分析
当学习成为了习惯,知识也就变成了常识.感谢各位的 点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github,欢迎 Watch 和 Star. 简介 ...
- web框架:Iris快速入门
web框架:Iris快速入门 1 介绍及安装 介绍 Iris是一款用Go开发的web应用框架,被称为速度最快的Go后端开发框架. 官网地址:https://www.iris-go.com/ 中文教程地 ...
- 【微前端】1013- 微前端框架 之 single-spa 从入门到精通
来源:李永宁 https://juejin.im/post/6862661545592111111 前序 目的 会使用single-spa开发项目,然后打包部署上线 刨析single-spa的源码原理 ...
- “Zhuang.Data”轻型数据库访问框架(一)开篇介绍
目录: "Zhuang.Data"轻型数据库访问框架(一)开篇介绍 "Zhuang.Data"轻型数据库访问框架(二)框架的入口DbAccessor对象 框架介 ...
- JNDI技术、JDBC框架、几种元数据介绍
JNDI技术.JDBC框架.几种元数据介绍 JNDI技术简介 JNDI(Java Naming and Directory Interface),Java命名和目录接口,它对应于J2SE中的javax ...
- CTK框架——CTK Widgets快速入门
CTK框架--CTK Widgets快速入门 天山老妖S关注0人评论27888人阅读2018-05-25 18:40:52 CTK框架--CTK Widgets快速入门 一.CTK Widgets模块 ...
最新文章
- nginx配置文件【转载】
- Redhat或者Centos手动安装Vim,
- 5G经济社会影响白皮书:2020年预计5G将创造约920亿元GDP
- java接口_Java接口
- linux编译框架的搭建,Linux下单机版的beego框架的搭建
- 【吴恩达机器学习】学习笔记——梯度下降
- data fastboot 擦除_安卓刷机 - Fastboot命令
- 使用百度图像识别时,提示错误“No address associated with hostname”
- html禁止查看图片,强看被屏蔽微信朋友圈
- 古代五大美男的悲惨结局:潘安被灭三族
- 王刚日记:在互联网第一次赚到钱
- 抖音开发 发布内容至抖音H5
- 微信小程序入门案例-会议邀请函
- linux中的几种文件类型
- 后疫情时代的酒旅业,让用户“安心”成为行业复苏唯一解?
- shell脚本编程学习笔记3(xdl)——Bash变量的运算与测试
- 二十年目睹之怪现状:被Angelababy击垮的老戏骨们 zt
- Python-pandas拆分列与堆叠列
- ACA大数据助理工程师题库总结
- 工厂模式(FactoryModel)