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
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
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(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form(); layer.msg('Hello World'); }); </script> </body> </html>
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: '/res/js/modules/' //你的模块目录 }).use('index'); //加载入口 </script>
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(['layer', 'form'], function(exports){ var layer = layui.layer ,form = layui.form(); layer.msg('Hello World'); exports('index', {}); //注意,这里是模块输出的核心,模块名必须和use时的模块名一致 }); </script>
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>
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!

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)

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.

É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.

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.

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é.

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.

La méthode d'utilisation de layui pour transmettre des données est la suivante : Utilisez Ajax : créez l'objet de requête, définissez les paramètres de la requête (URL, méthode, données) et traitez la réponse. Utilisez des méthodes intégrées : simplifiez le transfert de données à l'aide de méthodes intégrées telles que $.post, $.get, $.postJSON ou $.getJSON.

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.

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.
