フロントエンドフレームワークlayuiをすぐに使い始める-ライユイのチュートリアル-php.cn

layui（同音異義語：UI風）は、独自のモジュール仕様で書かれたフロントエンドUIフレームワークで、ネイティブHTML/CSS/JSの書き方や構成形式に準拠しています。箱の。

フロントエンドフレームワークlayuiをすぐに使い始める

#1. はじめに

layui を使用する前に、まず lauiui とは何かを理解する必要があります。それ？

著者 Xianxin の一文は、「バックエンドプログラマのために設計されたフロントエンドフレームワーク」に要約できると思います。
より詳細な説明は次のとおりです。これは、さまざまな css、js、Ajax などをカプセル化するフロントエンドフレームワークです。カプセル化の度合いが非常に高いため、プログラマにとってさえ使いにくい場合があります。しかし、平均的なフロントエンド技術を持っている人にとっては、layui は優れたツールです。

# 2.layui の使用を開始します使用方法: ダウンロード後、プロジェクトをインポートして引用します

<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}" />

ログイン後にコピー

最初に jquery を参照し、次にlayui.jsとlayui.cssを参照します。

なぜローカルである必要があるのでしょうか? CDN がありませんか?

上記のように、layui はカプセル化されすぎていてプログラマの自主性が制限されているため、CSS のスタイルなど、layui のソースコードを修正する必要があります。 - これはlayuiにも当てはまりますが、単なる使い方ではなく、正しい使い方をしましょう。

layui モジュール:layui はモジュール式であり、form、layer、laydate、laypage およびその他のモジュールが含まれており、完全なlayui を構成するのはこれらのモジュールです。 layuiを使用する場合は、使用しているモジュールを指定する必要があります。

layui の使用を開始します:

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

ログイン後にコピー

3. Layui フォーム以下は、最も一般的なフォームのデモです。 HTMLでのlayuiの使用。

html 部分:

<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>

ログイン後にコピー

javscript 部分:

<!-- 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>

ログイン後にコピー

レンダリング:

フロントエンドフレームワークlayuiをすぐに使い始める