1 JavaScript相册小练习
1.1 “=”、“==”、“===”之间的区别
- “=”的意思是赋值
- “==”的意思是两者若是同一种数据类型，根据“===”来判断值是否相同；两者若不是同一种数据类型，就自动转换为同一种类型后根据“===”判断是否相同
- “===”的意思是严格相等，两者不是同一种数据类型，立刻返回false，是同一种数据类型则进行比较
1.2 制作相册
- 效果图
- 代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>小练习 相册</title>
<style>
div#container{
margin:0 auto;
width:830px;
height:900px;
}
body{
background-color:black;
}
</style>
</head>
<body>
<div id="container">
<!--通过表格形式制作布局-->
<table>
<!--主logo-->
<caption><img src="image/logo.png"></caption>
<tr>
<!--左箭头，激发事件中传入对应的值-->
<td><input type="image" src="image/left.gif" onclick="change('left')"></td>
<!--主图-->
<td><img src="image/1.jpg" id="myPic"></td>
<!--左箭头，激发事件中传入对应的值--->
<td><input type="image" src="image/right.gif" onclick="change('right')"></td>
</tr>
</table>
</div>
<script>
/**
* 在方法外定义值，如果将这个值放在change(value)事件内部,
* 会导致这个值在每次点击（左右箭头）时，值都赋为一。
*/
let currentPage = 1;
function change(value){
if(value == 'left'){
if(currentPage > 1){
currentPage--;
}else{
alert("已经是首页了");
}
}
if(value == 'right'){
if(currentPage < 6){
currentPage++;
}else{
alert("已经是末页了");
}
}
/**
* 绑定id之后直接通过这个变量来调用标签中的src属性并修改其值，
* 因为这里图已经定义为1.jpg、2.jpg共六张，这里写死
* 另外，".innerHTML"属性的意思是修改一个标签开闭之间的内容，
* 不是追加，而是直接覆盖，可以添加HTMl语句
* */
let dom_img = document.getElementById("myPic");
dom_img.src = "image/" + currentPage + ".jpg";
}
</script>
</body>
</html>
2 LayUI的重要组件
一个功能强大的的国产前端框架，分块介绍如何一些重要组件。
2.1 使用之初
- 引入LayUI的相关文件，一般名为“layui”，下图是它的文档树，其中相关组件可以移步官网文档。
2.2 使用LayUI所必需的环境模板
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>环境模板，如何引入layui以及常见参数解惑</title>
<!--
viewport:屏幕可视区域
content属性值:
width:可视区域的宽度，值可为数字或关键词device-width(表示设备的理想宽度)
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0、minimum-scale=1.0:可视区域的缩放级别，
maximum-scale:用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no(禁止缩放)或填写0同样表示禁止缩放
-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
删除默认的苹果工具栏和菜单栏。
需要显示工具栏和菜单栏时，不需要添加，默认值为yes，即显示。
-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--
引入LayUI的CSS样式
media:表示引入的css适用于何种设备，all表示可以针对所有设备
-->
<link rel="stylesheet" href="layui/css/layui.css" media="all"/>
</head>
<body>
<!--
表示去除链接多余动作，如果不设置此参数则页面会刷新，
如果使用“#”会造成无意义的空跳转
-->
<a href="javascript:;">测试</a>
<!--
引入LayUI的JS脚本
-->
<script src="layui/layui.js"></script>
<!--
用户自定义的JS脚本
-->
<script>
</script>
</body>
</html>
2.3 布局
2.3.1后面的代码只展示body标签中的内容。
2.3.1 行列的定义
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>布局</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all"/>
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1">
<style>
.pink{
background-color: pink;
}
.silver{
background-color: silver;
}
.hotpink{
background-color:hotpink;
}
.red{
background-color:red;
}
.yellow{
background-color:yellow;
}
.blue{
background-color:blue;
}
.orange{
background-color:orange;
}
.green{
background-color:green;
}
.cyan{
background-color:cyan;
}
.purple{
background-color:purple;
}
</style>
</head>
<body>
<!--
布局
1. 采用 layui-row 来定义行，如：<div class="layui-row"></div>，相当于table中的tr
2. 采用类似“layui-col-md*”这样的预设类来定义一组列（column），且放在行（row）内，这相当于table中的td
其中：
变量md 代表的是不同屏幕下的标记，列可以同时出现最多四种不同的组合，
分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），
以呈现更加动态灵活的布局。
变量* 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12且内容溢出，多余的列将自动另起一行。
设置的列小于12的，内容溢出时，多余的列也自动起一行。
3*.可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
4. 最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局
-->
<!--
这里以PC中型桌面为例
将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。
还可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应
注意，列中开闭标签中需要有内容才可以显示这一行
这里显示的数字表示这一列占了12份中的几份
-->
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md1">
<div class="red">1本列占一等分本列占一等分本列占一等分
本列占一等分本列占一等分本列占一等分</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md3">
<div class="orange">3</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md5">
<div class="yellow">5</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md7">
<div class="green">7</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md9">
<div class="cyan">9</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md11">
<div class="blue">11</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md12">
<div class="pink">12</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md13">
<div class="purple">13</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md14">
<div class="hotpink">14</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md9">
<div class="pink">9/12</div>
</div>
<div class="layui-col-md3">
<div class="silver">3/12</div>
</div>
</div>
</div>
</body>
</html>
- 效果图
2.3.2 设置列间距
<!--
通过“列间距”的预设类，来设定列之间的间距。
且一行中最左的列不会出现左边距，最右的列不会出现右边距。
列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。
我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：
layui-col-space1 列之间间隔 1px
layui-col-space3 列之间间隔 3px
layui-col-space5 列之间间隔 5px
layui-col-space8 列之间间隔 8px
layui-col-space10 列之间间隔 10px
layui-col-space12 列之间间隔 12px
layui-col-space15 列之间间隔 15px
layui-col-space18 列之间间隔 18px
layui-col-space20 列之间间隔 20px
layui-col-space22 列之间间隔 22px
layui-col-space28 列之间间隔 28px
layui-col-space30 列之间间隔 30px
对列追加 类似 layui-col-md-offset* 的预设类，从而让列向右偏移。
其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。
如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移3个列宽度
-->
<div class="layui-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<div class="pink">4/12</div>
</div>
<div class="layui-col-md4">
<div class="purple">4/12</div>
</div>
<div class="layui-col-md4">
<div class="hotpink">4/12</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md4">
<div class="red">4/12</div>
</div>
<div class="layui-col-md4 layui-col-md-offset4">
<div class="blue">4/12</div>
</div>
</div>
</div>
<script src="layui/layui.js"></script>
<script>
</script>
- 效果图
2.3.3 栅格嵌套
<!--
理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。
在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。
嵌套列中一行出现溢出情况的，自动换行显示
-->
<div class="layui-container">
<div class="layui-row layui-col-space5">
<div class="layui-col-md5">
<div class="layui-row">
<div class="layui-col-md3">
<div class="red">内部列1</div>
</div>
<div class="layui-col-md12">
<div class="yellow">内部列2</div>
</div>
<div class="layui-col-md9">
<div class="blue">内部列3</div>
</div>
</div>
</div>
<div class="layui-col-md7">
<div class="layui-row">
<div class="layui-col-md12">
<div class="red">内部列1</div>
</div>
<div class="layui-col-md9">
<div class="yellow">内部列2</div>
</div>
<div class="layui-col-md3">
<div class="blue">内部列3</div>
</div>
</div>
</div>
</div>
</div>
<script src="layui/layui.js"></script>
<script>
</script>
- 效果图
2.3.4 兼容性
以下代码黏贴到IE8、9的body标签内可以兼容LayUI的栅格。
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
2.4 图标
LayUI的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库。因此你可以把一个icon看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size这种作用于字体的属性就可以改变图标的颜色和大小。这里只举例图标如何使用，更多图标移步官方文档·字体图标查找。
只需要按照如下代码将内置图标的对应CSS类名（类中须有layui-icon）粘贴到i标签或Unicode字符复制到i标签之间即可。
<i class="layui-icon layui-icon-face-smile"></i>
<i class="layui-icon" style="font-size:150px;color:orangered;padding:20px"></i>
<script src="layui/layui.js"></script>
<script>
</script>
2.5 动画与按钮
2.5.1 动画
其中 layui-anim 是必须的，后面跟着的是不同的动画类。
<!--
动画的类型:
从最底部往上滑入
layui-anim-up
微微往上滑入
layui-anim-upbit
平滑放大
layui-anim-scale
弹簧式放大
layui-anim-scaleSpring
渐现
layui-anim-fadein
渐隐
layui-anim-fadeout
360度旋转
layui-anim-rotate
循环动画
追加：layui-anim-loop
-->
<!--其中 layui-anim 是必须的，后面跟着的即是不同的动画类-->
<div style="width:200px;height:100px;background-color:lightblue"
class="layui-anim layui-anim-fadein">看看效果</div>
<div class="layui-anim layui-anim-rotate">
<i class="layui-icon layui-icon-refresh-3"
style="font-size:100px;color:blue;padding:20px"></i>
</div>
<script src="layui/layui.js"></script>
<script>
</script>
（动画视频不会做，自己试试吧- -|||）
2.5.2 按钮
<!--
按钮
-->
<button class="layui-btn layui-anim layui-anim-scale">我是一个按钮呀</button>
<br/>
<br/>
<!--
图标配合按钮
-->
<button class="layui-btn">
<i class="layui-icon"></i> 添加
</button>
<button class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon layui-icon-login-wechat"></i>
</button>
<br/>
<br/>
<!--
按钮组
-->
<div class="layui-btn-group">
<button class="layui-btn">增加</button>
<button class="layui-btn">编辑</button>
<button class="layui-btn">删除</button>
</div>
<div class="layui-btn-group">
<button class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
<div class="layui-btn-group">
<button class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
<script src="layui/layui.js"></script>
<script>
</script>
2.6 表单
<!--
在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素
，并通过内置的 form模块 来完成各种交互。依赖加载模块：form （请注意：如果不加载form模块，select、checkbox
、radio等将无法显示，并且无法使用form相关功能）
可选:通过追加 layui-form-pane 的class，来设定表单的方框风格
<form class="layui-form layui-form-pane" action="">
内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如：
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
</form>
-->
<form class="layui-form" action="helloworld1.html" method="post" lay-filter="myForm">
<!--
class="layui-form-item"
每一个表单项使用此属性嵌套在外层表示一个表单项
-->
<div class="layui-form-item">
<!--
class="layui-form-label"
表示标签区域
-->
<label class="layui-form-label">用户姓名:</label>
<!--
class="layui-input-block"
块元素输入框，占满一行
class="layui-input-inline"
行内元素输入框，不占满一行
class="layui-inline"：定义父元素的行内页面元素类型
class="layui-input-inline"：定义内层行内
-->
<div class="layui-input-block">
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~1:单行文本、密码输入框~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--
required:直接书写此属性表示调用H5规范属性，非Layui内置属性
如果使用Layui内置验证可以省略此属性
lay-verify required（必填项）
phone（手机号）
email（邮箱）
url（网址）
number（数字）
date（日期）
identity（身份证）
自定义值 同时支持多条规则的验证，格式：lay-verify="验证A|验证B"
如：lay-verify="required|phone|number"
另外，除了我们内置的校验规则，你还可以给他设定任意的值，比如lay-verify="verifyName"
，那么你就需要借助form.verify()方法对verifyName进行一个校验规则的定义。
autocomplete="off" 是否记录用户输入过的信息，存在on 和 off两个值，
默认值为on，但是为安全性考虑，一般关闭，但是在chrome浏览器中如果出现关闭不能的情况可以填写
autocomplete="new-password"
-->
<input type="text" name="name" lay-verify="required|verifyName"
placeholder="请输入姓名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户密码:</label>
<div class="layui-input-inline">
<input type="password" name="password" lay-verify="required|verifyPassword"
placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<!--
layui-form-mid:设置辅助文字居于输入框中部
layui-word-aux:设置提示文字样式
-->
<div class="layui-form-mid layui-word-aux">（必填）用户密码应该在5到10位之间</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_min" placeholder="￥"
autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_max" placeholder="￥"
autocomplete="off" class="layui-input">
</div>
</div>
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~2:下拉列表框~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="layui-form-item">
<label class="layui-form-label">归属地:</label>
<div class="layui-input-inline">
<select name="city" lay-verify="required"
lay-filter="filterSelect">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2" disabled >广州</option>
<option value="3">深圳</option>
<option value="4">山东</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">提示问题:</label>
<div class="layui-input-inline">
<select name="quiz">
<option value="">请选择</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市？</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号？</option>
<option value="你最喜欢的老师">你最喜欢的老师？</option>
</optgroup>
</select>
</div>
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~3:复选框~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="layui-form-item">
<label class="layui-form-label">爱好1:</label>
默认风格:
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作" lay-filter="filterCheck">
<input type="checkbox" name="like[read]" title="阅读" checked>
<input type="checkbox" name="like[forbidden]" title="禁用" disabled>
</div>
</div>
<!--
title 任意字符 设定元素名称，一般用于checkbox、radio框
lay-skin switch（开关风格） primary（原始风格） 定义元素的风格，目前只对 checkbox 元素有效，可将其转变为开关样式
lay-ignore 任意字符或不设值 是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格
lay-filter 任意字符 事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。其实它并不私属于form模块，它在 layui 的很多基于事件的接口中都会应用到。
-->
<div class="layui-form-item">
<label class="layui-form-label">爱好2:</label>
原始风格:
<div class="layui-input-block">
<input type="checkbox" name="" title="写作" lay-skin="primary" lay-filter="filterCheck" checked>
<input type="checkbox" name="" title="阅读" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
</div>
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~4:复选框（特殊）~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="layui-form-item">
<label class="layui-form-label">开关:</label>
<div class="layui-input-block">
<input type="checkbox" name="xxx" lay-skin="switch" lay-filter="filterSwitch" value="onOff">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>
</div>
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~5:单选框~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="layui-form-item">
<label class="layui-form-label">单选框:</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男" lay-filter="filterSex">
<input type="radio" name="sex" value="女" title="女" lay-filter="filterSex" checked>
</div>
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~6:文本域~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域:</label>
<div class="layui-input-inline">
<textarea name="weibo" placeholder="请输入内容" class="layui-textarea"
cols="30" rows="5"></textarea>
</div>
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~7:提交~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="layui-form-item">
<div class="layui-input-block">
<!--
lay-submit 无需填写值,绑定触发提交的元素，如button
-->
<button class="layui-btn" lay-submit lay-filter="filterSubmit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<!--
引入LayUI的JS脚本
-->
<script src="layui/layui.js"></script>
<script>
//遵循 LayUI 的模块规范建立一个入口文件，通过 layui.use() 方式加载该入口文件，相当于Java中的主函数
//必须在执行该方法后才会加载内置函数
//方括号中的元素用来声明该模块所依赖的模块
//function意为回调函数，加载这个组件之后调用的函数
layui.use(['form', 'layedit', 'laydate','layer'], function(){
let form = layui.form
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
//表单初始赋值，一般不用，去掉即可
//myForm 即 class="layui-form" 所在元素对应的 lay-filter="" 对应的值
form.val('myForm', {
"name": "value"
,"password":"123456"
,"price_min":100
,"price_max":200
,"city":"1"
,"quiz":"你工作的第一个城市"
,"like[write]":true //复选框选中状态
,"weibo":"测试"
});
//验证规则
form.verify({
//这里的item的意思是得到绑定verifyName的原始DOM对象
//如果使用正则表达式，无法使用item参数
verifyName:function(value,item){
if(value.length<4||value.length>8){
return "用户名必须在4到8位之间";
}
console.log(item);
},
//以下为第二种书写方式一般配合正则表达式
verifyPassword:[/^[\S]{5,10}$/,"用户密码必须在5到10位之间"]
});
//事件监听
//监听多选框
form.on('checkbox(filterCheck)', function(data){
console.log(data.elem); //得到checkbox的原始DOM对象
console.log(data.elem.checked); //是否被选中，true或者false
console.log(data.value); //复选框value值，也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});
//事件监听
//监听下拉列表框
form.on("select(filterSelect)",function(data){
console.log(data);//获取option的信息
});
//事件监听
//监听switch特殊复选框
form.on("switch(filterSwitch)",function(data){
/*
* layer.tips('显示的信息',在哪个对象处显示);
* */
layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF',data.othis);
if(data.elem.checked==true){
console.log("开开啦！！");
//通过设置value值从而在表单提交时提交value数据
data.elem.value="我是switch";
}else{
console.log("关闭啦！！");
console.log(data.elem.value);
}
});
//事件监听
//监听radio单选框
form.on('radio(filterSex)', function(data){
console.log(data.elem); //得到radio原始DOM对象
console.log(data.value); //被点击的radio的value值
});
//监听提交
form.on('submit(filterSubmit)',function(data){
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
});
//阻止表单跳转。如果需要表单跳转，去掉这段即可
return false;
});
});
</script>
2.7 导航
在使用导航之前，需要依赖element模块及JS库，否则无法进行功能操作。（本章节后面的代码均省略引入script脚本的操作）
<script src="layui/layui.js"></script>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
let element = layui.element;
});
</script>
2.7.1 水平导航
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item"><a href="">产品</a></li>
<!--
layui-this:表示默认选中
-->
<li class="layui-nav-item layui-this"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<!--
这里是二级菜单
<dl>
<dt>标题1</dt>
<dd>标题1内容</dd>
<dt>标题2</dt>
<dd>标题2内容</dd>
</dl>
-->
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
<!--
layui-badge:可作为未读信息的徽标，标签中传入即为显示的内容
-->
<li class="layui-nav-item" style="float: right;">
<a href="">控制台<span class="layui-badge">9</span></a>
</li>
<!--
layui-badge-dot:可作为未读信息的徽标，红点
-->
<li class="layui-nav-item" style="float: right;">
<a href="">个人中心<span class="layui-badge-dot"></span></a>
</li>
<li class="layui-nav-item" style="float: right;">
<a href=""><img src="images/avatar.png" class="layui-nav-img">Eric</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">修改信息</a></dd>
<dd><a href="javascript:;">安全管理</a></dd>
<dd><a href="javascript:;">注销</a></dd>
</dl>
</li>
</ul>
效果图（子表单隐藏）：
2.7.2 各种配色的导航
<!--
共支持以下几种配色
layui-bg-cyan（藏青，默认）
layui-bg-molv（墨绿）
layui-bg-green （墨绿）
layui-bg-blue（艳蓝）
layui-bg-orange （橙色）
-->
<ul class="layui-nav layui-bg-orange" lay-filter="">
<li class="layui-nav-item"><a href="javascript:;">栏目1</a></li>
<li class="layui-nav-item"><a href="javascript:;">栏目2</a></li>
<li class="layui-nav-item"><a href="javascript:;">栏目3</a></li>
<li class="layui-nav-item"><a href="javascript:;">栏目4</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">栏目4子列表1</a></dd>
<dd><a href="javascript:;">栏目4子列表2</a></dd>
<dd><a href="javascript:;">栏目4子列表3</a></dd>
<dd><a href="javascript:;">栏目4子列表4</a></dd>
<dd><a href="javascript:;">栏目4子列表5</a></dd>
</dl>
</li>
</ul>
效果图：
2.7.3 垂直导航
<ul class="layui-nav layui-nav-tree" lay-filter="">
<!--
侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side">
-->
<!--
layui-nav-itemed:此属性表示默认展开
-->
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</a></dd>
<dd><a href="">跳转</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
</ul>
效果图：
2.7.4 侧边导航
<!--
注意侧边导航与垂直导航几乎一致，但是会从上到下占满整个浏览器
-->
<ul class="layui-nav layui-nav-tree layui-nav-side">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</a></dd>
<dd><a href="">跳转</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
</ul>
效果图：
2.7.5 面包屑
<!--
<cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
-->
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<hr>
<!--
你还可以通过设置属性 lay-separator="-" 来自定义分隔符
-->
<span class="layui-breadcrumb" lay-separator="-">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<hr>
<span class="layui-breadcrumb" lay-separator="|">
<a href="">娱乐</a>
<a href="">八卦</a>
<a href="">体育</a>
<a href="">搞笑</a>
<a href="">视频</a>
<a href="">游戏</a>
<a href="">综艺</a>
</span>
<hr>
效果图：
2.8 选项卡
与导航类似，在使用选项卡之前，需要依赖element模块及JS库，否则无法进行功能操作。（本章节后面的代码均省略引入script脚本的操作）
<script src="layui/layui.js"></script>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
let element = layui.element;
});
</script>
2.8.1 默认风格
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">我是网站设置的内容</div>
<div class="layui-tab-item">我是用户管理的内容</div>
<div class="layui-tab-item">我是权限分配的内容</div>
<div class="layui-tab-item">我是商品管理的内容</div>
<div class="layui-tab-item">我是订单管理的内容</div>
</div>
</div>
效果图：
2.8.2 简洁风格
<!--
通过追加class：layui-tab-brief 来设定简洁风格。
-->
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">我是网站设置</div>
<div class="layui-tab-item">我是用户管理的内容</div>
<div class="layui-tab-item">我是权限分配的内容</div>
<div class="layui-tab-item">我是商品管理的内容</div>
<div class="layui-tab-item">我是订单管理的内容</div>
</div>
</div>
效果图：
2.8.3 卡片风格
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content" style="height:100px;">
<div class="layui-tab-item layui-show">1</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
<div class="layui-tab-item">6</div>
</div>
</div>
效果图：
2.8.4 带删除的tab
<!--
只要对最外层容器 添加lay-allowClose="true"
则tab可以删除
-->
<div class="layui-tab" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户基本管理</li>
<li>权限分配</li>
<li>全部历史商品管理文字长一点试试</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">1</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
<div class="layui-tab-item">6</div>
</div>
</div>
效果图：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
