layui 使用
Posted youdream
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了layui 使用相关的知识，希望对你有一定的参考价值。
1.下载后解压如图
2.示例
home.thml代码
<!DOCTYPE html>
<html>
<!-- head -->
<head>
<meta charset="utf-8">
<title>首页</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 rel="stylesheet" href="../layui/css/layui.css" media="all">
<style>
.layadmin-tabsbody-item, [template] {
display: none;
}
.layui-show {
display: block!important;
}
html {
background-color: #f2f2f2;
color: #666;
}
</style>
</head>
<body class="layui-layout-body" cz-shortcut-listen="true">
<script type="text/javascript" src="../layui/layui.js" charset="utf-8"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<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="http://t.cn/RCzsdCq" class="layui-nav-img">
贤心
</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="">退了</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 href="javascript:;">列表一</a></dd>
<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="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">基本资料</a></dd>
<dd><a href="javascript:;">修改密码</a></dd>
</dl>
</li>
<li class="layui-nav-item" id="id1"><a href="javascript:;" id="id2" onclick="aClick()">云市场</a></li>
<li class="layui-nav-item"><a href="javascript:;">发布商品</a></li>
<li class="layui-nav-item">
<a href="javascript:;">设置</a>
<dl class="layui-nav-child">
<dd><a href="../html/">基本资料</a></dd>
<dd><a href="../html/editUserInfo.html">修改密码</a></dd>
</dl>
</li>
<li data-name="set" data-jump="" class="layui-nav-item">
<a href="javascript:;" lay-tips="设置" lay-direction="2">
<i class="layui-icon layui-icon-set"></i> <cite>设置1</cite> <span class="layui-nav-more"></span>
</a>
<dl class="layui-nav-child">
<dd data-name="system" data-jump="" class="">
<a href="javascript:;">系统设置<span class="layui-nav-more"></span></a>
<dl class="layui-nav-child">
<dd data-name="website" data-jump="" class=""> <a href="javascript:;" lay-href="set/system/website">网站设置</a></dd>
<dd data-name="email" data-jump="" class=""> <a href="javascript:;" lay-href="set/system/email">邮件服务</a></dd>
</dl>
</dd>
<dd data-name="user" data-jump="" class="">
<a href="javascript:;">我的设置<span class="layui-nav-more"></span></a>
<dl class="layui-nav-child">
<dd data-name="info" data-jump="" class="layui-this"> <a href="javascript:;" lay-href="../html">基本资料1</a></dd>
<dd data-name="password" data-jump="" class=""> <a href="javascript:;" lay-href="../html/editUserInfo.html">修改密码</a> </dd>
</dl>
</dd>
</dl>
</li>
</ul>
</div>
</div>
<!-- 内容 -->
<div class="layui-body" style="top: 50px;">
<!-- 内容主体区域 style="padding: 150px;"-->
<div class="layadmin-tabsbody-item layui-show">
<div class="layui-fluid" style="padding: 35px;">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">设置我的资料</div>
<div class="layui-card-body" pad15>
<div class="layui-form" lay-filter>
<div class="layui-form-item">
<label class="layui-form-label">我的角色</label>
<div class="layui-input-inline">
<select name="role" lay-verify="">
<option value="1" selected="">超级管理员</option>
<option value="2" disabled="">普通管理员</option>
<option value="3" disabled="">审核员</option>
<option value="4" disabled="">编辑人员</option>
</select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="超级管理员" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="1" class="layui-this">超级管理员</dd><dd lay-value="2" class=" layui-disabled">普通管理员</dd><dd lay-value="3" class=" layui-disabled">审核员</dd><dd lay-value="4" class=" layui-disabled">编辑人员</dd></dl></div>
</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="text" name="username" value="xianxin" readonly="" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">不可修改。一般用于后台登入名</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea name="remarks" 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="setmyinfo">确认修改</button>
<button type="reset" class="layui-btn layui-btn-primary">重新填写</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- fotter -->
<div class="layui-footer">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
</div>
</div>
<script>
$(function() {// 初始化内容
//debugger;
$("#id2").trigger("click");
});
layui.use([\'laydate\', \'laypage\', \'layer\', \'table\', \'carousel\', \'upload\', \'element\'], function(){
var laydate = layui.laydate //日期
,laypage = layui.laypage //分页
layer = layui.layer //弹层
,table = layui.table //表格
,carousel = layui.carousel //轮播
,upload = layui.upload //上传
,element = layui.element; //元素操作
//向世界问个好
//layer.msg(\'Hello World\');
//监听Tab切换
element.on(\'nav(test)\', function(data){
debugger;
layer.msg(\'切换了：\'+ this.innerHTML);
//var tt = this.getAttribute("id");
//layer.msg(tt);
console.log(data);
});
});
function aClick () {
alert(1);
//layer.msg(\'切换了：\'+ this.innerHTML);
}
</script>
<!-- 尾部 -->
</body>
</html>
登录页login.html
<!DOCTYPE html>
<html>
<!-- head -->
<head>
<meta charset="utf-8">
<title>登录页</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 rel="stylesheet" href="../layui/css/layui.css" media="all">
<link rel="stylesheet" href="../layui/login.css" media="all">
<link rel="stylesheet" href="../layui/admin.css" media="all">
<style>
body{margin: 10px;}
.demo-carousel{height: 200px; line-height: 200px; text-align: center;}
</style>
</head>
<body cz-shortcut-listen="true" class="layui-layout-body">
<div id="LAY_app" class="layadmin-tabspage-none">
<script type="text/javascript" src="../layui/layui.js" charset="utf-8"></script>
<!--<script type="text/html" template=""><link rel="stylesheet" href="{{ layui.setter.base }}style/login.css?v={{ layui.admin.v }}-1" media="all"></script>
<link rel="stylesheet" href="./dist/style/login.css?v=1.0.0-beta9 pro-1" media="all"> <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
-->
<div class="layadmin-user-login-main">
<div class="layadmin-user-login-box layadmin-user-login-header">
<h2>layuiAdmin</h2>
<p>layui 官方出品的单页面后台管理模板系统</p>
</div>
<div class="layadmin-user-login-box layadmin-user-login-body layui-form">
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
<input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="用户名" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
<input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input">
</div>
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs7">
<label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>
<input type="text" name="vercode" id="LAY-user-login-vercode" lay-verify="required" placeholder="图形验证码" class="layui-input">
</div>
<div class="layui-col-xs5">
<div style="margin-left: 10px;">
<img src="https://www.oschina.net/action/user/captcha" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">
</div>
</div>
</div>
</div>
<div class="layui-form-item" style="margin-bottom: 20px;">
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>记住密码</span><i class="layui-icon"></i></div>
<a lay-href="/user/forget" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="LAY-user-login-submit">登 入</button>
</div>
<div class="layui-trans layui-form-item layadmin-user-login-other">
<label>社交账号登入</label>
<a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>
<a lay-href="/user/reg" class="layadmin-user-jump-change layadmin-link">注册帐号</a>
</div>
</div>
</div>
<div class="layui-trans layadmin-user-login-footer">
<p>© 2018 <a href="http://www.njxzc.edu.cn/" target="_blank">南京晓庄学院</a></p>
<p>
<span><a href="http://www.baidu.com" target="_blank">获取授权</a></span>
<span><a href="http://www.baidu.com" target="_blank">在线演示</a></span>
<span><a href="http://www.baidu.com" target="_blank">前往官网</a></span>
</p>
</div>
<!--<div class="ladmin-user-login-theme">
<script type="text/html" template>
<ul>
<li data-theme=""><img src="{{ layui.setter.base }}style/res/bg-none.jpg"></li>
<li data-theme="#03152A" style="background-color: #03152A;"></li>
<li data-theme="#2E241B" style="background-color: #2E241B;"></li>
<li data-theme="#50314F" style="background-color: #50314F;"></li>
<li data-theme="#344058" style="background-color: #344058;"></li>
<li data-theme="#20222A" style="background-color: #20222A;"></li>
</ul>
</script>
</div>-->
</div><script>
layui.use([\'admin\', \'form\', \'user\'], function(){
var $ = layui.$
,setter = layui.setter
,admin = layui.admin
,form = layui.form
,router = layui.router()
,search = router.search;
form.render();
//提交
form.on(\'submit(LAY-user-login-submit)\', function(obj){
//请求登入接口
admin.req({
url: \'./json/user/login.js\' //实际使用请改成服务端真实接口
,data: obj.field
,done: function(res){
//请求成功后，写入 access_token
layui.data(setter.tableName, {
key: setter.request.tokenName
,value: res.data.access_token
});
//登入成功的提示与跳转
layer.msg(\'登入成功\', {
offset: \'15px\'
,icon: 1
,time: 1000
}, function(){
location.hash = search.redirect ? decodeURIComponent(search.redirect) : \'/\';
});
}
});
});
//实际使用时记得删除该代码
layer.msg(\'为了方便演示，用户名密码可随意输入\', {
offset: \'15px\'
,icon: 1
});
});
</script></div>
<!-- <script src="//res.layui.com/layui/rc/layui.js?t=20180403-1"></script> -->
<script>
layui.config({
base: \'./dist/\' //指定 layuiAdmin 项目路径
,version: \'1.0.0-beta9-1\'
}).use(\'index\', function(){
var layer = layui.layer, admin = layui.admin;
layer.ready(function(){
admin.popup({
content: \'单页面专业版默认未开启“多标签”功能，实际运用时，你可以自定义是否开启\'
,area: \'300px\'
,btnAlign: \'c\'
,shade: false
});
});
});
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id=\'cnzz_stat_icon_30088308\'%3E%3C/span%3E%3Cscript src=\'" + cnzz_protocol + "w.cnzz.com/c.php%3Fid%3D30088308\' type=\'text/javascript\'%3E%3C/script%3E"));</script><span id="cnzz_stat_icon_30088308"></span><script src=" http://w.cnzz.com/c.php?id=30088308" type="text/javascript"></script>
<div class="layui-layer-move"></div>
</body>
</html>
editUserInfo.html
<!DOCTYPE html> <html> <!-- head --> <head> <meta charset="utf-8"> <title>修改密码</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 rel="stylesheet" href="../layui/css/layui.css" media="all"> <style> .layadmin-tabsbody-item, [template] { display: none; } .layui-show { display: block!important; } html { background-color: #f2f2f2; color: #666; } </style> </head> <body class="layui-layout-body" cz-shortcut-listen="true"> <script type="text/javascript" src="../layui/layui.js" charset="utf-8"></script> <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="http://t.cn/RCzsdCq" class="layui-nav-img"> 贤心 </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="">退了</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 href="javascript:;">列表一</a></dd> <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="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> <li class="layui-nav-item"> <a href="javascript:;">设置</a> <dl class="layui-nav-child"> <dd><a href="../html/">基本资料</a></dd> <dd><a href="../html/editUserInfo.html">修改密码</a></dd> </dl> </li> <li data-name="set" data-jump="" class="layui-nav-item"> <a href="javascript:;" lay-tips="设置" lay-direction="2"> <i class="layui-icon layui-icon-set"></i> <cite>设置1</cite> <span class="layui-nav-more"></span> </a> <dl class="layui-nav-child"> <dd data-name="system" data-jump="" class=""> <a href="javascript:;">系统设置<span class="layui-nav-more"></span></a> <dl class="layui-nav-child"> <dd data-name="website" data-jump="" class=""> <a href="javascript:;" lay-href="set/system/website">网站设置</a></dd> <dd data-name="email" data-jump="" class=""> <a href="javascript:;" lay-href="set/system/email">邮件服务</a></dd> </dl> </dd> <dd data-name="user" data-jump="" class=""> <a href="javascript:;">我的设置<span class="layui-nav-more"></span></a> <dl class="layui-nav-child"> <dd data-name="info" data-jump="" class="layui-this"> <a href="javascript:;" lay-href="set/user/info">基本资料</a></dd> <dd data-name="password" data-jump="" class=""> <a href="javascript:;" lay-href="set/user/password">修改密码</a> </dd> </dl> </dd> </dl> </li> </ul> </div> </div> <!-- 内容 --> <div class="layui-body" style="top: 50px;"> <!-- 内容主体区域 style="padding: 150px;"--> <div class="layadmin-tabsbody-item layui-show"> <div class="layui-fluid" style="padding: 35px;"> <div class="layui-row layui-col-space15"> <div class="layui-col-md12"> layui的table使用