Heim > Artikel > Web-Frontend > Erste Schritte mit Layui
Erste Schritte mit Layui
- 尚nach vorne
- 2019-11-14 11:25:229717Durchsuche
layui (homophon: UI-like) ist ein Front-End-UI-Framework, das mit seinen eigenen Modulspezifikationen geschrieben wurde. Es folgt der Schreib- und Organisationsform von nativem HTML/CSS/JS. Der Schwellenwert ist extrem niedrig und kann verwendet werden der Box. Sehr gut geeignet für die schnelle Entwicklung von Schnittstellen.
Nachdem Sie Laui erhalten haben, stellen Sie es vollständig in Ihrem Projektverzeichnis (oder auf dem statischen Ressourcenserver) bereit. Sie müssen nur die folgenden zwei Dateien einführen:
./layui/css/layui.css ./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js
Das ist richtig, machen Sie sich keine Sorgen um andere Dateien. Weil sie (wie jedes Modul) automatisch geladen werden, wenn sie endgültig verwendet werden.
Dies ist eine einfache Einstiegsseite:
<!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>Hinweis: Um Laui zu verwenden, müssen Sie zuerst das Modul laden. Der obige Code dient zum Vorladen des Moduls! Wenn Sie Layer direkt verwenden, ohne das Modul vorher zu laden, wird zur Laufzeit ein Fehler gemeldet! Das Ebenenobjekt kann nicht gefunden werden oder die Methode kann nicht gefunden werden und andere Probleme!
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
});Das Folgende ist das Codebeispiel, das ich verwende:
Laui aufrufen:
<!--layui-->
<link href="/libs/layui/css/layui.css" rel="stylesheet" type="text/css"/>
<script src="/libs/layui/layui.js" type="text/javascript"></script>Vorladen:
//layui layer
let layuiLayer;
//layui预先加载
layui.use(['layer'], function () {
layuiLayer = layui.layer;
});Laui-Objekt verwenden:
layuiLayer.open({
title: '提示',
content: '请输入名字！'
})Das obige ist der detaillierte Inhalt vonErste Schritte mit Layui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!