Résumé de la prise en main de layui-Tutoriel Layui-php.cn

Résumé de la prise en main de layui

尚

Libérer： 2019-11-27 11:56:44

avant

2673 Les gens l'ont consulté

Résumé de la prise en main de layui

Obtenez Layui

Vous pouvez télécharger la dernière version de Layui sur la page d'accueil du site officiel, ou via GitHub obtient le package open source pour Layui. Actuellement, seuls ces deux canaux de ressources sont maintenus simultanément. Généralement, si vous l'utilisez pour des projets réels, il est recommandé de le télécharger directement depuis le site officiel. La structure de layui après construction (c'est-à-dire le package que vous avez obtenu)

├─css   //css目录
    │  └─modules   //模块css目录（一般如果模块相对较大，我们会单独提取）
    │      ├─laydate
    │      ├─layer
    │      │  └─default
    │      └─layim
    │          └─skin
    ├─font    //字体图标目录
    ├─images   //图片资源目录（一些表情等）
    │  └─face
    └─lay    //JS目录
    │   ├─dest   //经过合并的完整模块
    │   └─modules   //各模块/组件
    └─layui.js

Copier après la connexion

Commencez rapidement

Après avoir obtenu layui, déployez-le complètement dans le répertoire de votre projet (ou Serveur de ressources statiques), il vous suffit d'introduire les deux fichiers suivants :

./layui/css/layui.css
./layui/layui.js

Copier après la connexion

C'est vrai, vous n'avez pas à vous soucier des autres fichiers. Parce qu'ils (comme chaque module) sont automatiquement chargés lorsqu'ils sont finalement utilisés. Il s'agit d'une page d'entrée de base :

<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <title>开始使用Layui</title>
      <link rel="stylesheet" href="build/css/layui.css">
    </head>
    <!-- 你的HTML代码 -->
    <script src="build/layui.js"></script>
    <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

Utilisation standardisée (recommandée)

Si vous souhaitez utiliser les composants Layui rapidement, vous pouvez toujours introduire la balise script comme d'habitude. Votre js, puis utilisez les composants de layui dans votre fichier js. Mais nous vous recommandons de suivre les spécifications du module de Layui et de créer votre propre module comme entrée :

<script>
layui.config({
  base: &#39;/res/js/modules/&#39; //你的模块目录
}).use(&#39;index&#39;); //加载入口
</script>

Copier après la connexion

L'index ci-dessus est index.js dans votre répertoire /res/js/modules/, et son contenu doit être le suivant :

<script>
/**
  项目JS主入口
  以依赖Layui的layer和form模块为例
**/    
layui.define([&#39;layer&#39;, &#39;form&#39;], function(exports){
  var layer = layui.layer
  ,form = layui.form();
  
  layer.msg(&#39;Hello World&#39;);
  
  exports(&#39;index&#39;, {}); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
});    
</script>

Copier après la connexion

Utilisation simple et grossière

Si vous pensez que la modularité de Layui est encore un peu lourde, ce n'est pas grave. Layui prend en compte les singes comme vous. Nous emballons et fusionnons layui.js et tous les modules séparément dans un fichier js complet. Vous pouvez directement importer ce fichier lorsque vous l'utilisez. Lorsque vous adoptez cette méthode, vous n'avez plus besoin de charger le module via layui.use, vous pouvez l'utiliser directement, comme :

<script src="../layui/lay/dest/layui.all.js"></script>  
<script>
;!function(){
  //当使用了 layui.all.js，无需再执行layui.use()方法
  var from = layui.form()
  ,layer = layui.layer;
  
  //…
}();
</script>

Copier après la connexion

Mais il faut savoir que cette méthode d'utilisation fait que la modularité de Layui a perdu son sens. Mais il est indéniable que c’est plus simple qu’autre chose.

Pour plus de connaissances sur Layui, veuillez faire attention à la colonne Tutoriel d'utilisation de Layui.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!