Comment utiliser le framework Layui-Tutoriel Layui-php.cn

Comment utiliser le framework Layui

angryTom

Libérer： 2019-08-01 13:15:47

original

7533 Les gens l'ont consulté

Comment utiliser le framework Layui

layui (homophone : UI-like) est un framework d'interface utilisateur front-end écrit en utilisant ses propres spécifications de module, suivant la forme d'écriture et d'organisation du HTML/natif. CSS/JS, le seuil est extrêmement bas et vous pouvez l'utiliser dès la sortie de la boîte. Mais si vous voulez l'utiliser, vous devez suivre ses règles. Après tout, cette personne a des mains courtes et peut faire quelques tours, ce qui est également conforme aux règles.

Si vous souhaitez en savoir plus sur layui, vous pouvez cliquer sur : tutoriel layui

Ci-joint le document officiel de layui site Web : https://www.layui.com/

Comment utiliser le framework Layui

Après le téléchargement, nous le décompresserons et retirerons le dossier layui. Ouvrez l'éditeur et déposez-le.

Comment utiliser le framework Layui

Ensuite, commencez à introduire les fichiers CSS et JS dans le HTML. Ce dont nous avons besoin ici, ce sont les deux fichiers de base layui, layui.css et layui.js.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
//模块和回调函数
<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>

Copier après la connexion

À ce stade, nous devons également déclarer les modules et les fonctions de rappel que nous devons utiliser. Bien entendu, il vous suffit de vous référer à la documentation officielle et de choisir l’effet souhaité ! !

Par exemple :

Comment utiliser le framework Layui

Ensuite, nous terminons par un exemple

Comment utiliser le framework Layui

J'ai donné un exemple dans la navigation du document officiel :

Comment utiliser le framework Layui

Vous avez bien lu, je viens de le copier, et puis

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
<ul lay-filter="">
    <li><a href="">最新活动</a></li>
    <li class="layui-nav-item layui-this"><a href="">产品</a></li>
    <li><a href="">大数据</a></li>
    <li>
        <a href="javascript:;">解决方案</a>
        <dl> <!-- 二级菜单 -->
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li><a href="">社区</a></li>
</ul>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(&#39;element&#39;, function(){
        var element = layui.element;
        //…
    });
</script>
</body>
</html>

Copier après la connexion

Il n'y en a plus, juste comme ça, l'effet est obtenu...

Comment utiliser le framework Layui