使⽤Layui框架，做的界⾯效果及经验教训总结（mvc5+EF+layui）1. 登录界⾯
login.css
body,
html {
height: 100%;
}
.layui-admin-login-header {
padding: 20px;
text-align: center;
}
.layui-admin-login-header h1 {
color: #009688;
font-family: "Helvetica Neue, Helvetica, PingFang SC, 微软雅⿊, Tahoma, Arial, sans-serif";
font-weight: bold;
margin-bottom: 10px;
}
.layui-admin-login-header p {
color: white;
font-family: "Helvetica Neue, Helvetica, PingFang SC, 微软雅⿊, Tahoma, Arial, sans-serif";
font-weight: bold;
margin-bottom: 10px;
}
.layui-admin-login {
width: 24%;
margin: 0 auto;
position: absolute;
top: 20%;
left: 37%;
box-shadow: 0 -15px 30px #0d957a;
border-radius: 5px;
padding: 2%;
z-index: 1000;
}
.layui-admin-login .layui-footer {
color: white;
}
.layui-admin-login .layui-form-checkbox {
margin-left: 0px;
}
/
*chrome浏览器透明有点问题*/
.layui-form label, input {
background-color: transparent !important;
color: white !important;
}
login.cshtml页⾯
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="~/Content/layui-v2.5.6/css/layui.css" rel="stylesheet" />
<link href="~/Content/layui-v2.5.6/css/login.css" rel="stylesheet" />
</head>
<body class="layui-layout-body" >
<div class="layui-fluid" >
<canvas id="particle"></canvas>
<br />
<div class="layui-form layui-form-pane layui-admin-login">
<div class="layui-admin-login-header">
<h1>登陆</h1>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
<div class="layui-input-block">
<input required lay-verify="required" name="txtName" class="layui-input" type="text" placeholder="请输⼊账号" autocomplete="off" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
<div class="layui-input-block">
<input required lay-verify="required" name="txtPwd" class="layui-input" type="password" placeholder="请输⼊密码" autocomplete="off" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="loginxxx"> <i class="layui-icon layui-icon-ok-circle"></i>登陆
</button>
</div>
</div>
</div>
</div>
<script src="~/Content/layui-v2.5.6/layui.js"></script>
<script>
// 登录需要做表单提交给后台，或者数据收集之后提交给后台
layui.use(['layer', 'form','jquery'], function () {
var layer = layui.layer;
var form = layui.form,
$ = layui.jquery;
<("submit(loginxxx)", function (obj) {
var user = obj.field;
$.ajax({
type: 'Get',
data: user,
url: '/Student2/CheckLogin',
success: function (result) {
var serverData = result.split(':');
if (serverData[0] == "ok") {
window.location.href = "/Student2/Index";
} else if (serverData[0] == "error") {
layer.msg(serverData[1], { icon: 2 });
}
else {
layer.msg("操作失败", { icon: 2 });
}
}
})
})
})
</script>
</body>
</html>
2. 导航界⾯
index.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台⼤布局 - Layui</title>
<link href="~/Content/layui-v2.5.6/css/layui.css" rel="stylesheet" />
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 头部区域（可配合layui已有的⽔平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">⽤户</a></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>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="t/RCzsdCq" class="layui-nav-img">
@Model.Name
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="~/Student2/LogOut">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">所有商品</a>
<dl class="layui-nav-child">
<dd><a class="site-active" tab-name="学⽣列表A" tab-url="/Student2/Student2Tab" tab-layid="11">学⽣列表A</a></dd>
<dd><a class="site-active" tab-name="学⽣列表B" tab-url="/Student2/Student2Tab" tab-layid="22">学⽣列表B</a></dd>
<dd><a class="site-active" tab-name="学⽣列表C" tab-url="/Student2/Student2Tab" tab-layid="33">
学⽣列表C</a></dd>
<dd><a class="site-active" tab-name="学⽣列表D" tab-url="/Student2/Student2Tab" tab-layid="44">学⽣列表D</a></dd>
<dd><a class="site-active" tab-name="学⽣列表E" tab-url="/Student2/Student2Tab" tab-layid="55">学⽣列表E</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决⽅案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表⼀</a></dd>
<dd><a href="javascript:;">列表⼆</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>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div layui-body >
<div class="layui-tab" lay-allowClose="true" lay-filter="tabList">
<ul class="layui-tab-title">
</ul>
<div class="layui-tab-content">
</div>
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© layui - 底部固定区域
</div>
</div>
<script src="~/Content/layui-v2.5.6/layui.js"></script>
<script>
//JavaScript代码区域
layui.use(['element','jquery'], function () {
var element = layui.element,
$ = layui.jquery;
//触发事件
var active = {
tabAdd:function (name,url,layid) {
element.tabAdd('tabList', {
title: name //'选项卡的标题'
,content: '<iframe id="iframeMain" ; height="100%" ; scrolling="no" frameborder="no" src="'+url+'"></iframe>'//'选项卡的内容' //⽀持传⼊html ,id: layid//'选项卡标题的lay-id属性值'
});
},
tabChange:function (layid) {
element.tabChange('tabList', layid);
},
tabDelete:function (layid) {
element.tabDelete('tabList', layid);
}
}
//当点击有siteactive属性的标签时，即左侧菜单栏中内容，触发点击事件
$('.site-active').on("click", function () {
var dataid = $(this);
var name = dataid.attr("tab-name");
var url = dataid.attr("tab-url");
var tab_layid = dataid.attr("tab-layid");
//1、判断tab-layid=layid的tab页是否打开
if ($(".layui-tab-title li[lay-id]").length <= 0) { //1.1 初始状态：1个Tab页也没有打开
active.tabAdd(name, url, tab_layid); //打开tab页
active.tabChange(tab_layid)//转到该tab页
} else { //1.2 判断该Tab页是否已打开
var isData = false; //初始化⼀个标志，为false说明未打开该tab项为true则说明已有
$.each($(".layui-tab-title li[lay-id]"), function () {
//如果点击左侧菜单栏所传⼊的id 在右侧tab项中的lay-id属性可以到，则说明该tab项已经打开
if ($(this).attr("lay-id") == tab_layid) {
isData = true;
}
})
if (isData == false) {
//标志为false 新增⼀个tab项
active.tabAdd(name, url, tab_layid); //1.2.1 该Tab页未打开，则打开该tab页
}
active.tabChange(tab_layid)//1.2.2 转到该tab页
}
FrameWH(); //计算ifram层的⼤⼩
});
function FrameWH() { //计算ifram层的⼤⼩
var h = $(window).height() - 41 - 10 - 60 - 10 - 44 - 10;
$("iframe").css("height", h + "px");
}
$(window).resize(function () {
FrameWH();
})
});
</script>
</body>
</html>
3. 内容页⾯
3.1 查询
Student2Tab.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="~/Content/layui-v2.5.6/css/layui.css" rel="stylesheet" />
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-btn-group">
@*<button type="button" class="layui-btn" id="addBtn">新增学⽣</button>*@
@*<button type="button" class="layui-btn">编辑</button>
<button type="button" class="layui-btn">删除</button>*@
</div>
<div class="demoTable">
搜索学号：
<div class="layui-inline">
<input class="layui-input" name="id" id="id" lay-verify="number" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload" id="searchBtn">搜索</button>
<button type="button" class="layui-btn" id="addBtn">新增学⽣</button>
</div>
<table class="layui-hide" id="test" lay-filter="testFilter"></table>
@*⼯具栏模板：
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
<button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
</div>
</script>*@
下述是 toolbar 对应的模板，它可以存放在页⾯的任意位置
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="~/Content/layui-v2.5.6/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
function showTime(tempDate) {
var date = place(/[^0-9]/ig, "");
var d = new Date(parseInt(date));
var year = d.getFullYear();
var month = d.getMonth(); month++; month = month < 10 ? "0" + month : month;
var day = d.getDate(); day = day < 10 ? "0" + day : day;
var time = year + "-" + month + "-" + day;
return time;
}
layui.use('table', function () {
var table = layui.table,
$ = layui.$;
var tableIns = der({
elem: '#test'
,
id: 'testReload'
, toolbar: 'default' //开启⼯具栏，此处显⽰默认图标，可以⾃定义模板，详见⽂档
, url: '/Student2/Student2List'
jquery框架定义, cellMinWidth: 80 //全局定义常规单元格的最⼩宽度，layui 2.2.1 新增
, even: true //开启隔⾏背景
, cols: [[
{ type: 'checkbox' }
, { field: 'Id', width: 80, title: 'Id' }
, { field: 'StuNo', width: 80, title: '学号' }
, { field: 'Name', width: 80, title: '姓名' }
, { field: 'Pwd', width: 80, title: '密码', sort: true }
,
{ field: 'Sex', title: '性别', width: 80 } //minWidth：局部定义当前单元格的最⼩宽度，layui 2.2.1 新增
, { field: 'BrithDate', title: '出⽣⽇期', templet: function (d) { return showTime(d.BrithDate) }, width: 180, sort: true }
, { field: 'Address', width: 150, title: '家庭地址', sort: true }
, { fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo' } //这⾥的toolbar值是模板元素的选择器
]]
,where: { //设定异步数据接⼝的额外参数，任意设
id:$("#id").val()
//…
}
, page: {
curr: 1 //重新从第 1 页开始
}
});
//监听头⼯具栏事件
<('toolbar(testFilter)', function (obj) {
var checkStatus = table.fig.id)
, data = checkStatus.data; //获取选中的数据
switch (obj.event) {
case 'add':
layer.msg('添加');
layer.open({
type: 2,
title: "新增⽤户",
area: ["700px", "450px"],
content: '/Student2/Add',
end: function () {
}
});
break;
case 'update':
if (data.length === 0) {
layer.msg('请选择⼀⾏');
} else if (data.length > 1) {
layer.msg('只能同时编辑⼀个');
} else {
layer.alert('编辑 [id]：' + checkStatus.data[0].id);
}
break;
case 'delete':
if (data.length === 0) {
layer.msg('请选择⼀⾏');
} else {
layer.msg('删除');
}
break;
};
});
//监听⾏⼯具事件
<('tool(testFilter)', function (obj) { //注：tool 是⼯具条事件名，testFilter 是 table 原始容器的属性 lay-filter="对应的值"
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论