zoukankan      html  css  js  c++  java
  • layui的基本使用

    打开官网https://www.layui.com/下载这个框架

      官网首页 下载到 layui 的最新版,它经过了自动化构建,更适合用于生产环境。目录结构如下

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

      基本入门:

    <!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>
    <!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>
    

      这两个代码主要是导入的js文件不一样。一个是layui.js跟layui.all.js,主要的区别是:

    layui.all.js: 采用非模块化方式  非模块化不用每次都调用layui.use([],fun...)引入对应模块,引入的JS是/layui/layui.all.js

    layui.js: 自动加载    模块化必须每次都调用layui.use([],fun...)引入对应模块,引入的JS是/layui/layui.js(推荐用这种,但是就是前面写起来麻烦

  • 相关阅读:
    leetcode Super Ugly Number
    leetcode Find Median from Data Stream
    leetcode Remove Invalid Parentheses
    leetcode Range Sum Query
    leetcode Range Sum Query
    leetcode Minimum Height Trees
    hdu 3836 Equivalent Sets
    hdu 1269 迷宫城堡
    hud 2586 How far away ?
    poj 1330 Nearest Common Ancestors
  • 原文地址:https://www.cnblogs.com/easyjie/p/12012250.html
Copyright © 2011-2022 走看看