Layim是一個基于Layui框架的即時通訊系統，提供了一套完整的即時通訊功能，包括用戶登錄、好友列表、聊天界面等。
以下是Layim的完整實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layim Instant Messaging</title>
<link rel="stylesheet" href="layui/css/layui.css">
<style>
body {
margin: 20px;
}
</style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">Layim Instant Messaging</div>
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">個人中心</a></li>
<li class="layui-nav-item"><a href="">消息<span class="layui-badge">9</span></a></li>
<li class="layui-nav-item"><a href="">更多</a></li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">admin</a>
<dl class="layui-nav-child">
<dd><a href="">基本設置</a></dd>
<dd><a href="">安全設置</a></dd>
<dd><a href="">退出</a></dd>
</dl>
</li>
</ul>
</div>
<div class="layui-body">
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">好友列表</li>
<li>聊天界面</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">2018年12月</h3>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">2018年11月</h3>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">2018年10月</h3>
</div>
</li>
</ul>
</div>
<div class="layui-tab-item">
<ul class="layim-chat-main"></ul>
<div class="layim-chat-footer">
<div class="layui-unselect layim-chat-tool">
<span class="layui-icon layim-tool-face" title="選擇表情"></span>
<span class="layui-icon layim-tool-image" title="上傳圖片"></span>
<span class="layui-icon layim-tool-file" title="上傳附件"></span>
</div>
<textarea class="layui-unselect layim-chat-textarea" placeholder="請輸入內容"></textarea>
<div class="layui-unselect layim-chat-bottom">
<div class="layui-unselect layim-chat-send">
<span class="layui-btn layui-btn-primary">發送</span>
<span class="layui-btn">Ctrl+Enter</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-footer">
? 2022 Layim Instant Messaging
</div>
</div>
<script src="layui/layui.js"></script>
<script>
layui.use(['element', 'layim'], function () {
var element = layui.element;
var layim = layui.layim;
// 初始化Layim
layim.init({
init: {
mine: {
username: 'admin',
id: '1',
status: 'online',
avatar: 'http://www.layui.com/images/avatar.png'
}
},
brief: false
});
});
</script>
</body>
</html>
