课程代码layUI课件

第一章：layUI1.1初识layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。1.2 浏览器兼容和面向场景layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。1.3官网地址 / 文档 示例 后台模板（）第二章：layUI使用2.1 官网下载2.1.1 最新版本2.1.2 目录结构2.2项目中如何使用layUI2.2.1引入需要的layUI文件 1. ./layui/css/layui.css2. ./layui/layui.js /提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js不用去管其它任何文件。因为他们（比如各模块）都是在最终使用的时候才会自动加载2.2.2 hello world /模块化的用法（推荐） layui.use(layer, form, function () var layer = layui.layer , form = layui.form; layer.msg(Hello World); ); 2.3 模块化使用（推荐）推荐你遵循 layui 的模块规范建立一个入口文件，并通过 layui.use() 方式来加载该入口文件，如下所示：1. 2. layui.config(3. base: /res/js/modules/ /你存放新模块的目录，注意，不是layui的模块目录4. ).use(index); /加载入口5. 1. /*2. 项目JS主入口3. 以依赖layui的layer和form模块为例4. */ 5. layui.define(layer, form, function(exports)6. var layer = layui.layer7. ,form = layui.form;8.9. layer.msg(Hello World);10.11. exports(index, ); /注意，这里是模块输出的核心，模块名必须和use时的模块名一致12. );2.4 非模块化用法 采用“一次性加载”的方式，我们将 layui.js 及所有模块单独打包合并成了一个完整的js文件，用的时候直接引入这一个文件即可。当你采用这样的方式时，你无需再通过 layui.use() 方法加载模块，直接使用即可，如：。1. 2. 3. ;!function()4. /无需再执行layui.use()方法加载模块，直接使用即可5. var form = layui.form6. ,layer = layui.layer;7.8. /9. ();10. 采用该方式，意味着 layui 的模块化已经失去了它的意义。但不可否认，它使用起来会更简单直接。 第三章：页面元素3.1 颜色A：常用的主色#009688通常用于按钮、及任何修饰元素#5FB878一般用于选中状态#393D49通常用于导航#1E9FFF比较适合一些鲜艳色系的页面B：场景色#FFB800暖色系，一般用于提示性元素#FF5722比较引人注意的颜色#01AAED用于文字着色，如链接文本#2F4056侧边或底部普遍采用的颜色C：极简中性色（一般用于背景、边框等）#F0F0F0#f2f2f2#eeeeee#e2e2e2#dddddd#d2d2d2#c2c2c2D：内置的背景色CSS类（layui 内置了七种背景色，以便你用于各种元素中，如：徽章、分割线、导航等等） 赤色： class=layui-bg-red 橙色： class=layui-bg-orange 墨绿： class=layui-bg-green 藏青： class=layui-bg-cyan 蓝色： class=layui-bg-blue 雅黑： class=layui-bg-black 银灰： class=layui-bg-gray3.2 图标layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过font-class或unicode来定义不同的图标。 A：定义图标的方式有两种：第一种：font-class1. 从 layui 2.3.0 开始，支持 font-class 的形式定义图标：2. 通过对一个内联元素（一般推荐用i标签）设定class=layui-icon，来定义一个图标，然后对元素加上图标对应的font-class（注意：layui 2.3.0 之前只支持采用unicode 字符)，即可显示出你想要的图标第二种：unicode1. 注意：在 layui 2.3.0 之前的版本，只能设置 unicode 来定义图标2. 3. 其中的 即是图标对应的 unicode 字符B：对图标设定大小或颜色：1. 内置图标一览表：/doc/element/icon.html3.3 动画注：layui 的动画全部采用 CSS3，因此不支持ie8和部分不支持ie9（即ie8/9无动画）动画的使用：直接对元素赋值动画特定的 class 类名即可1. 其中 layui-anim 是必须的，后面跟着的即是不同的动画类2. 3. 循环动画，追加：layui-anim-loop4. 3.4 按钮向任意HTML元素设定class=layui-btn，建立一个基础按钮。通过追加格式为layui-btn-type的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格1. 一个标准的按钮2. 一个可跳转的按钮3.5 表单 表单中的类说明.layui-form表单元素块.layui-form-item行区块结构.layui-form-label文本显示.layui-input-block存放标签lay-skin=switch开关风格layui-textarea文本域layui-inline定义外层行内layui-input-inline定义内层行内layui-form-pane设定表单风格lay-ignore保留系统风格3.6 导航注：依赖加载模块：element水平导航（class=layui-nav）主题导航（class=layui-nav layui-bg-green） 侧边栏导航（class=layui-nav layui-nav-tree）面包屑导航（class=layui-breadcrumb）3.7 Tab选项卡 Tabs组件：class=“layui-tab”风格类型有以下三种：A：Tab简洁风格 class=layui-tab layui-tab-brief B:Tab卡片风格class=layui-tab layui-tab-cardC：带删除的Tab lay-allowClose=true 来允许Tab选项卡被删除3.8 进度条class=layui-progress1. 2. 3. 4.5. 6. /注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作7. layui.use(element, function()8. var element = layui.element;9. );10. 3.9表格属性名属性值lay-even无lay-skin=属性值line （行边框风格）row （列边框风格）nob （无边框风格）lay-size=属性值sm （小尺寸）lg （大尺寸） 3.10徽章 1. 小圆点，通过 layui-badge-dot 来定义，里面不能加文字2. 1. 椭圆体，通过 layui-badge 来定义。 2. 61. 边框体，通过 layui-badge-rim 来定义2. 6颜色：1. 2. 3. 4. 5. 6. 也可以和元素一起使用：1. 查看消息13.11时间轴1. 第四章：内置模块4.1 弹窗（layer.js）1.引入jquery和layer.jslayer.open( title: 在线调试 ,content: 可以填写任意的layer代码); 4.2 日期和时间组件场景用前准备调用方式1. 在 layui 模块中使用下载 layui 后，引入layui.css和layui.js即可通过layui.use(laydate, callback)加载模块后，再调用方法2. 作为独立组件使用去layDate独立版本官网下载组件包，引入 laydate.js 即可4.3 分页1. 1. 2. layui.use(laypage, function()3. var laypage = layui.laypage;4.5. /执行一个laypage实例6. laypage.render(7. elem: test1 /注意，这里的 test1 是 ID，不用加 # 号8. ,count: 50 /数据总数，从服务端得到9. );10. );11. 4.4 轮播组件属性说明layui-carousel外层的轮播容器layui-carousel内层 标识条目layui.carousel切换轮播图obj.index当前索引Obj.prevIndex上一条索引obj.item当前对象carousel.render(options)重置轮播图4.5 评分rate 组件展示或评价参数选项说明elem指向容器选择器length评分组件中具体星星的个数。个数当然是整数啦，残缺的星星很可怜的，所以设置了小数点的组件我们会默认向下取整value评分的初始值theme主题颜色。我们默认的组件颜色是#