Démarrez rapidement avec le framework front-end layui-Tutoriel Layui-php.cn

layui (homophone : UI-like) est un framework d'interface utilisateur front-end écrit en utilisant ses propres spécifications de module. Il suit la forme d'écriture et d'organisation du HTML/CSS/JS natif. Le seuil est extrêmement bas et peut être utilisé. de la boîte.

Démarrez rapidement avec le framework front-end layui

1. Introduction

Avant d'utiliser layui, nous devons d'abord comprendre layui Qu'est-ce que layui il?

Je pense que cela peut être résumé en une phrase de l'auteur Xianxin : un framework front-end conçu pour les programmeurs back-end.

Une description plus détaillée est la suivante : il s'agit d'un framework frontal qui encapsule divers CSS, JS, Ajax, etc. Le degré d'encapsulation est si élevé que parfois il n'est même pas convivial pour les programmeurs. Mais pour les personnes disposant d’une technologie frontale moyenne, layui est un bon outil.

2. Commencez à utiliser layui

Comment l'utiliser : Téléchargez et importez le projet, puis citez-le

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

Copier après la connexion

Référencez d'abord jquery, puis référencez layui.js et layui.css.

Pourquoi faut-il que ce soit local ? Pas de CDN ?

Comme mentionné ci-dessus, layui est trop "bon" encapsulé et l'autonomie du programmeur est limitée. À ce stade, le code source de layui doit être modifié, comme le style du css. - c'est aussi le cas de layui pour une utilisation correcte, pas seulement une utilisation simple.

Modules Layui : layui est modulaire, comprenant form, layer, laydate, laypage et d'autres modules. Ce sont ces modules qui constituent le layui complet. Lorsque vous utilisez layui, vous devez spécifier le module que vous utilisez.

Commencez à utiliser layui :

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

Copier après la connexion

Formulaire Layui

Ce qui suit est une démonstration de la forme la plus courante dans. HTML L'utilisation de layui.

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

Copier après la connexion

partie javascript :

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

Copier après la connexion

Rendu :

Démarrez rapidement avec le framework front-end layui

4 . Couche pop-up Layui

Parlons de la couche pop-up. On peut dire que la couche pop-up est une chose très courante, mais le HTML/JS de base n'a qu'une alerte moche. ("") layui contient un module de couche contextuel appelé couche.

Deux façons d'utiliser layer :

1. Tout comme en utilisant le module de formulaire ci-dessus, déclarez layui.use, puis utilisez-le dans la fonction après use ;
2. Importez le fichier du module de couche indépendant, puis vous pourrez l'utiliser directement

La première méthode ne sera pas discutée ici.

Tout d'abord, téléchargez le fichier de couche depuis le site officiel de la couche, décompressez-le et insérez-le dans votre propre projet, puis

Derniers articles par auteur