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

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

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

レンダリング:

## 4. Layui ポップアップ レイヤー

ポップアップ レイヤーについて話しましょう。ポップアップは非常に一般的なものと言えますが、基本的な HTML/JS には醜い警告しかありません( "") メソッド。layui には、layer と呼ばれるポップアップ レイヤー モジュールが含まれています。

レイヤーを使用する 2 つの方法:

1. 上記のフォーム モジュールを使用するのと同じように、layui.use を宣言し、その後の関数で使用します。 ;

2 を使用します。独立層モジュール ファイルをインポートし、それを直接使用します;

最初の方法については説明せず、ここでは 2 番目の方法を紹介します。

まず、レイヤーの公式 Web サイトからレイヤー ファイルをダウンロードし、解凍して独自のプロジェクトに配置し、

以上がフロントエンドフレームワークlayuiをすぐに使い始めるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。