阅读量:4
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>