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