Appearance
3、整合前端基础交互页面
1、整合LayUI
下载：https://gitee.com/layui/layui/attach_files/2054722/download
1、成功引入LayUI后新建index.html
框架布局：https://layui.dev/docs/2/layout/
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layout22222222</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">
<!-- 引入 layui.css -->
<link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>
<li class="layui-nav-item">
<a href="javascript:;">nav groups</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">menu 11</a></dd>
<dd><a href="javascript:;">menu 22</a></dd>
<dd><a href="javascript:;">menu 33</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
<a href="javascript:;">
<img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">Your Profile</a></dd>
<dd><a href="javascript:;">Settings</a></dd>
<dd><a href="javascript:;">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</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:;">menu group 1</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">menu 1</a></dd>
<dd><a href="javascript:;">menu 2</a></dd>
<dd><a href="javascript:;">menu 3</a></dd>
<dd><a href="javascript:;">the links</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">menu group 2</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">list 1</a></dd>
<dd><a href="javascript:;">list 2</a></dd>
<dd><a href="javascript:;">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
<li class="layui-nav-item"><a href="javascript:;">the links</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<blockquote class="layui-elem-quote layui-text">
Layui 框体布局内容主体区域
</blockquote>
<div class="layui-card layui-panel">
<div class="layui-card-header">
下面是充数内容，为的是出现滚动条
</div>
<div class="layui-card-body">
充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>你还真滑到了底部呀
</div>
</div>
<br><br>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
底部固定区域
</div>
</div>
<!-- 引入 layui.js -->
<script src="/layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element;
var layer = layui.layer;
var util = layui.util;
var $ = layui.$;
//头部事件
util.event('lay-header-event', {
menuLeft: function(othis){ // 左侧菜单事件
layer.msg('展开左侧菜单的操作', {icon: 0});
},
menuRight: function(){ // 右侧菜单事件
layer.open({
type: 1,
title: '更多',
content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
area: ['260px', '100%'],
offset: 'rt', // 右上角
anim: 'slideLeft', // 从右侧抽屉滑出
shadeClose: true,
scrollbar: false
});
}
});
});
</script>
</body>
</html>2、layui常用
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.html-test</title>
<!-- 引入 layui.css -->
<link href="/layui/css/layui.css" rel="stylesheet">
<!-- 引入 layui.js -->
<script src="/layui/layui.js"></script>
</head>
<body>
<button style="background: orange;width: 80px">提交</button>
<br><hr>
<button type="button" class="layui-btn layui-bg-purple">紫色按钮</button>
<br><hr>
<button class="layui-btn" lay-on="e1">事件 1</button>
<script>
layui.use('util', function(){
var util = layui.util;
util.on('lay-on',{
e1: function(){
console.log(this); // 当前触发事件的 DOM 元素
layer.alert('-----1111');
layer.msg('触发了事件 1');
alert("---study");
}
});
});
</script>
</body>
</html>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2.html-test</title>
<!-- 引入 layui.css -->
<link href="/layui/css/layui.css" rel="stylesheet">
<!-- 引入 layui.js -->
<script src="/layui/layui.js"></script>
</head>
<body>
<div class="layui-btn-container">
<button class="layui-btn" lay-on="e1">事件 1</button>
<button class="layui-btn" lay-on="e2">事件 2</button>
<button class="layui-btn" lay-active="e3">事件 3</button>
</div>
<script>
layui.use('util', function(){
var util = layui.util;
// 2.9+ 版本可省略 attr 参数，默认读取 lay-on
util.on('lay-on',{
e1: function(){
console.log(this); // 当前触发事件的 DOM 元素
layer.alert('-----1111');
layer.msg('触发了事件 1');
},
e2: function(){
layer.msg('触发了事件 2');
}
});
// 自定义：触发事件的元素属性名、触发事件的方式
util.on('lay-active', {
e3: layui.throttle(function(othis) {
console.log(this);
layer.tips(othis.html(), this);
}, 3000) // 3s 内不重复执行
}, {
trigger: 'mouseenter' // 鼠标移入时触发事件
});
});
</script>
</body>
</html>3、修改基本盘页面 大体view
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小薛博客LLM大模型实战</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">
<link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">小薛博客LLM大模型实战</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">ChatGPT</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">通义千问</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">文心一言</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">科大讯飞</a></li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
<a href="javascript:;">
<img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">Your Profile</a></dd>
<dd><a href="javascript:;">Settings</a></dd>
<dd><a href="javascript:;">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</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:;">AI功能集</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"><a href="javascript:;">吹牛灌水</a></li>
<li class="layui-nav-item"><a href="javascript:;">关于我们</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<blockquote class="layui-elem-quote layui-text">
Layui 框体布局内容主体区域
</blockquote>
<div class="layui-card layui-panel">
<div class="layui-card-header">
下面是充数内容，为的是出现滚动条
</div>
<div class="layui-card-body">
充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>你还真滑到了底部呀
</div>
</div>
<br><br>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
底部固定区域
</div>
</div>
<script src="/layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element;
var layer = layui.layer;
var util = layui.util;
var $ = layui.$;
//头部事件
util.event('lay-header-event', {
menuLeft: function(othis){ // 左侧菜单事件
layer.msg('展开左侧菜单的操作', {icon: 0});
},
menuRight: function(){ // 右侧菜单事件
layer.open({
type: 1,
title: '更多',
content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
area: ['260px', '100%'],
offset: 'rt', // 右上角
anim: 'slideLeft', // 从右侧抽屉滑出
shadeClose: true,
scrollbar: false
});
}
});
});
</script>
</body>
</html>4、提问输入框+按钮
html
<div id="footer-chat" class="layui-footer" style="height: 80px;line-height: 80px;">
<!-- 底部固定区域 -->
<div style="width: 80%;">
<div class="layui-input-group" style="width: 100%;">
<input type="text" id="question-input" style="margin-top: 20px;margin-left: 120px;" placeholder="输入问题..."
class="layui-input">
<div class="layui-input-suffix">
<button type="button" id="question-send" style="margin-left: 80px;" lay-on="question-send"
class="layui-btn layui-btn-radius">发送
</button>
</div>
</div>
</div>
</div>html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小薛博客LLM大模型实战</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">
<link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">小薛博客LLM大模型实战</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">ChatGPT</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">通义千问</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">文心一言</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">科大讯飞</a></li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
<a href="javascript:;">
<img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">Your Profile</a></dd>
<dd><a href="javascript:;">Settings</a></dd>
<dd><a href="javascript:;">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</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:;">AI功能集</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"><a href="javascript:;">吹牛灌水</a></li>
<li class="layui-nav-item"><a href="javascript:;">关于我们</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<div class="layui-card layui-panel">
<div class="layui-card-header layui-font-16">
主人提出的问题1
</div>
<div class="layui-card-body">
充数内容<br>你还真滑到了底部呀
</div>
</div>
<div class="layui-card layui-panel">
<div class="layui-card-header layui-font-16">
主人提出的问题2
</div>
<div class="layui-card-body">
充数内容<br>你还真滑到了底部呀
</div>
</div>
</div>
</div>
<div id="footer-chat" class="layui-footer" style="height: 80px;line-height: 80px;">
<!-- 底部固定区域 -->
<div style="width: 80%;">
<div class="layui-input-group" style="width: 100%;">
<input type="text" id="question-input" style="margin-top: 20px;margin-left: 120px;" placeholder="输入问题..."
class="layui-input">
<div class="layui-input-suffix">
<button type="button" id="question-send" style="margin-left: 80px;" lay-on="question-send"
class="layui-btn layui-btn-radius">发送
</button>
</div>
</div>
</div>
</div>
</div>
<script src="/layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element;
var layer = layui.layer;
var util = layui.util;
var $ = layui.$;
//头部事件
util.event('lay-header-event', {
menuLeft: function(othis){ // 左侧菜单事件
layer.msg('展开左侧菜单的操作', {icon: 0});
},
menuRight: function(){ // 右侧菜单事件
layer.open({
type: 1,
title: '更多',
content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
area: ['260px', '100%'],
offset: 'rt', // 右上角
anim: 'slideLeft', // 从右侧抽屉滑出
shadeClose: true,
scrollbar: false
});
}
});
});
</script>
</body>
</html>5、左侧【话题讨论】变动页面演示
1、头部区域，推荐和最新
html
<ul id="discuss-nav" class="layui-nav layui-layout-left" style="display: none">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">推荐</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">最新</a></li>
</ul>2、话题讨论添加js点击事件隐藏
html
<!--222222-->
<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:;">AI功能集</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" lay-on="chat-nav-show">对话问答(文生文)</a></dd>
<dd><a href="javascript:;" lay-on="draw-nav-show">对话问图(文生图)</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-on="discuss-nav-show"><a href="javascript:;">话题讨论</a></li>
<li class="layui-nav-item"><a href="javascript:;">关于我们</a></li>
</ul>
</div>
</div>html
<!-- 前端模板如下: -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小薛博客LLM大模型实战</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">
<!-- 引入 layui.css -->
<link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">小薛博客LLM大模型实战</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul id="chat-nav" class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">ChatGPT</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">通义千问</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">文心一言</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">科大讯飞</a></li>
</ul>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul id="discuss-nav" class="layui-nav layui-layout-left" style="display: none">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">推荐</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">最新</a></li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
<a href="javascript:;">
<img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">Your Profile</a></dd>
<dd><a href="javascript:;">Settings</a></dd>
<dd><a href="javascript:;">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</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:;">AI功能集</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" lay-on="chat-nav-show">对话问答(文生文)</a></dd>
<dd><a href="javascript:;" lay-on="draw-nav-show">对话问图(文生图)</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-on="discuss-nav-show"><a href="javascript:;">话题讨论</a></li>
<li class="layui-nav-item"><a href="javascript:;">关于我们</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<div class="layui-card layui-panel">
<div class="layui-card-header layui-font-16">
主人提出的问题1
</div>
<div class="layui-card-body">
充数内容<br>你还真滑到了底部呀
</div>
</div>
<div class="layui-card layui-panel">
<div class="layui-card-header layui-font-16">
主人提出的问题2
</div>
<div class="layui-card-body">
充数内容<br>你还真滑到了底部呀
</div>
</div>
</div>
</div>
<div id="footer-chat" class="layui-footer" style="height: 80px;line-height: 80px;">
<!-- 底部固定区域 -->
<div style="width: 80%;">
<div class="layui-input-group" style="width: 100%;">
<input type="text" id="question-input" style="margin-top: 20px;margin-left: 120px;" placeholder="输入问题..."
class="layui-input">
<div class="layui-input-suffix">
<button type="button" id="question-send" style="margin-left: 80px;" lay-on="question-send"
class="layui-btn layui-btn-radius">发送
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 引入 layui.js -->
<script src="/layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element;
var layer = layui.layer;
var util = layui.util;
//var $ = layui.$;
var jQuery = layui.$;
util.on('lay-on',{
//话题讨论
'discuss-nav-show':function () {
jQuery("#discuss-nav").show();
jQuery("#chat-nav").hide();
},
//对话问答(文生文)
'chat-nav-show':function () {
jQuery("#discuss-nav").hide();
jQuery("#chat-nav").show();
},
//对话问图(文生图)
'draw-nav-show':function () {
jQuery("#discuss-nav").hide();
jQuery("#chat-nav").show();
},
});
//头部事件
util.event('lay-header-event', {
menuLeft: function(othis){ // 左侧菜单事件
layer.msg('展开左侧菜单的操作', {icon: 0});
},
menuRight: function(){ // 右侧菜单事件
layer.open({
type: 1,
title: '更多',
content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
area: ['260px', '100%'],
offset: 'rt', // 右上角
anim: 'slideLeft', // 从右侧抽屉滑出
shadeClose: true,
scrollbar: false
});
}
});
});
</script>
</body>
</html>6、完善对话(文生文)和绘图(文生图)标签页
1、头部区域，文生文-点击切换功能实现
添加lay-on和lay-data
js
//给lay-on="nav-change-content"添加函数说明,头部从左到右根据标签页切换显示不同的内容
'nav-change-content':function (e) {
var showDivId = jQuery(e).attr("lay-data");
jQuery("#" + showDivId).show(); // 显示自己的内容
jQuery("#" + showDivId).siblings().hide(); // 隐藏所有同级 div 的内容
},2、头部区域，文生图-点击切换功能实现
html
<ul id="draw-nav" class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-tongyi-content"><a href="javascript:;">通义千问</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-wenxin-content"><a href="javascript:;">文心一言</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-xunfei-content"><a href="javascript:;">科大讯飞</a></li>
</ul>html
<!-- 前端模板如下: -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小薛博客LLM大模型实战</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">
<!-- 引入 layui.css -->
<link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<!--111111-->
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">小薛博客LLM大模型实战</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul id="chat-nav" class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-tongyi-content"><a href="javascript:;">通义千问</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-wenxin-content"><a href="javascript:;">文心一言</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-xunfei-content"><a href="javascript:;">科大讯飞</a></li>
</ul>
<ul id="draw-nav" class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-tongyi-content"><a href="javascript:;">通义千问</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-wenxin-content"><a href="javascript:;">文心一言</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-xunfei-content"><a href="javascript:;">科大讯飞</a></li>
</ul>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul id="discuss-nav" class="layui-nav layui-layout-left" style="display: none">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">推荐</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">最新</a></li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
<a href="javascript:;">
<img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">Your Profile</a></dd>
<dd><a href="javascript:;">Settings</a></dd>
<dd><a href="javascript:;">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical">xxxxtest</i>
</a>
</li>
</ul>
</div>
<!--2222222-->
<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:;">AI功能集</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" lay-on="chat-nav-show">对话问答(文生文)</a></dd>
<dd><a href="javascript:;" lay-on="draw-nav-show">对话问图(文生图)</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-on="discuss-nav-show"><a href="javascript:;">话题讨论</a></li>
<li class="layui-nav-item"><a href="javascript:;">关于我们</a></li>
</ul>
</div>
</div>
<!--3333333-->
<div class="layui-body">
<!-- 内容主体区域 -->
<div>
<div style="padding: 15px;">
<div id="chat-chatgpt-content" class="layui-card layui-panel">
<div class="layui-card-header layui-font-16">
ChatGPT提出的问题1
</div>
<div class="layui-card-body">
ChatGPT回答的问题
</div>
</div>
<div id="chat-tongyi-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
tongyi提出的问题1
</div>
<div class="layui-card-body">
tongyi回答的问题
</div>
</div>
<div id="chat-wenxin-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
wenxin提出的问题1
</div>
<div class="layui-card-body">
wenxin回答的问题
</div>
</div>
<div id="chat-xunfei-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
xunfei提出的问题1
</div>
<div class="layui-card-body">
xunfei回答的问题
</div>
</div>
<div id="draw-chatgpt-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
draw-ChatGPT
</div>
<div class="layui-card-body">
draw-ChatGPT画的回答
</div>
</div>
<div id="draw-tongyi-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
draw-tongyi
</div>
<div class="layui-card-body">
draw-tongyi问题
</div>
</div>
<div id="draw-wenxin-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
draw-wenxin
</div>
<div class="layui-card-body">
draw-wenxin画图
</div>
</div>
<div id="draw-xunfei-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
draw-xunfei
</div>
<div class="layui-card-body">
draw-xunfei回答
</div>
</div>
</div>
</div>
</div>
<!--4444444-->
<div id="footer-chat" class="layui-footer" style="height: 80px;line-height: 80px;">
<!-- 底部固定区域 -->
<div style="width: 80%;">
<div class="layui-input-group" style="width: 100%;">
<input type="text" id="question-input" style="margin-top: 20px;margin-left: 120px;" placeholder="输入问题..."
class="layui-input">
<div class="layui-input-suffix">
<button type="button" id="question-send" style="margin-left: 80px;" lay-on="question-send"
class="layui-btn layui-btn-radius">发送
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 引入 layui.js -->
<script src="/layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element;
var layer = layui.layer;
var util = layui.util;
//var $ = layui.$;
var jQuery = layui.$;
util.on('lay-on',{
//对话问答(文生文)
'chat-nav-show':function () {
jQuery("#chat-nav").show();
jQuery("#draw-nav").hide();
jQuery("#discuss-nav").hide();
},
//对话问图(文生图)
'draw-nav-show':function () {
jQuery("#draw-nav").show();
jQuery("#chat-nav").hide();
jQuery("#discuss-nav").hide();
},
//话题讨论
'discuss-nav-show':function () {
jQuery("#discuss-nav").show();
jQuery("#chat-nav").hide();
jQuery("#draw-nav").hide();
},
//给lay-on="nav-change-content"添加函数说明,根据标签页切换显示不同的内容
'nav-change-content':function (e) {
var showDivId = jQuery(e).attr("lay-data");
jQuery("#" + showDivId).show(); // 显示自己的内容
jQuery("#" + showDivId).siblings().hide(); // 隐藏所有同级 div 的内容
},
});
//头部事件
util.event('lay-header-event', {
menuLeft: function(othis){ // 左侧菜单事件
layer.msg('展开左侧菜单的操作', {icon: 0});
},
menuRight: function(){ // 右侧菜单事件
layer.open({
type: 1,
title: '更多',
content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
area: ['260px', '100%'],
offset: 'rt', // 右上角
anim: 'slideLeft', // 从右侧抽屉滑出
shadeClose: true,
scrollbar: false
});
}
});
});
</script>
</body>
</html>7、完善话题讨论标签和其它小问题
最下面【输入问题】对话框添加id
html
<div id="footer-chat" class="layui-footer" style="height: 80px;line-height: 80px;">对话问答-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标
html
<li class="layui-nav-item layui-hide-xs layui-this" lay-on="nav-change-content" lay-data="chat-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>js
util.on('lay-on',{
//对话问答(文生文)
'chat-nav-show':function () {
jQuery("#chat-nav").show();
jQuery("#draw-nav").hide();
jQuery("#discuss-nav").hide();
//对话问答-点击后顶部导航栏显示第一个标签页ChatGPT
var showDivId = "chat-chatgpt-content";
jQuery("#" + showDivId).show();
jQuery("#" + showDivId).siblings().hide();
//对话问答-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标跟随
jQuery("#chat-nav").find("li").removeClass("layui-this");
jQuery("#chat-nav").find("li").eq(1).addClass("layui-this");
// 显示最下面【输入问题】对话框
jQuery("#footer-chat").show();
},对话问图-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标
html
<ul id="draw-nav" class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-tongyi-content"><a href="javascript:;">通义千问</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-wenxin-content"><a href="javascript:;">文心一言</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-xunfei-content"><a href="javascript:;">科大讯飞</a></li>
</ul>js
//对话问图(文生图)
'draw-nav-show':function () {
jQuery("#draw-nav").show();
jQuery("#chat-nav").hide();
jQuery("#discuss-nav").hide();
//对话问图-点击后顶部导航栏显示第一个标签页ChatGPT
var showDivId = "draw-chatgpt-content";
jQuery("#" + showDivId).show();
jQuery("#" + showDivId).siblings().hide();
//对话问图-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标跟随
jQuery("#draw-nav").find("li").removeClass("layui-this");
jQuery("#draw-nav").find("li").eq(1).addClass("layui-this");
// 显示最下面【输入问题】对话框
jQuery("#footer-chat").show();
},左侧-话题讨论
html
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul id="discuss-nav" class="layui-nav layui-layout-left" style="display: none">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="discuss-content"><a href="javascript:;">推荐</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="discuss-content-new"><a href="javascript:;">最新</a></li>
</ul>html
<!-- 前端模板如下: -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小薛博客LLM大模型实战</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">
<!-- 引入 layui.css -->
<link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<!--111111-->
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">小薛博客LLM大模型实战</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul id="chat-nav" class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs layui-this" lay-on="nav-change-content" lay-data="chat-chatgpt-content"><a href="javascript:;">ChatGPT</a></li> <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-tongyi-content"><a href="javascript:;">通义千问</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-wenxin-content"><a href="javascript:;">文心一言</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-xunfei-content"><a href="javascript:;">科大讯飞</a></li>
</ul>
<ul id="draw-nav" class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-tongyi-content"><a href="javascript:;">通义千问</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-wenxin-content"><a href="javascript:;">文心一言</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-xunfei-content"><a href="javascript:;">科大讯飞</a></li>
</ul>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul id="discuss-nav" class="layui-nav layui-layout-left" style="display: none">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="discuss-content"><a href="javascript:;">推荐</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="discuss-content-new"><a href="javascript:;">最新</a></li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
<a href="javascript:;">
<img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">Your Profile</a></dd>
<dd><a href="javascript:;">Settings</a></dd>
<dd><a href="javascript:;">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical">xxxxtest</i>
</a>
</li>
</ul>
</div>
<!--2222222-->
<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:;">AI功能集</a>
<dl class="layui-nav-child">
<dd><a class="layui-this" href="javascript:;" lay-on="chat-nav-show">对话问答(文生文)</a></dd>
<dd><a href="javascript:;" lay-on="draw-nav-show">对话问图(文生图)</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-on="discuss-nav-show"><a href="javascript:;">话题讨论</a></li>
<li class="layui-nav-item"><a href="javascript:;">关于我们</a></li>
</ul>
</div>
</div>
<!--3333333-->
<div class="layui-body">
<!-- 内容主体区域 -->
<div>
<div style="padding: 15px;">
<div id="chat-chatgpt-content" class="layui-card layui-panel">
<div class="layui-card-header layui-font-16">
ChatGPT提出的问题1
</div>
<div class="layui-card-body">
ChatGPT回答的问题
</div>
</div>
<div id="chat-tongyi-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
tongyi提出的问题1
</div>
<div class="layui-card-body">
tongyi回答的问题
</div>
</div>
<div id="chat-wenxin-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
wenxin提出的问题1
</div>
<div class="layui-card-body">
wenxin回答的问题
</div>
</div>
<div id="chat-xunfei-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
xunfei提出的问题1
</div>
<div class="layui-card-body">
xunfei回答的问题
</div>
</div>
<div id="draw-chatgpt-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
draw-ChatGPT
</div>
<div class="layui-card-body">
draw-ChatGPT画的回答
</div>
</div>
<div id="draw-tongyi-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
draw-tongyi
</div>
<div class="layui-card-body">
draw-tongyi问题
</div>
</div>
<div id="draw-wenxin-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
draw-wenxin
</div>
<div class="layui-card-body">
draw-wenxin画图
</div>
</div>
<div id="draw-xunfei-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
draw-xunfei
</div>
<div class="layui-card-body">
draw-xunfei回答
</div>
</div>
<div id="discuss-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
话题讨论-推荐
</div>
<div class="layui-card-body">
话题讨论-推荐详细情况
</div>
</div>
<div id="discuss-content-new" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
话题讨论-最新
</div>
<div class="layui-card-body">
话题讨论-最新详细情况
</div>
</div>
</div>
</div>
</div>
<!--4444444-->
<div id="footer-chat" class="layui-footer" style="height: 80px;line-height: 80px;">
<!-- 底部固定区域 -->
<div style="width: 80%;">
<div class="layui-input-group" style="width: 100%;">
<input type="text" id="question-input" style="margin-top: 20px;margin-left: 120px;" placeholder="输入问题..."
class="layui-input">
<div class="layui-input-suffix">
<button type="button" id="question-send" style="margin-left: 80px;" lay-on="question-send"
class="layui-btn layui-btn-radius">发送
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 引入 layui.js -->
<script src="/layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element;
var layer = layui.layer;
var util = layui.util;
//var $ = layui.$;
var jQuery = layui.$;
util.on('lay-on',{
//对话问答(文生文)
'chat-nav-show':function () {
jQuery("#chat-nav").show();
jQuery("#draw-nav").hide();
jQuery("#discuss-nav").hide();
//对话问答-点击后顶部导航栏显示第一个标签页ChatGPT
var showDivId = "chat-chatgpt-content";
jQuery("#" + showDivId).show();
jQuery("#" + showDivId).siblings().hide();
//对话问答-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标跟随
jQuery("#chat-nav").find("li").removeClass("layui-this");
jQuery("#chat-nav").find("li").eq(1).addClass("layui-this");
// 显示最下面【输入问题】对话框
jQuery("#footer-chat").show();
},
//对话问图(文生图)
'draw-nav-show':function () {
jQuery("#draw-nav").show();
jQuery("#chat-nav").hide();
jQuery("#discuss-nav").hide();
//对话问图-点击后顶部导航栏显示第一个标签页ChatGPT
var showDivId = "draw-chatgpt-content";
jQuery("#" + showDivId).show();
jQuery("#" + showDivId).siblings().hide();
//对话问图-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标跟随
jQuery("#draw-nav").find("li").removeClass("layui-this");
jQuery("#draw-nav").find("li").eq(1).addClass("layui-this");
// 显示最下面【输入问题】对话框
jQuery("#footer-chat").show();
},
//左侧话题讨论
'discuss-nav-show':function () {
jQuery("#discuss-nav").show();
jQuery("#chat-nav").hide();
jQuery("#draw-nav").hide();
//左侧话题讨论-点击后顶部导航栏显示第一个标签页ChatGPT
var showDivId = "discuss-content";
jQuery("#" + showDivId).show();
jQuery("#" + showDivId).siblings().hide();
jQuery("#discuss-nav").find("li").removeClass("layui-this");
jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");
// 隐藏最下面【输入问题】对话框
jQuery("#footer-chat").hide();
},
//给lay-on="nav-change-content"添加函数说明,根据标签页切换显示不同的内容
'nav-change-content':function (e) {
var showDivId = jQuery(e).attr("lay-data");
jQuery("#" + showDivId).show(); // 显示自己的内容
jQuery("#" + showDivId).siblings().hide(); // 隐藏所有同级 div 的内容
},
//关于我们
'about-us':function () {
layer.msg('触发了事件-关于我们');
},
});
//头部事件
util.event('lay-header-event', {
menuLeft: function(othis){ // 左侧菜单事件
layer.msg('展开左侧菜单的操作', {icon: 0});
},
menuRight: function(){ // 右侧菜单事件
layer.open({
type: 1,
title: '更多',
content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
area: ['260px', '100%'],
offset: 'rt', // 右上角
anim: 'slideLeft', // 从右侧抽屉滑出
shadeClose: true,
scrollbar: false
});
}
});
});
</script>
</body>
</html>