Layui-获得layui方法

Posted 小刘编码员

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Layui-获得layui方法相关的知识,希望对你有一定的参考价值。

      兼容性和面向场景

layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 PC 端后台系统与前台界面的速成开发方案。

         获得layui

1.官网首页下载

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

2.Git仓库下载

你也可以通过 GitHub 或 码云 得到 layui 的完整开发包,以便于你进行二次开发,或者 Fork layui 为我们贡献方案

3.npm安装

npm install layui-src    

         快速上手

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

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

以上是关于Layui-获得layui方法的主要内容,如果未能解决你的问题,请参考以下文章

layui之日期和时间组件

layui table cols有没有回调函数?

LayUI 性别前端显示

layui 下拉框不显示解决方法

layui时间控件选择时间范围的实现方法

layui动态修改表单form内容