Beginnen Sie schnell mit dem Front-End-Framework Laui-Layui-Tutorial-php.cn

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.

Beginnen Sie schnell mit dem Front-End-Framework Laui

1. Einführung

Bevor wir Laui verwenden, müssen wir zunächst verstehen, was Laui ist Es?

Ich denke, es lässt sich in einem Satz des Autors Xianxin zusammenfassen: ein Front-End-Framework, das für Back-End-Programmierer entwickelt wurde.

Eine detailliertere Beschreibung lautet: Dies ist ein Front-End-Framework, das verschiedene CSS, JS, Ajax usw. kapselt. Der Kapselungsgrad ist so hoch, dass er manchmal nicht einmal für Programmierer geeignet ist. Aber für Leute mit durchschnittlicher Front-End-Technologie ist Lauii ein gutes Werkzeug.

2. Beginnen Sie mit der Verwendung von Laui

Verwendung: Laden Sie das Projekt herunter, importieren Sie es und zitieren Sie es dann

<script th:src="@{/jquery-3.3.1.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}" />

Nach dem Login kopieren

Referenzieren Sie zuerst jquery, dann referenzieren Sielayui.js undlayui.css.

Warum muss es lokal sein? Kein CDN?

Wie oben erwähnt, ist Laui zu „gut“ gekapselt und die Autonomie des Programmierers ist begrenzt. Zu diesem Zeitpunkt muss der Quellcode von Laui geändert werden, beispielsweise der CSS-Stil - das ist auch bei Laui der Fall. Richtiger Gebrauch, nicht nur einfacher Gebrauch.

Layui-Module: Layui ist modular aufgebaut und umfasst Form-, Layer-, Laydate-, Laypage- und andere Module. Diese Module bilden das gesamte Layui. Wenn Sie Laui verwenden, müssen Sie das von Ihnen verwendete Modul angeben.

Beginnen Sie mit der Verwendung von Layui:

<script>
  layui.use([&#39;mod1&#39;, &#39;mod2&#39;],function(args){
    var mo1 = layui.mod1
       ,mo2 = layui.mod2;
  });
</script>

Nach dem Login kopieren

3. Layui-Formular

Das Folgende ist eine Demonstration der gebräuchlichsten Form in HTML Die Verwendung von Laui.

HTML-Teil:

<fieldset class="layui-elem-field layui-field-title" style="margin-top:30px;">
    <legend style="text-align:center;">注册新账户</legend>
</fieldset>
<form id="reform" class="layui-form layui-form-pane"  th:action="@{/user/register.html}" method="POST">
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
        <input type="text" name="email" lay-verify="email" placeholder="请输入" autocomplete="off" class="layui-input" />
        </div>
    </div>
         
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" />
        </div>
    </div>
         
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="password"  lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input" />
        </div>
    </div>
        
    <div class="layui-form-item">
        <label class="layui-form-label">重复密码</label>
        <div class="layui-input-block">
            <input type="password" name="repassword"   lay-verify="repass" placeholder="请输入密码" autocomplete="off" class="layui-input" />
        </div>
    </div>
        
    <div class="layui-form-item">
        <button  class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">注册</button>
    </div>
        
    <div style="text-align:center;margin-top:15px;">
        <input type="checkbox" name="agree"  lay-skin="primary" checked=""/>
                               我已阅读并同意
        <a href="#" id="agreementLink">《隐私条款》</a>
    </div>
</form>

Nach dem Login kopieren

Javascript-Teil:

<!-- js for form input and submit -->
<script>
layui.use([&#39;form&#39;], function(){
  var form = layui.form;
 
  //自定义验证规则
  form.verify({
    pass: [/(.+){6,12}$/, &#39;密码必须6到12位&#39;]
    ,repass:function(value){
    	var pvalue = $("input[name=&#39;password&#39;]").val();
    	if(pvalue!=value){
    		return "两次输入的密码不一致";
    	}
    }
  }); 
  //监听提交
  form.on(&#39;submit(demo1)&#39;, function(data){
	var agreeChecked = data.field.agree;
    if(agreeChecked!="on"){
    	msg("未同意隐私条款");
    	return false;//阻止表单提交
    }
  });
});
</script>

Nach dem Login kopieren

Rendering:

Beginnen Sie schnell mit dem Front-End-Framework Laui

4 . Layui-Popup-Ebene

Man kann sagen, dass Pop-ups eine sehr häufige Sache sind, aber einfaches HTML/JS hat nur die hässliche Warnung ("")-Methode enthält ein Popup-Layer-Modul namens Layer.

Zwei Möglichkeiten, die Ebene zu verwenden:

1. Deklarieren Sie, genau wie bei der Verwendung des Formularmoduls oben, „layui.use“ und verwenden Sie es dann in der Funktion danach verwenden ;
2. Importieren Sie die unabhängige Layer-Moduldatei, und dann können Sie sie direkt verwenden.

Die erste Methode wird hier nicht besprochen.

Laden Sie zunächst die Layer-Datei von der offiziellen Layer-Website herunter, entpacken Sie sie und fügen Sie sie in Ihr eigenes Projekt ein. Anschließend

Neueste Artikel des Autors