MENU

轻网页聊天框架(LiteWebChat_Frame)

December 1, 2019 • 资源分享

轻网页聊天框架

在线演示

使用 指南 (指北)

我们仅提供了两种方式来获取 LiteWebChat_Frame, 但你可以通过各种奇淫技巧获取使用。
你可以直接从 GayHub 项目 官网 直接克隆下载,其中包含了压缩过的和未压缩过的 CSS 和 一个例子文件,以及图片文件。

地址:https://github.com/MorFansLab/LiteWebChat_Frame

直接引用

<link type="text/css" href="https://lab.morfans.cn/LiteWebChat_Frame/litewebchat.min.css" rel="stylesheet" />

<link type="text/css" href="https://lab.morfans.cn/LiteWebChat_Frame/litewebchat.css" rel="stylesheet" />

创建容器

<div class="lite-chatbox">
...
</div>

兼容性

兼容 Edge和其他主流浏览器的最新版本。
对于IE浏览器请微修改右对话气泡背景即可使用。

组件

聊天气泡

组件(类名)Class 附加类名 / 备注
聊天气泡组件(cmsg)cleft(左边) / cright(右边)
头像 (headIcon)默认方形 / radius(圆形头像)
头衔 (htitle)默认成员头衔 / admin(管理头衔) / owner(群主头衔)
名称(name)为空使用 ‘&nbsp;’
聊天内容(content)-

Example:

<div class="cright cmsg">
    <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/B.jpg" />
    <span class="name">SuperPaxxs</span>
    <span class="content">LiteChat_Frame(轻聊天气泡框架),一个贼简洁 <del>(简单)</del> 、美观、易用的 HTML 聊天界面框架</span>
</div>

系统提示

类名效果
tips正常
tips-primary首要的提示
tips-success成功提示
tips-info信息提示
tips-warning警告提示
tips-danger错误/危险提示

Example:

<div class="tips">
    <span class="tips-danger">系统消息:左/右边长消息被管理员批判一番……</span>
</div>

<div class="tips">
    <span>系统消息:normal</span>
</div>
以上为转载内容,觉得好看就搬过来了
Last Modified: June 19, 2020
Archives QR Code
QR Code for this page
Tipping QR Code

感谢以下平台提供云加速支持