收藏
天蓬老师批改状态：合格
老师批语：
layui 框架表单提交开关询问框
index页面
首页没有任何重点，主要是引用layui框架css以及js,其中采用layui的手风琴样式来实现左侧菜单，
左侧菜单注意问题
在div中加入 lay-accordion用于实现点击对应的折叠面板，将关闭其他的折叠面板；
加入layui-show将为实现默认打开，去除打开为折叠；其中如果在折叠面板的父级DIV加入lay-accordion，相同会实现，点击对应的面板，将关闭其他面板；
折叠样式在layui中，采用js加载方式，并且使用element 按需加载；
内容区域：
内容区域主要采用iframe 其注意内容
iframe 用于载入页面，其可以设置，去除边框；去除右侧滚动条及下方滚动条：分别为：
frameborder=0 为无边框1位有边框；
scrolling : 滚动条，其中参数有 auto(需要时出现滚动条)yes（始终显示滚动条）no（始终隐藏滚动条）
iframe 在设置时尽量使用宽度以及高度 100%；控制其大小在父级div中控制宽度及高度；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layui</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<script src="layui/layui.js"></script>
</head>
<body>
<!--头部-->
<div style="height: 50px;line-height: 50px;background-color: #0C0C0C;padding: 0 10px">
<div style="color: #fff;float: left">
<span>layuiAdmin</span>
</div>
<div style="color: #fff;float: right">
<span style="margin-right: 10px"><i class="layui-icon layui-icon-username" style="margin-right: 5px"></i>admin</span>
<span><a style="color: #fff" href="">退出</a></span>
</div>
</div>
<!--头部结束-->
<!--右侧菜单-->
<div style="width: 10%;float: left">
<div class="layui-collapse" lay-accordion>
<div class="layui-colla-item">
<h2 class="layui-colla-title">用户管理</h2>
<div class="layui-colla-content">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">管理员管理</h2>
<div class="layui-colla-content">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">分类管理</h2>
<div class="layui-colla-content">内容区域</div>
</div>
</div>
</div>
<!--右侧菜单结束-->
<!--左侧内容区域-->
<div style="width: 90%;height: 820px;float: left">
<iframe style="width: 100%;height: 100%" src="cont.html" frameborder="0"></iframe>
</div>
<!--左侧内容区域结束-->
<script>
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
//…
});
</script>
</body>
</html>cont页面，终点在于开关，判断是否为开启或则为禁用状态，并且弹出询问框；
开关采用checkbox来实现其中调用layui定义好的lay-skin="switch" 其中在js部分实现监听switch来实现判断是否为true或false
监听switch 判断是否为true或false
if判断如果为true将弹出询问框 是否启用，取消将返回不变，点击启用将设置为false；
如果为false将弹出询问框 是否禁用，取消将返回不变，点击禁用将设置为true；
select 做了关联互动，其采用js select 监听，主要监听value值，在后期做后端后，通过监听获取value,json发送后台查询并且反馈前端显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<script type="text/javascript" src="./layui/layui.js"></script>
</head>
<body>
<div class="layui-card">
<div class="layui-card-header">用户注册</div>
<div class="layui-card-body">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="username">
</div>
<div class="layui-form-mid layui-word-aux">作为用户唯一登录名</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">昵称</label>
<div class="layui-input-inline">
<input type="password" class="layui-input" name="">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<select name="province" lay-filter="test">
<option value="">请选择城市</option>
<option value="0">山西省</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
<div class="layui-input-inline" name="city">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="1" title="男">
<input type="radio" name="sex" value="2" title="女" checked>
<input type="radio" name="sex" value="0" title="保密">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">兴趣爱好</label>
<div class="layui-input-block">
<input type="checkbox" name="like[music]" title="音乐">
<input type="checkbox" name="like[sports]" title="体育" checked>
<input type="checkbox" name="like[swimming]" title="游泳" checked>
<input type="checkbox" name="like[football]" title="足球">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">是否启用</label>
<div class="layui-input-inline">
<input type="checkbox" lay-filter="test1" lay-text="启用|禁用" name="switch" lay-skin="switch">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block" style="width: 400px">
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
layui.use(['form'],function () {
form = layui.form;
$ = layui.jquery;
form.on('select(test)', function(data){
console.log(data.value); //得到被选中的值
if (data.value==0){
//该处可以使用ajax 接口调用数据库数控
var citys = ['太原市','朔州市','大同市','阳泉市'];
//向html中插入select
var html = '<select>';
$.each(citys,function (i,v) {
html+=('<option>'+v+'</option>');
});
html += '</select>';
$('div[name="city"]').html(html);
form.render();
}
});
form.on('switch(test1)', function(data){
console.log(data.elem.checked); //开关是否开启，true或者false
//询问框判断是否开启
if (data.elem.checked==true){
layer.confirm('您确定要启用？', {
btn: ['启用','取消'] //按钮
}, function(){
layer.msg('启用成功', {icon: 1});
}, function(){
$(data.elem).prop('checked',false)
form.render();
});
}else {
layer.confirm('您确定要禁用？', {
btn: ['禁用','取消'] //按钮
}, function(){
layer.msg('禁用成功', {icon: 1});
}, function(){
$(data.elem).prop('checked',true)
form.render();
});
}
});
});
</script>
</body>
</html>layui 框架其中封装的方法几乎在日常开发中已经基本够用，其中可能涉及到特殊需求需要自己编写，一般情况采用layui即可实现；
在后端级前端开发中，重点主要在与js 因为涉及到需要与后端进行交互，html无法实现将采用js,其中如 表单验证；
提示框、询问框，都会涉及到js,layui中已经将常用方法进行封装，在更具需要编写对应代码方可实现；
如上代码中询问框。
首先实现询问框弹出；
在进行if判断，判断如果为true将实现对应提示，否则将执行什么；
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
