基于jQuery的在线客服悬浮插件Sonline 2.0设计与实现

jquery.Sonline 2.0 在线客服悬浮插件

jquery.Sonline 2.0 是一款基于 jQuery 的在线客服悬浮插件，可以方便地集成到网站中，为用户提供在线咨询服务。

功能特点

• 自动生成DOM结构: 无需手动编写 HTML 代码，插件会自动在页面中生成客服悬浮窗口。
• 多种显示风格: 插件提供了多套 CSS 样式，可以通过简单的配置切换不同的外观风格。
• 灵活的配置选项: 可以自定义客服窗口的位置、大小、默认状态（展开或收缩）、客服 QQ 号码等信息。
• 滚动或固定两种模式: 可以选择客服窗口是跟随页面滚动还是固定在屏幕上。

使用方法

1. 引入文件: 在页面中引入 jQuery 库和 jquery.Sonline 插件文件。
2. 初始化插件: 使用 $().Sonline() 方法初始化插件，并配置相关参数。

$(function(){ 
  $().Sonline({ 
    Position: "left", // left 或 right，客服窗口位置
    Top: 100, // 距离顶部距离，单位：像素
    Width: 165, // 客服窗口宽度，单位：像素
    Style: 1, // 显示风格，共 6 种，默认值为 1
    Effect: true, // 滚动或固定，true 为滚动，false 为固定
    DefaultsOpen: true, // 默认状态，true 为展开，false 为收缩
    Tel: "400-555-6565", //  联系电话
    Qqlist: "402719549|售前咨询,402719549|售后咨询,402719549|技术支持,402719549|建议/投诉" // 多个 QQ 用 ',' 隔开，QQ 和客服名用 '|' 隔开
  }); 
}) 

参数说明

| 参数 | 说明 |

| ----------- | --------------------------------------------------------------------------------- |

| Position | 客服窗口位置，可选值：left 或 right，默认为 left |

| Top | 距离顶部距离，单位：像素，默认为 200 |

| Width | 客服窗口宽度，单位：像素，默认为 165 |

| Style | 显示风格，共 6 种，默认值为 1 |

| Effect | 滚动或固定，true 为滚动，false 为固定，默认为 true |

| DefaultsOpen | 默认状态，true 为展开，false 为收缩，默认为 true |

| Tel | 联系电话 |

| Qqlist | 客服 QQ 列表，多个 QQ 用 ',' 隔开，QQ 和客服名用 '|' 隔开，例如： "123456|客服1,654321|客服2" |