Heim > Web-Frontend > Layui-Tutorial > Erste Schritte mit Layui

Erste Schritte mit Layui

Freigeben: 2019-11-14 20:54:15
nach vorne
9762 Leute haben es durchsucht

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.

Erste Schritte mit Layui

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
Nach dem Login kopieren

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([&#39;layer&#39;, &#39;form&#39;], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg(&#39;Hello World&#39;);
});
</script> 
</body>
</html>
Nach dem Login kopieren

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([&#39;layer&#39;, &#39;form&#39;], function(){
  var layer = layui.layer
  ,form = layui.form;
});
Nach dem Login kopieren

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>
Nach dem Login kopieren

Vorladen:

//layui layer
let layuiLayer;
//layui预先加载
layui.use([&#39;layer&#39;], function () {
    layuiLayer = layui.layer;
});
Nach dem Login kopieren

Laui-Objekt verwenden:

  layuiLayer.open({
            title: &#39;提示&#39;,
            content: &#39;请输入名字!&#39;
        })
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage