浮动客服插件-兼容ie6,ie7,firefox2,3,调用后台系统数据
重写了部分代码以兼容不同浏览器,采用系统数据,默认采用系统边栏样式(我认为这样不会破坏整体页面风格),加入了详细的修改注释,希望能帮到大家
1,安装,很简单,直接拷贝下面代码到后台库项目,页脚即page_footer.lbi文件,放在文件最后即可
2,修改,有详细注释,如需大调整替换掉第一个div之内的html内容即可,否则可以调整第二第三个div所属的css类
3,msn也改为了点击打开msn的链接,因为我的msn和邮箱一样,所以我没有再加入邮箱,如果有需要可加在最后面
4,opera我没测试,没装,
5,有问题跟贴,能所能及的我会尽量帮忙解决
<!--浮动客服开始-->
<script type="text/javascript">
<!--
function Float(id, initX, initY, align){
this.startX = (initX)? initX : 0;//冒号后为默认横向位置,相对值,如对齐方式为右,则从最右端开始计算
this.startY = (initY)? initY: document.documentElement.scrollTop + document.documentElement.clientHeight-160;//同上,默认纵向位置,页面低端-160px,如客服信息较多显示不完整,请尝试加大最后一个数字
this.align = (align)? align: "right";//同上,对齐方式,默认右对齐,则横向位置从屏幕最右端算起
this.x = this.startX;
this.y = this.startY;
//var isNs = (navigator.appName.indexOf("Netscape") != -1);
this.div = document.getElementById(id);
this.init = function() {
this.div.style.top = this.startY + "px";
if(this.align == "left")
this.div.style.left = this.startX + "px" ;
else
this.div.style.right = this.startX + "px" ;
}
this.refresh = function(){
this.y += (getRoot().scrollTop + this.startY - this.y)/8;
this.div.style.top = this.y + "px" ;
}
this.floating = function(objName){
setInterval(objName+'.refresh()', 10);
}
this.init();
}
function getRoot(){
if(document.documentElement && document.body){
return (document.documentElement.scrollTop > document.body.scrollTop) ? document.documentElement : document.body;
}else if(document.documentElement){
return document.documentElement;
}else{
return document.body;
}
}
//-->下方第一个层为定位层,width可调整层宽度,第二个之后层样式默认为ecshop模板右边导航栏样式,可自行调整,如需大面积更换,请保留第一个层标签定位,替换其余html内容,默认采用ul标签排列各元素
</script>
<div id="divStayTopright" style="position:absolute; width:150px;">
<div class="title-02">
<div class="title">联系我们</div>
<div>
<ul>
<!-- 客服电话{if $service_phone} -->
电话: {$service_phone}<br>
<!-- 结束客服电话{/if} -->
<!-- QQ 号码 {foreach from=$qq item=im} -->
<!-- {if $im} -->
<a href="http://wpa.qq.com/msgrd?V=1&Uin={$im}&Site={$shop_name}&Menu=yes" target="_blank"><img src="http://wpa.qq.com/pa?p=1:{$im}:4" height="16" border="0" alt="QQ" /> {$im}</a><br>
<!-- {/if} -->
<!-- {/foreach} 结束QQ号码 -->
<!-- 淘宝旺旺 {foreach from=$ww item=im} -->
<!-- {if $im} -->
<a href="http://amos1.taobao.com/msg.ww?v=2&uid={$im|escape:url}&s=2" target="_blank"><img src="http://amos1.taobao.com/online.ww?v=2&uid={$im|escape:url}&s=2" width="16" height="16" border="0" alt="淘宝旺旺" /> {$im}</a><br>
<!-- {/if} -->
<!--{/foreach} 结束淘宝旺旺 -->
<!-- Yahoo Messenger {foreach from=$ym item=im} -->
<!-- {if $im} -->
<a href="http://edit.yahoo.com/config/send_webmesg?.target={$im}n&.src=pg" target="_blank"><img src="images/yahoo.gif" width="18" height="17" border="0" alt="Yahoo Messenger" /> {$im}</a><br>
<!-- {/if} -->
<!-- {/foreach} 结束Yahoo Messenger -->
<!-- MSN Messenger {foreach from=$msn item=im} -->
<!-- {if $im} -->
<a href="msnim:chat?contact={$im}" target="_blank"><img src="images/msn.gif" width="18" height="17" border="0" alt="MSN" /> {$im}</a><br>
<!-- {/if} -->
<!-- {/foreach} 结束MSN Messenger -->
<!-- Skype {foreach from=$skype item=im} -->
<!-- {if $im} -->
<img src="http://mystatus.skype.com/smallclassic/{$im|escape:url}" alt="Skype" /><a href="skype:{$im|escape:url}?call">{$im}</a><br>
<!-- {/if} -->
<!-- {/foreach} -->
</ul>
</div>
</div>
</div>
<script type="text/javascript">
<!--此处创建浮动窗口实例,函数原型为float(对象id,横向位置,纵向位置,对齐方式),其中位置为数字,对齐方式为left或right,如需两个浮动客服窗口,可用不同参数创建两个实例
var o1 = new Float("divStayTopright");
o1.floating('o1');
</script>
<!--浮动客服结束-->
