一个轻量的聊天气泡框架

“一个简单易用的静态聊天气泡框架”

  忙完了期末周，算是终于休闲下来，之前特别喜欢在睡前网上冲浪，遇到一些有趣的开源项目或者奇思妙想都会收藏一下，这不早上偶然看到之前收藏的一个开源项目，就此分享一下。

  了解我博客的人都知道在我的关于页面有个对话气泡哪个是之前css东拼西凑搞得，而这个开源项目正是一个简单易用的静态聊天气泡框架。看完文档简单改了一下进直接塞进博客了，效果还不错

演示：关于
下面直接开箱：
开源地址：https://github.com/MorFansLab/LiteWebChat_Frame

食用

• 无论是单页还是博客，第一步都要引入他的css,在开源文档里他们提供了

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

  除了引入链接也可以去github下载文件自己引入，个人觉得配色方面或者气泡样式可以把文件下载下来自己改改DIY

• 紧接着就是创建容器

  <div class="lite-chatbox">
  气泡等在这里
  </div>

• 在容器里放入气泡昵称头像等组件
  

  示例代码

  <div class="lite-chatbox"><!-- 先创建容器 -->
   <div class="cright cmsg"><!-- 这里是控制气泡在左边还是右边 -->
       <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="http://q1.qlogo.cn/g?b=qq&nk=2381548894&s=640" /><!-- 头像设置成圆形，默认是方形 -->
       <span class="name">Meteor
       <span class="admin">admin</span><!-- 头衔 -->
       </span><!-- 昵称 -->
       <!-- 注意层次 -->
  
       <span class="content">LiteChat_Frame（轻聊天气泡框架），一个贼简洁 <del>(简单)</del> 、美观、易用的 HTML静态 聊天界面框架</span>
   </div>
    <div class="cleft cmsg"><!-- 这里是控制气泡在左边还是右边 -->
       <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="http://q1.qlogo.cn/g?b=qq&nk=2381548894&s=640" /><!-- 头像设置成圆形，默认是方形 -->
       <span class="name">Meteor</span><!-- 昵称 -->
       <!-- 注意层次 -->
  
       <span class="content">确实不错嗷</span>
   </div>   
     <!-- 下面是提示框演示 -->
   <div class="tips">
       <span>系统消息：欢迎加入群聊</span>
   </div>
   <div class="tips">
       <span class="tips-primary">系统消息：首要的提示</span>
   </div>
  
   <div class="tips">
       <span class="tips-success">系统消息：成功的提示</span>
   </div>
  
   <div class="tips">
       <span class="tips-info">系统消息：信息提示</span>
   </div>
    <div class="tips">
       <span class="tips-warning">系统消息：警告提示</span>
   </div>
   <div class="tips">
       <span class="tips-danger">系统消息：错误/危险提示</span>
   </div>
  
  </div><!-- 容器屁股 -->

  
  这里我直接把我写好的示例代码放出来示例代码里我已经写清楚了注释，运行后效果如下
  

  组件属性

  气泡部分

  聊天气泡

  更改对应的class就会呈现对应的样式

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

提示类属性

更改对应的class就会呈现对应的样式

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

具体的参照上面的示例代码和组件属性，用不上五分钟就能自己创建出来了

放入Typecho

引入css后在想要插入的文章页直接粘贴容器即可，我的建议是提前写好然后把整个容器放进你需要的文章或者页面

更多具体的文档查看Github的开源地址即可