layui에 대해 더 알고 싶다면 다음을 클릭하세요. layui tutorial
Layui 소개를 먼저 살펴보겠습니다.
Layui는 에 자체적으로 사용하는 소프트웨어 모듈 사양에 작성된 감성 프론트 엔드 UI 프레임워크는 기본 HTML/CSS/JS의 작성 및 구성 형태를 따르며 임계값이 매우 낮아 즉시 사용할 수 있습니다. 외부는 미니멀하지만 내부는 꽉 차 있습니다. 크기가 가볍고 구성 요소가 풍부합니다. 핵심 코드부터 API까지 모든 세부 사항이 신중하게 제작되어 빠른 인터페이스 개발에 매우 적합합니다. Layui의 첫 번째 버전은 2016년 황금빛 가을에 출시되었습니다. MVVM의 하위 계층을 기반으로 하는 UI 프레임워크와는 다르지만, 그 방식에 어긋나지 않고 자연으로의 회귀를 믿습니다. 정확하게 말하면 서버 측 프로그래머를 위해 더욱 맞춤화되었습니다. 다양한 프런트 엔드 도구의 복잡한 구성에 참여할 필요가 없으며 브라우저 자체와 모든 요소 및 상호 작용만 하면 됩니다. 당신의 손끝에서 필요한 것을 찾을 수 있습니다. layui는 현재 사람이 사용하는 모든 브라우저(IE6/7 제외)와 호환되며, PC 측 백엔드 시스템 및 프런트엔드 인터페이스를 위한 빠른 개발 솔루션으로 사용할 수 있습니다.
Get Layui
Layui 공식 홈페이지에서 최신 버전을 다운로드 받으실 수 있습니다. 자동으로 구축되어 제작 환경에서 사용하기에 더 적합합니다. 디렉토리 구조는 다음과 같습니다:
├─css //css目录 │ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：） │ │ ├─laydate │ │ ├─layer │ │ └─layim │ └─layui.css //核心样式文件 ├─font //字体图标目录 ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情） │─lay //模块核心目录 │ └─modules //各模块组件 │─layui.js //基础核心库 └─layui.all.js //包含layui.js和所有模块的合并文件
빨리 시작하세요
layui를 얻은 후 이를 프로젝트 디렉토리(또는 정적 리소스 서버)에 완전히 배포하고 다음 두 파일만 도입하면 됩니다.
./layui/css/layui.css ./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js
이 두 파일만 로드하면 되며 다른 파일은 걱정하지 마세요. 왜냐하면 그것들(각 모듈 등)은 최종적으로 사용될 때 자동으로 로드되기 때문입니다. 이것은 기본 입력 페이지입니다.
모듈형 접근 방식
다음과 같이layui의 모듈 사양에 따라 항목 파일을 생성하고layui.use()를 통해 항목 파일을 로드하는 것이 좋습니다.
비모듈식 접근 방식(즉, 모든 모듈이 한 번에 로드됨)layui의 모듈식 구성이 마음에 들지 않으면 확실히 "일회성 로딩" 접근 방식을 채택할 수 있으며, 우리는layui. 모든 모듈은 개별적으로 패키지되어 완전한 js 파일로 병합됩니다. 이 파일을 사용할 때 직접 가져올 수 있습니다. 이 방법을 채택하면 더 이상layui.use() 메서드를 통해 모듈을 로드할 필요가 없으며 다음과 같이 직접 사용할 수 있습니다.
<!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.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
</html>
모듈화 및 비모듈화저는 여전히 모듈화를 선호합니다 필요할 때 로드한다는 개념입니다. 모듈이 아닌 경우 모든 js 파일이 처음에 로드되기 때문입니다. 그러나 실제로 일부 페이지에서는 매우 적은 모듈을 사용하고 그렇게 큰 js 파일을 로드할 필요가 없기 때문에 여전히 모듈화 방식을 사용하는 것이 좋습니다. 비모듈식은 편리하기는 하지만 사용자 친화적이지는 않습니다.
모듈 사양layui의 모듈은layui.js에서 내부적으로 구현된 비동기 모듈 로딩 방법을 기반으로 하며 AMD를 따르지 않지만(결국 임의적입니다!) 자체적으로 새로운 모듈 세트 경량 모듈 사양. 그리고 많은 연습 끝에 이 방법은 Layui의 핵심 모듈 로딩 엔진이 되었습니다.
Pre-loaded바로 본론으로 들어가니 그냥 사용법만 말씀드리는 게 더 적절할 것 같습니다. Layui의 모듈 로딩은 핵심적인layui.use(mods, callback) 메소드를 사용합니다. JS가 Layui 모듈을 사용해야 하는 경우 사전 로딩을 사용하는 것이 좋습니다. 이렇게 하면 어디서나layui.use를 작성하는 문제를 피할 수 있습니다. 가장 바깥쪽 레이어에서 다음과 같이 정의해야 합니다.
<!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>
주문형 로딩(권장하지 않음) 강박 장애가 있고 웹 사이트 성능에 대해 극단적인 요구 사항이 있는 경우, 필요한 모듈을 미리 로드하고 싶지 않지만 작업이 트리거될 때만 모듈을 로드하면 이것이 허용됩니다. JS의 가장 바깥쪽 레이어에 큰layui.use를 래핑할 필요는 없습니다. 다음만 필요합니다.
/*
Demo1.js
使用Layui的form和upload模块
*/
layui.use(['form', 'upload'], function(){ //如果只加载一个模块，可以不填数组。如：layui.use('form')
var form = layui.form //获取form模块
,upload = layui.upload; //获取upload模块
//监听提交按钮
form.on('submit(test)', function(data){
console.log(data);
});
//实例化一个上传控件
upload({
url: '上传接口url'
,success: function(data){
console.log(data);
}
})
});
참고:
JS에서 많은 모듈을 사용해야 하는 경우 다음을 수행하지 않는 것이 좋습니다. 이 로딩 방법을 사용하세요. 왜냐하면layui.use()를 많이 작성해야 하고 코드를 유지 관리할 수 없기 때문입니다. 사용을 권장합니다: 사전 로드. 즉, JS 파일에서는 use만 작성하면 됩니다.
Layui的全部模块绑定在 layui对象下，内部由layui.define()方法来完成。每一个模块都会一个特有的名字，并且无法被占用。所以你无需担心模块的空间被污染，除非是你 delete layui.mod; 调用一个模块也必须借助layui对象的赋值。如： 一个模块一旦加载后，就会注册在layui对象下，所以你无法直接用模块名来获得，而同样借助layui对象。譬如有时你可能会直接在元素的事件属性上去调用一个模块，如： 扩展一个Layui模块 layui 官方提供的模块有时可能还无法满足你，或者你试图按照layer的模块规范来扩展一个模块。那么你有必要认识layui.define()方法，相信你在文档左侧的“底层方法”中已有所阅读。下面就就让我们一起扩展一个Layui模块吧： 第一步：确认模块名，假设为：test，然后新建一个test.js 文件放入项目任意目录下（注意：不用放入layui目录） 第二步：编写test.js 如下： 第三步：设定扩展模块所在的目录，然后就可以在别的JS文件中使用了 大体上来说，Layui的模块定义很类似Require.js和Sea.js，但跟他们又有着明显的不同，譬如在接口输出等地方。layui.use(['layer', 'laypage', 'laydate'], function(){
var layer = layui.layer //获得layer模块
,laypage = layui.laypage //获得laypage模块
,laydate = layui.laydate; //获得laydate模块
//使用模块
});<input onclick="layui.laydate()">
/**
扩展一个test模块
**/
layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define('layer', callback);
var obj = {
hello: function(str){
alert('Hello '+ (str||'test'));
}
};
//输出test接口
exports('test', obj);
});//config的设置是全局的
layui.config({
base: '/res/js/' //假设这是test.js所在的目录
}).extend({ //设定模块别名
test: 'test' //如果test.js是在根目录，也可以不用设定别名
,test1: 'admin/test1' //相对于上述base目录的子目录
});
//使用test
layui.use('test', function(){
var test = layui.test;
test.hello('World!'); //弹出Hello World!
});
//使用test1
layui.use('test1', function(){
var test = layui.test1;
//……
});
위 내용은 레이유이 사용방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
2023最新layui视频教程推荐（建议收藏）Jul 19, 2021 pm 05:22 PM以下为大家整理了前端UI框架 — layui的视频教程，不需要从迅雷、百度云之类的第三方网盘平台下载，全部在线免费观看。教程由浅入深，有前端基础的人就能学习，从安装到案例讲解，全面详细，帮助你更快更好的掌握layui框架！
如何利用Layui开发一个具有分页功能的数据展示页面Oct 24, 2023 pm 01:10 PM如何利用Layui开发一个具有分页功能的数据展示页面Layui是一个轻量级的前端UI框架，提供了简洁美观的界面组件和丰富的交互体验。在开发中，我们经常会遇到需要展示大量数据并进行分页的情况。以下是一个利用Layui开发的具有分页功能的数据展示页面的示例。首先，我们需要引入Layui的相关文件和依赖。在html页面的<head>标签中加入以下代
如何使用Layui开发一个支持图片放大缩小的相册功能Oct 24, 2023 am 09:02 AM如何使用Layui开发一个支持图片放大缩小的相册功能相册功能在现代的网页应用中非常常见，通过展示用户上传的图片，让用户能够方便地浏览和管理图片。为了提供更好的用户体验，一种常见的需求是支持图片的放大和缩小功能。本文章将介绍如何使用Layui框架开发一个支持图片放大缩小的相册功能，同时提供具体的代码示例。首先，确保您已经引入Layui框架的CSS和JS文件。您
如何利用Layui实现图片轮播图功能Oct 24, 2023 am 08:27 AM如何利用Layui实现图片轮播图功能现如今，图片轮播图已经成为了网页设计中常见的元素之一。它可以使网页更加生动活泼，吸引用户的眼球，提升用户体验。在本文中，我们将介绍如何利用Layui框架来实现一个简单的图片轮播图功能。首先，我们需要在HTML页面中引入Layui的核心文件和样式文件：<linkrel="stylesheet"h
如何利用Layui实现图片拖拽和缩放效果Oct 24, 2023 am 09:16 AM如何利用Layui实现图片拖拽和缩放效果在现代网页设计中，图片的交互效果成为增加网页活力和用户体验的重要手段。其中，图片拖拽和缩放效果是常见且受欢迎的交互方式之一。本文将介绍如何使用Layui框架实现图片拖拽和缩放效果，并提供具体的代码示例。一、引入Layui框架和相关依赖：首先，我们需要在HTML文件中引入Layui框架和相关依赖。可以通过以下代码示例引入
如何使用Layui开发一个支持文件上传和下载的资源管理系统Oct 24, 2023 am 09:19 AM如何使用Layui开发一个支持文件上传和下载的资源管理系统引言：随着互联网的发展，数据资源的管理已经成为一项重要的任务。无论是企业内部的文档管理，还是个人的文件存储，都需要一个高效且易于使用的资源管理系统。Layui是一款轻量级的前端框架，具有简洁明了的设计以及丰富的组件库，非常适合用来进行资源管理系统的开发。本文将介绍如何使用Layui开发一个支持文
如何利用Layui实现图片反色和亮度调节功能Oct 25, 2023 am 09:10 AM如何利用Layui实现图片反色和亮度调节功能引言：在前端开发中，经常会遇到需要对图片进行特效处理的情况。本文将介绍如何利用Layui框架实现图片反色和亮度调节功能，并提供具体代码实例供参考。一、Layui简介：Layui是一款优秀的前端UI框架，具有简洁、美观、易用等特点。它提供了丰富的前端组件，让开发者能够轻松搭建出精美的网站。二、准备工作：在开始之前，我
如何使用Layui框架开发一个支持实时通讯的在线客服系统Oct 25, 2023 am 08:47 AM如何使用Layui框架开发一个支持实时通讯的在线客服系统概述：在线客服系统是现代企业提供与客户交流的重要渠道之一，而实时通讯是在线客服系统的关键技术之一。本文将介绍如何使用Layui框架开发一个支持实时通讯的在线客服系统，并提供具体的代码示例。一、准备工作安装Node.js：在开发环境中安装Node.js，并配置好相关环境。安装Layui：在项目中引入Lay
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전
