纯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="{#href#}" title="{#tip#}">

                 <img src="{#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>