zoukankan      html  css  js  c++  java
  • layui-概念-入门-总结

    layui教程:http://www.dosrun.com/layui/ 

    获得 Layui
    你可以在官网首页下载到 Layui 的最新版,也可以通过 GitHub 得到Layui的开源包。目前只同步维护这两处资源渠道。一般如果你是用于实际项目,推荐你直接从官网下载。layui构建后的结构(也就是你获得的包)

        ├─css   //css目录
        │  └─modules   //模块css目录(一般如果模块相对较大,我们会单独提取)
        │      ├─laydate
        │      ├─layer
        │      │  └─default
        │      └─layim
        │          └─skin
        ├─font    //字体图标目录
        ├─images   //图片资源目录(一些表情等)
        │  └─face
        └─lay    //JS目录
        │   ├─dest   //经过合并的完整模块
        │   └─modules   //各模块/组件
        └─layui.js

    快速上手
    获得layui后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:

    ./layui/css/layui.css
    ./layui/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="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>

    规范化的用法(推荐)
    如果你想快速使用Layui的组件,你还是跟平时一样script标签引入你的js文件,然后在你的js文件中使用layui的组件。但我们更推荐你遵循Layui的模块规范,建立一个自己的模块作为入口:

    <script>
    layui.config({
      base: '/res/js/modules/' //你的模块目录
    }).use('index'); //加载入口
    </script>

    上述的 index 即为你 /res/js/modules/ 目录下的 index.js,它的内容应该如下:

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

    简单粗暴用法

    如果你觉得Layui的模块化还是有点啰嗦,木有关系的亲。Layui考虑到了像你一样的猿群,我们将layui.js及所有模块单独打包合并成了一个完整的js文件,用的时候直接引入这一个文件即可。当你采用这样的方式,你无需再通过layui.use加载模块,直接使用即可,如:

    <script src="../layui/lay/dest/layui.all.js"></script>  
    <script>
    ;!function(){
      //当使用了 layui.all.js,无需再执行layui.use()方法
      var from = layui.form()
      ,layer = layui.layer;
      
      //
    }();
    </script>

    但你必须知道,这种使用方式,意味着Layui的模块化已经失去了它的意义。但不可否认,它比什么都来的简单。
    好了,不管你采用什么样的方式,从现在开始,尽情地使用Layui吧!

    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

    layui是一个前端框架。layui.layer-是其下的一个弹层组件 :参考http://www.dosrun.com/layui/  首页介绍-概念(分类)!

    更多关于layui.layer-弹出层组件内容参见:http://www.cnblogs.com/xiangru0921/p/6728768.html

    更多layui组件内容参见:http://www.dosrun.com/layui/

    =========================================================================

    更多内容参见:http://www.dosrun.com/layui/layui-intro.html

  • 相关阅读:
    k8s podpreset 参数注入
    python pipenv 包管理
    使用火狐浏览器访问双向认证的k8s api
    k8s api
    常用的排序算法的时间复杂度和空间复杂度
    flask 启动
    Redis系列-第四篇持久化与事务
    Redis系列-第五篇分布式锁与主从复制
    Redis系列-第六篇哨兵模式
    Docker系列-第一篇Docker简介
  • 原文地址:https://www.cnblogs.com/xiangru0921/p/6732196.html
Copyright © 2011-2022 走看看