Tutoriel Premiers pas avec Layui-Tutoriel Layui-php.cn

Tutoriel Premiers pas avec Layui

尚

Libérer： 2019-11-14 20:54:15

avant

9687 Les gens l'ont consulté

layui (homophone : UI-like) est un framework d'interface utilisateur front-end écrit en utilisant ses propres spécifications de module. Il suit la forme d'écriture et d'organisation du HTML/CSS/JS natif. Le seuil est extrêmement bas et peut être utilisé. de la boîte. Très adapté au développement rapide d’interfaces.

Tutoriel Premiers pas avec Layui

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 //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

Copier après la connexion

. C'est vrai, ne vous inquiétez pas pour les autres fichiers. Parce qu'ils (comme chaque module) sont automatiquement chargés lorsqu'ils sont finalement utilisés.

Ceci est 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="../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

Remarque : pour utiliser layui, vous devez d'abord charger le module. Le code ci-dessus sert à précharger le module ! Si vous utilisez layer directement sans charger le module au préalable, une erreur sera signalée au moment de l'exécution ! L'objet calque est introuvable ou la méthode est introuvable et d'autres problèmes !

layui.use([&#39;layer&#39;, &#39;form&#39;], function(){
  var layer = layui.layer
  ,form = layui.form;
});

Copier après la connexion

Voici l'exemple de code que j'utilise :

Appel de layui :

    <!--layui-->
    <link href="/libs/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <script src="/libs/layui/layui.js" type="text/javascript"></script>

Copier après la connexion

Préchargement :

//layui layer
let layuiLayer;
//layui预先加载
layui.use([&#39;layer&#39;], function () {
    layuiLayer = layui.layer;
});

Copier après la connexion

Utilisation de l'objet layui :

  layuiLayer.open({
            title: &#39;提示&#39;,
            content: &#39;请输入名字！&#39;
        })

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Tutoriel Premiers pas avec Layui