thinkphp3使用layui自定义后台
文章描述:
thinkphp3使用layui自定义后台,thinkphp3自定义后台可以是用layout和使用引入模板两种方式,下面给大家讲到的是引入模板方式
后台首页
<!DOCTYPE html>
<html>
<head>
<include file="Public/meta" />
</head>
<body>
<div class="container">
<include file="Public/left" />
<div class="right_content">
<include file="Public/top" />
<div class="right_content_main">
<div class="welcome padding_20">
<blockquote class="layui-elem-quote">{$username}欢迎您!</blockquote>
</div>
</div>
</div>
</div>
<include file="Public/foot" />
</body>
</html>
META
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>后台管理</title>
<link rel="stylesheet" type="text/css" href="__BOOTSTRAP__/3.3.7/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="__LAYUI__/css/layui.css" />
<link rel="stylesheet" type="text/css" href="__ADMIN__/css/admin.css" />
<script src="__JS__/jquery-2.1.1.min.js"></script>
<script src="__BOOTSTRAP__/js/bootstrap.min.js"></script>
<script src="__LAYER__/layer.js"></script>
<script src="__LAYUI__/layui.js"></script>
左侧菜单
<div class="left_content">
<div class="login text_center "> <a class="display_inline_block" href="{:U('/admin/index/index')}">后台管理系统</a> <span class="display_inline_block">V0.0.1</span> </div>
<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px; margin-top: 10px">
<li class="layui-nav-item {if condition="$left_menu eq 1"}layui-nav-itemed{/if}"> <a href="javascript:;"><i class="iconfont icon-neirong"></i> 栏目内容</a>
<dl class="layui-nav-child">
<dd><a href="{:U('category/index')}">栏目管理</a></dd>
<dd><a href="{:U('content/index')}">文档管理</a></dd>
</dl>
</li>
<li class="layui-nav-item {if condition="$left_menu eq 2"}layui-nav-itemed{/if}"> <a href="javascript:;"><i class="iconfont icon-tupian"></i> 权限管理</a>
<dl class="layui-nav-child">
<dd><a href="{:U('manage/index')}">用户管理</a></dd>
<dd><a href="{:U('role/index')}">角色管理</a></dd>
<dd><a href="{:U('auth/index')}">权限管理</a></dd>
</dl>
</li>
<li class="layui-nav-item {if condition="$left_menu eq 3"}layui-nav-itemed{/if}"> <a href="javascript:;"><i class="iconfont icon-shezhi"></i> 系统管理</a>
<dl class="layui-nav-child">
<dd><a href="{:U('config/index')}">系统参数</a></dd>
<dd><a href="{:U('flink/index')}">友情链接</a></dd>
<dd><a href="{:U('config/del_cache')}">清空缓存</a></dd>
<dd><a href="{:U('config/edit_password')}">修改密码</a></dd>
</dl>
</li>
</ul>
</div>
顶部
<div class="right_content_top" style="display: none;">
<a href="#">联系QQ:123456</a>
<a href="/" target="_blank">网站首页</a>
<a href="{:U('Login/logout')}">退出登录</a>
</div>
<div class="header">
<div class="datetime"><span class="today_datetime" id="current-time"></span></div>
<div class="logout"><span>admin<a href="{:U('Login/logout')}" class="loginout"><img src="__ADMIN__images/exit.png"></a></span></div>
</div>
尾部
<script>
layui.use('element', function () {
var element = layui.element; //导航的hover效果、二级菜单等功能,需要依赖element模
});
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
<script>
/*-删除时候确认*/
function public_del(url) {
layui.use('layer',
function() {
var layer = layui.layer;
layer.confirm('确认要删除吗?',
function(index) {
window.location.href = url;
});
});
}
</script>
<script>
//头部时间
setInterval(function() {
var now = (new Date()).toLocaleString();
$('#current-time').text(now);
}, 1000);
</script>
发布时间:2021/08/10
发表评论