扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这期内容当中小编将会给大家带来有关layui的新手教程,以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
成都创新互联公司是一家专注于成都做网站、成都网站制作与策划设计,青铜峡网站建设哪家好?成都创新互联公司做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:青铜峡等地区。青铜峡做网站价格咨询:18980820575
下载 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
没错,不用去管其它任何文件。因为他们(比如各模块)都是在最终使用的时候才会自动加载。这是一个基本的入门页面:
开始使用Layui
规范化的用法(推荐)
如果你想快速使用Layui的组件,你还是跟平时一样script标签引入你的js文件,然后在你的js文件中使用layui的组件。但我们更推荐你遵循Layui的模块规范,建立一个自己的模块作为入口:
上述的 index 即为你 /res/js/modules/ 目录下的 index.js,它的内容应该如下:
简单粗暴用法
如果你觉得Layui的模块化还是有点啰嗦,木有关系的亲。Layui考虑到了像你一样的猿群,我们将layui.js及所有模块单独打包合并成了一个完整的js文件,用的时候直接引入这一个文件即可。当你采用这样的方式,你无需再通过layui.use加载模块,直接使用即可,如:
但你必须知道,这种使用方式,意味着Layui的模块化已经失去了它的意义。但不可否认,它比什么都来的简单。
上述就是小编为大家分享的layui的新手教程了,如果您也有类似的疑惑,不妨参照上述方法进行尝试。如果想了解更多相关内容,请关注创新互联行业资讯。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流