Comment utiliser layui-Tutoriel Layui-php.cn

Comment utiliser layui

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

Comment utiliser layui

Jetons d'abord un coup d'œil à l'introduction de Layui :

Layui est une interface utilisateur frontale émotionnelle écrite en utilisant son propres spécifications du module. Le framework suit la forme d'écriture et d'organisation du HTML/CSS/JS natif. Le seuil est extrêmement bas et peut être utilisé directement. Il est minimaliste à l'extérieur mais plein à l'intérieur. Il est léger et riche en composants, chaque détail, du code principal à l'API, a été soigneusement conçu, ce qui le rend très approprié pour le développement rapide d'interfaces. La première version de layui a été publiée à l'automne doré 2016. Elle est différente de ces frameworks d'interface utilisateur basés sur la couche inférieure de MVVM, mais elle ne va pas à contre-courant, mais croit au retour à la nature. Pour être précis, il est plus adapté aux programmeurs côté serveur. Vous n'avez pas besoin de vous impliquer dans la configuration complexe de divers outils frontaux, il vous suffit de faire face au navigateur lui-même, et tous les éléments et interactions dont vous avez besoin peuvent. être trouvé à portée de main. layui est compatible avec tous les navigateurs actuellement utilisés par les humains (sauf IE6/7) et peut être utilisé comme solution de développement rapide pour les systèmes backend côté PC et les interfaces frontales.

Obtenez Layui

Vous pouvez télécharger la dernière version de layui à partir de la page d'accueil du site officiel. Elle a été créée automatiquement et est plus adaptée. utilisation dans des environnements de production. La structure des répertoires est la suivante :

 ├─css //css目录
  │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件

Copier après la connexion

Démarrez rapidement

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

./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

Copier après la connexion

Vous n'avez qu'à charger ces deux fichiers et 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 ;

Approche modulaire

Nous vous recommandons de suivre les spécifications du module de layui pour créer un fichier d'entrée et réussir Layui. méthode use() pour charger le fichier d'entrée, comme indiqué ci-dessous :

<!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="../layui/css/layui.css">
</head>
<body>
 
<!-- 你的HTML代码 -->
 
<script src="../layui/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

Méthode non modulaire (c'est-à-dire que tous les modules sont chargés en même temps)

Si vous n'aimez pas l'organisation modulaire de layui, vous pouvez certainement adopter la méthode du « chargement unique ». Nous emballons et fusionnons layui.js et tous les modules séparément dans un fichier js complet. directement. Lorsque vous adoptez cette méthode, vous n'avez plus besoin de charger le module via la méthode layui.use(), vous pouvez l'utiliser directement, comme :

<!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="../layui/css/layui.css">
</head>
<body>
 
<!-- 你的HTML代码 -->
 
<script src="../layui/layui.all.js"></script>
<script>
//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
;!function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg(&#39;Hello World&#39;);
}();
</script> 
</body>
</html>

Copier après la connexion

Modulaire et non modulaire

Je préfère quand même le concept de modularité, en le chargeant quand c'est nécessaire, car s'il est non modulaire, tous les fichiers js seront chargés au début, mais en fait certaines pages peuvent utiliser très peu de modules, il n'est pas nécessaire de charger un fichier js aussi volumineux, il est donc recommandé d'utiliser l'approche modulaire. Bien que non modulaire soit pratique, il n’est pas très convivial.

Spécification du module

Le module de Layui est basé sur la méthode de chargement de module asynchrone implémentée en interne dans layui.js, qui ne suit pas AMD (non Pourquoi, après tout, c'est arbitraire ! ), mais a défini un ensemble de spécifications de module plus légères. Et après beaucoup de pratique, cette méthode est devenue le moteur de chargement de modules principal de layui.

Pré-chargé

Allons droit au but, il est plus approprié de simplement dire comment l'utiliser. Le chargement du module de Layui utilise la méthode principale layui.use(mods, callback) Lorsque votre JS a besoin d'utiliser le module Layui, nous vous recommandons d'utiliser le préchargement, car cela peut éviter d'avoir à écrire layui.use partout. Vous devez le définir comme ceci dans la couche la plus externe :

/*
  Demo1.js
  使用Layui的form和upload模块
*/
layui.use([&#39;form&#39;, &#39;upload&#39;], function(){  //如果只加载一个模块，可以不填数组。如：layui.use(&#39;form&#39;)
  var form = layui.form //获取form模块
  ,upload = layui.upload; //获取upload模块
  
  //监听提交按钮
  form.on(&#39;submit(test)&#39;, function(data){
    console.log(data);
  });
  
  //实例化一个上传控件
  upload({
    url: &#39;上传接口url&#39;
    ,success: function(data){
      console.log(data);
    }
  })
});

Copier après la connexion

Charge à la demande (non recommandé)

Si vous souffrez d'un trouble obsessionnel-compulsif , vous n'êtes pas intéressé par le fait que le site Web a des exigences de performances extrêmes. Vous ne souhaitez pas charger les modules requis à l'avance, mais charger les modules uniquement lorsqu'une action est déclenchée. Ensuite, cela est autorisé. Vous n'avez pas besoin d'envelopper un gros layui.use dans la couche la plus externe de votre JS, vous avez seulement besoin de :

/*
  Demo2.js
  按需加载一个Layui模块
*/
 
//……
//你的各种JS代码什么的
//……
 
//下面是在一个事件回调里去加载一个Layui模块
button.addEventListener(&#39;click&#39;, function(){
  layui.use(&#39;laytpl&#39;, function(laytpl){ //温馨提示：多次调用use并不会重复加载laytpl.js，Layui内部有做模块cache处理。
    var html = laytpl(&#39;&#39;).render({});
    console.log(html);
  });
});

Copier après la connexion

Remarque : Si vous devez utiliser beaucoup de modules dans votre JS, nous ne le ferons pas. Il n'est pas recommandé d'utiliser cette méthode de chargement, car cela signifie que vous devez écrire beaucoup de layui.use() et que la maintenabilité du code n'est pas élevée.
Il est recommandé d'utiliser : le préchargement. Autrement dit, dans un fichier JS, écrivez simplement une utilisation.

Espace de noms du module

　　Layui的全部模块绑定在 layui对象下，内部由layui.define()方法来完成。每一个模块都会一个特有的名字，并且无法被占用。所以你无需担心模块的空间被污染，除非是你 delete layui.mod; 调用一个模块也必须借助layui对象的赋值。如：

layui.use([&#39;layer&#39;, &#39;laypage&#39;, &#39;laydate&#39;], function(){
  var layer = layui.layer //获得layer模块
  ,laypage = layui.laypage //获得laypage模块
  ,laydate = layui.laydate; //获得laydate模块
  
  //使用模块
});

Copier après la connexion

　　一个模块一旦加载后，就会注册在layui对象下，所以你无法直接用模块名来获得，而同样借助layui对象。譬如有时你可能会直接在元素的事件属性上去调用一个模块，如：

<input onclick="layui.laydate()">

Copier après la connexion

扩展一个Layui模块

　　layui 官方提供的模块有时可能还无法满足你，或者你试图按照layer的模块规范来扩展一个模块。那么你有必要认识layui.define()方法，相信你在文档左侧的“底层方法”中已有所阅读。下面就就让我们一起扩展一个Layui模块吧：

　　第一步：确认模块名，假设为：test，然后新建一个test.js 文件放入项目任意目录下（注意：不用放入layui目录）

　　第二步：编写test.js 如下：

/**
  扩展一个test模块
**/      
layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define(&#39;layer&#39;, callback);
  var obj = {
    hello: function(str){
      alert(&#39;Hello &#39;+ (str||&#39;test&#39;));
    }
  };
  //输出test接口
  exports(&#39;test&#39;, obj);
});

Copier après la connexion

　　第三步：设定扩展模块所在的目录，然后就可以在别的JS文件中使用了

//config的设置是全局的
layui.config({
  base: &#39;/res/js/&#39; //假设这是test.js所在的目录
}).extend({ //设定模块别名
  test: &#39;test&#39; //如果test.js是在根目录，也可以不用设定别名
  ,test1: &#39;admin/test1&#39; //相对于上述base目录的子目录
});
 
//使用test
layui.use(&#39;test&#39;, function(){
  var test = layui.test;
  
  test.hello(&#39;World!&#39;); //弹出Hello World!
});
//使用test1
layui.use(&#39;test1&#39;, function(){
  var test = layui.test1;
  
  //……
});

Copier après la connexion

大体上来说，Layui的模块定义很类似Require.js和Sea.js，但跟他们又有着明显的不同，譬如在接口输出等地方。

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!