Comment utiliser layui
Si vous souhaitez en savoir plus sur layui, vous pouvez cliquer sur : tutoriel 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和所有模块的合并文件
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
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(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
</html>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('Hello World');
}();
</script>
</body>
</html>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(['form', 'upload'], function(){ //如果只加载一个模块，可以不填数组。如：layui.use('form')
var form = layui.form //获取form模块
,upload = layui.upload; //获取upload模块
//监听提交按钮
form.on('submit(test)', function(data){
console.log(data);
});
//实例化一个上传控件
upload({
url: '上传接口url'
,success: function(data){
console.log(data);
}
})
});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('click', function(){
layui.use('laytpl', function(laytpl){ //温馨提示：多次调用use并不会重复加载laytpl.js，Layui内部有做模块cache处理。
var html = laytpl('').render({});
console.log(html);
});
}); 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(['layer', 'laypage', 'laydate'], function(){
var layer = layui.layer //获得layer模块
,laypage = layui.laypage //获得laypage模块
,laydate = layui.laydate; //获得laydate模块
//使用模块
});一个模块一旦加载后，就会注册在layui对象下，所以你无法直接用模块名来获得，而同样借助layui对象。譬如有时你可能会直接在元素的事件属性上去调用一个模块，如：
<input onclick="layui.laydate()">
扩展一个Layui模块
layui 官方提供的模块有时可能还无法满足你，或者你试图按照layer的模块规范来扩展一个模块。那么你有必要认识layui.define()方法，相信你在文档左侧的“底层方法”中已有所阅读。下面就就让我们一起扩展一个Layui模块吧：
第一步：确认模块名，假设为：test，然后新建一个test.js 文件放入项目任意目录下（注意：不用放入layui目录）
第二步：编写test.js 如下：
/**
扩展一个test模块
**/
layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define('layer', callback);
var obj = {
hello: function(str){
alert('Hello '+ (str||'test'));
}
};
//输出test接口
exports('test', obj);
});第三步：设定扩展模块所在的目录，然后就可以在别的JS文件中使用了
//config的设置是全局的
layui.config({
base: '/res/js/' //假设这是test.js所在的目录
}).extend({ //设定模块别名
test: 'test' //如果test.js是在根目录，也可以不用设定别名
,test1: 'admin/test1' //相对于上述base目录的子目录
});
//使用test
layui.use('test', function(){
var test = layui.test;
test.hello('World!'); //弹出Hello World!
});
//使用test1
layui.use('test1', function(){
var test = layui.test1;
//……
});大体上来说，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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment obtenir des données de formulaire dans Layui
Apr 04, 2024 am 03:39 AM
layui fournit diverses méthodes pour obtenir des données de formulaire, notamment l'obtention directe de toutes les données de champ du formulaire, l'obtention de la valeur d'un seul élément de formulaire, l'utilisation de la méthode formAPI.getVal() pour obtenir la valeur de champ spécifiée, la sérialisation des données de formulaire et en l'utilisant comme paramètre de requête AJAX et en écoutant l'événement de soumission de formulaire, vous obtenez des données.
Comment configurer le saut sur la page de connexion Layui
Apr 04, 2024 am 03:12 AM
Étapes de configuration du saut de la page de connexion Layui : Ajouter un code de saut : ajoutez un jugement dans l'événement de clic sur le bouton de soumission du formulaire de connexion et accédez à la page spécifiée via window.location.href après une connexion réussie. Modifiez la configuration du formulaire : ajoutez un champ de saisie masqué à l'élément de formulaire de lay-filter="login", avec le nom "redirect" et la valeur étant l'adresse de la page cible.
Comment Layui met en œuvre l'auto-adaptation
Apr 26, 2024 am 03:00 AM
Une mise en page adaptative peut être obtenue en utilisant la fonction de mise en page réactive du framework layui. Les étapes comprennent : le référencement du framework layui. Définissez un conteneur de mise en page adaptatif et définissez la classe layui-container. Utilisez des points d'arrêt réactifs (xs/sm/md/lg) pour masquer des éléments sous des points d'arrêt spécifiques. Spécifiez la largeur de l'élément à l'aide du système de grille (layui-col-). Créez un espacement via le décalage (layui-offset-). Utilisez des utilitaires réactifs (layui-invisible/show/block/inline) pour contrôler la visibilité des éléments et leur apparence.
Quelle est la différence entre layui et vue ?
Apr 04, 2024 am 03:54 AM
La différence entre layui et Vue se reflète principalement dans les fonctions et les préoccupations. Layui se concentre sur le développement rapide d'éléments d'interface utilisateur et fournit des composants préfabriqués pour simplifier la construction de pages ; Vue est un framework full-stack qui se concentre sur la liaison de données, le développement de composants et la gestion d'état, et est plus adapté à la création d'applications complexes. Layui est facile à apprendre et convient pour créer rapidement des pages ; Vue a une courbe d'apprentissage abrupte mais permet de créer des applications évolutives et faciles à entretenir. En fonction des besoins du projet et du niveau de compétence du développeur, le cadre approprié peut être sélectionné.
Comment exécuter Layui
Apr 04, 2024 am 03:42 AM
Pour exécuter layui, effectuez les étapes suivantes : 1. Importez le script layui ; 2. Initialisez layui ; 3. Utilisez les composants layui ; 4. Importez les styles layui (facultatif) ; Avec ces étapes, vous pouvez créer des applications Web en utilisant la puissance de layui.
Dans quel langage est le framework Layui ?
Apr 04, 2024 am 04:39 AM
Le framework layui est un framework frontal basé sur JavaScript qui fournit un ensemble de composants et d'outils d'interface utilisateur faciles à utiliser pour aider les développeurs à créer rapidement des applications Web réactives. Ses fonctionnalités sont les suivantes : modulaire, légère, réactive, et dispose d'une documentation complète et d'un support communautaire. layui est largement utilisé dans le développement de systèmes backend de gestion, de sites Web de commerce électronique et d'applications mobiles. Les avantages sont un démarrage rapide, une efficacité améliorée et une maintenance facile. Les inconvénients sont une mauvaise personnalisation et des mises à jour technologiques lentes.
Lequel est le meilleur, layui ou elementui ?
Apr 04, 2024 am 04:15 AM
Question : Lequel est le meilleur, layui ou ElementUI ? Réponse : Cela dépend des besoins du projet. Layui est plus complet, personnalisable et adapté aux grands projets, tandis qu'ElementUI est plus léger, plus beau et plus facile à utiliser. Les raisons spécifiques de sélection sont les suivantes : Choisissez layui : Fournit une gamme plus large de fonctions et de modules qui permettent un degré élevé de personnalisation de l'apparence et du comportement des composants. Convient aux projets à grande échelle qui nécessitent un large éventail de fonctions et d'évolutivité. ElementUI : taille plus petite et vitesse de chargement plus rapide. Les composants suivent les principes de conception matérielle, une esthétique élevée, fournissant un grand nombre de composants prêts à l'emploi, réduisant ainsi la complexité et le temps de développement.
La différence entre le framework layui et le framework vue
Apr 26, 2024 am 01:27 AM
layui et vue sont des frameworks frontaux. layui est une bibliothèque légère qui fournit des composants et des outils d'interface utilisateur ; vue est un framework complet qui fournit des composants d'interface utilisateur, la gestion de l'état, la liaison de données, le routage et d'autres fonctions. Layui est basé sur une architecture modulaire et Vue est basée sur une architecture à composants. layui a un écosystème plus petit, vue a un écosystème vaste et actif. La courbe d'apprentissage de layui est faible et la courbe d'apprentissage de vue est raide. layui convient aux petits projets et au développement rapide de composants d'interface utilisateur, tandis que vue convient aux grands projets et scénarios nécessitant des fonctions riches.
