温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

layui怎么用

发布时间:2021-09-23 15:28:01 来源:亿速云 阅读:155 作者:小新 栏目:开发技术

小编给大家分享一下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怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI