首页 > 代码库 > 纯js客服插件集qq、旺旺、skype、百度hi、msn

纯js客服插件集qq、旺旺、skype、百度hi、msn

原文 纯js客服插件集qq、旺旺、skype、百度hi、msn

客服插件,集qq、旺旺、skype、百度hi、msn 等 即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨。我的博客 http://www.qiling.org

 <script> //在线客服插件 powered by casejs 极简主义 http://www.mlrzw.cn function CaseService(caseServiceConfig) {      this.config = caseServiceConfig;     this.elementId = this.config.elementId ;     this.tpl = {         ‘qq‘ : {             ‘href‘ : ‘http://wpa.qq.com/msgrd?v=3&uin={#account#}&site=qq&menu=yes‘,             ‘img‘  : ‘http://wpa.qq.com/pa?p=2:{#account#}:{#style#}&time={#rand#}‘          },‘wangwang‘ : {              ‘href‘ : ‘http://www.taobao.com/webww/ww.php?ver=3&touid={#account#}&siteid=cntaobao&status={#style#}&charset=utf-8‘,              ‘img‘  : ‘http://amos.alicdn.com/online.aw?v=2&uid={#account#}&site=cntaobao&s=1&charset=utf-8‘          },‘skype‘ : {              ‘href‘ : ‘skype:{#account#}?call‘,              ‘img‘  : ‘http://mystatus.skype.com/smallclassic/{#account#}‘          },‘baiduhi‘ : {              ‘href‘ : ‘baidu://message/?id={#account#}‘,              ‘img‘  : ‘http://tieba.baidu.com/tb/img/hi/hiOnline.gif‘          },‘msn‘ : {              ‘href‘ : ‘msnim:chat?contact={#account#}‘,              ‘img‘  : ‘http://tieba.baidu.com/tb/img/hi/hiOnline.gif‘          }      };      //创建html      this.buildHtml();            //设置关闭     var that = this;      document.getElementById(this.elementId + ‘_sBtnClose‘).onclick = function(){        that.hide();      };      //设置打开     document.getElementById(this.elementId + ‘_sBtnOpenArea‘).onclick = function(){        that.show();      };      //将html对象赋值给element      this.element = document.getElementById(this.config.elementId);      //判断是否显示     this.config.isOpen ? this.show() : this.hide();      //最后滚动到的位置     this.lastScrollY = 0;      //滚动     this.slide(); }  //显示浮动窗口 CaseService.prototype.show = function() {      document.getElementById(this.elementId + "_sBtnOpenArea").style.display = ‘none‘;      document.getElementById(this.elementId + "_serviceWin").style.display = ‘block‘; }; //隐藏浮动窗口 CaseService.prototype.hide = function() {        document.getElementById(this.elementId + "_serviceWin").style.display = ‘none‘;      document.getElementById(this.elementId + "_sBtnOpenArea").style.display = ‘block‘;      //如果设置了隐藏的时候关闭  取消事件 并清空 dom      if(this.config.closeAsHide == false){          if(this.interval){              window.clearInterval(this.interval);          }          //清空dom          this.element.innerHTML = ‘‘;      } }; //滚动浮动窗口 CaseService.prototype.slide = function() {      //自动设置 定时事件     if(!this.interval){          var that = this;          this.interval = window.setInterval(function(){              that.slide();          },1);      }      //获取距离顶部的距离     if (document.documentElement && document.documentElement.scrollTop){          var diffY = document.documentElement.scrollTop;      }else{          var diffY = document.body.scrollTop      }      var percent = .1 * ( diffY - this.lastScrollY);       percent = (percent > 0)?Math.ceil(percent):Math.floor(percent);      this.element.style.top = parseInt(this.element.style.top) + percent + "px";      this.lastScrollY += percent;  }; CaseService.prototype.buildHtml = function(){      //设置关闭事件     var accountList = ‘‘;      for (i = 0;i < this.config.accountArray.length ; i++ ){         accountList +=  (function(){/*              <div class="sItem">               <label>{#label#}</label>               <a target="_blank" href="http://www.mamicode.com/{#href#}" title="{#tip#}">                 <img src="http://www.mamicode.com/{#img#}" alt="{#tip#}" />               </a>             </div>         */}.toString().replace(/^.+?\*|\\(?=\/)|\*.+?$/gi, ""))         //替换链接和状态图片 必须在前边        .replace(/{#href#}/g   , this.tpl[this.config.accountArray[i].type].href)         .replace(/{#img#}/g    , this.tpl[this.config.accountArray[i].type].img)         //替换其他参数        .replace(/{#label#}/g   , this.config.accountArray[i].label)          .replace(/{#account#}/g , this.config.accountArray[i].account)          .replace(/{#style#}/g   , this.config.accountArray[i].style)          .replace(/{#tip#}/g     , this.config.accountArray[i].tip)          .replace(/{#rand#}/g    , this.config.accountArray[i].rand);       };      var css = (function(){/*           <style type="text/css">          .caseService {font-family:‘微软雅黑‘;text-align: left;}          .caseService .serviceWin {width:168px;height:auto;border:2px solid {#cssColor#};z-index:999999;}          .caseService .sTitle {background:{#cssColor#};padding:8px 10px;font-size:14px;color:#FFF;position:relative}          .caseService .sBtnClose {width: 25px;height: 25px;cursor: pointer;position: absolute;top: 3px;right: 10px;font-size: 25px;line-height: 25px;text-align: right;}          .caseService .sList {font-size: 14px;color: #444;font-size: 13px;line-height: 20px;padding: 10px;background: #FFF}          .caseService .sList .sItem{height:30px}          .caseService .sList label{display:block;width:47%;text-align:right;overflow:hidden;white-space:nowrap;height:30px;float:left}          .caseService .sList a{display:block;width:52%;float:left;overflow:hidden;height:30px;border:0;padding:0;margin:0}          .caseService .sList img{display:inline-block;border:0;padding:0;margin:0}          .caseService .other{border-top:1px dotted #ccc;margin-top:10px;font-size:17px;text-align:center;line-height:28px;padding-top:5px}          .caseService .sBtnOpenArea {background:{#cssColor#};height: auto;padding: 15px 0;width: 31px;display:none;color:#FFF;font-size:15px;text-align:center;line-height:20px;cursor:pointer}          .caseService .sBtnOpen{font-size: 24px;height: 25px;}          </style>      */}.toString().replace(/^.+?\*|\\(?=\/)|\*.+?$/gi, "")).replace(/{#cssColor#}/g,this.config.color);             var tpl = (function(){/*           <div id="{#elementId#}" class="caseService" style="{#style#}" >            <div id="{#elementId#}_sBtnOpenArea" class="sBtnOpenArea">              <div class="sBtnOpen">+</div>              {#closeTitle#}            </div>            <div id="{#elementId#}_serviceWin" class="serviceWin" style="{#width#}">                <div class="sTitle">{#openTitle#}                  <div id="{#elementId#}_sBtnClose" class="sBtnClose">×</div>                </div>                <div class="sList">                  {#accoundList#}                  <div class="other">                  {#other#}                  </div>                </div>            </div>          </div>      */}.toString().replace(/^.+?\*|\\(?=\/)|\*.+?$/gi, ""));      //拼接Html      serviceWinTpl = css + tpl          .replace(/{#elementId#}/g,this.config.elementId)          .replace(‘{#other#}‘,this.config.other)          .replace(‘{#accoundList#}‘,accountList)          .replace(‘{#width#}‘,this.config.width)          .replace(‘{#style#}‘,this.config.style)          .replace(‘{#closeTitle#}‘,this.config.closeTitle)          .replace(‘{#openTitle#}‘,this.config.openTitle);      document.write(serviceWinTpl); };             //在线客服插件 powered by casejs new CaseService( {      "elementId": "myServiceWin",      "color": "#266ed2",      "openTitle": "客服中心",      "closeTitle": "联<br/>系<br/>我<br/>们",      "style": "right:0px; top:180px;position: absolute;",      "width": "width:170px;",      "isOpen": "true",      "closeAsHide": "true",      "other": "服务热线<br />0546-8238915",      "accountArray": [          {              "type": "qq",              "label": "在线客服:",              "account": "2095128673",              "tip": "客服当前在线,欢迎与我联系",              "style": "1"          },          {              "type": "qq",              "label": "在线客服:",              "account": "1113635625",              "tip": "客服在线",              "style": "1"          },          {              "type": "qq",              "label": "技术QQ:",              "account": "781787584",              "tip": "点击和我联系",              "style": "7"          },          {              "type": "wangwang",              "label": "技术旺旺:",              "account": "炫彩七零",              "tip": "点击与我联系",              "style": "1"          },          {              "type": "msn",              "label": "技术MSN:",              "account": "王磊芝",              "tip": "点击和我联系",              "style": "0"          },          {              "type": "skype",              "label": "Skype:",              "account": "15154625521",              "tip": "我在线请和我联系",              "style": "0"          }      ] } ); </script>

 

纯js客服插件集qq、旺旺、skype、百度hi、msn