网站商务通高级定制教程(1)

模板网 2014-09-10

网站商务通高级定制教程(1),今天为大家介绍一下商务通的高级定制方面的知识,利用到了之前和大家说过的 商务通核心函数库解密格式化后的代码 中的一个函数。

实现功能:

邀请框二次弹出、自定义快速邀请框内容、邀请后浏览器标题显示新信息闪烁和一个使最小化的浏览器显示出来并在屏幕最上层(目前只在IE和Google内核浏览器上有效果)。

核心代码介绍:

实现商务通快速邀请框自定义的实现方法是,覆盖了商务通自带的弹出邀请框函数LR_showInviteDiv(),函数原型如下:

复制代码 代码如下:

function LR_showInviteDiv(h1, h2){}

函数包含两个参数,本实例中未做实现,主要功能是通过传递的参数实现显示自定义的邀请语。在以后的教程中再为大家介绍。

还有一个需要注意的是,大家在自定义快速邀请框的时候,关闭邀请框时一定要调用一下商务通自带的函数LR_RefuseChat(),该函数的功能是向商务通服务器发送访客拒绝对话的信号,让商务通软件将访客从邀请列表中移动到在线列表,不调用这个函数会导致当访客关闭邀请框时,商务通软件中访客还是在邀请列表中。

其他的方面这里就不做介绍了,代码中都做了详细的介绍,相信具有一定JS基础的朋友们一看就能明白的。

效果图:

网站商务通高级定制教程(1) | 医疗模板库www.120muban.com

网站商务通高级定制教程(1) | 医疗模板库www.120muban.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网站商务通高级定制教程(1) | 医疗模板库www.120muban.com</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!--标题显示新信息闪烁-->
<script type="text/javascript">
	var title=document.title,flag=true,Timer1=null;
	function NewMsg(){
		document.title="【新信息】"+title;
		Timer1=setInterval(function(){
					if(flag){
						document.title="【新信息】"+title;
					}else{
						document.title="【   】"+title;
					}
					flag=!flag;
				},1000);
	}
	function stopNewMsg(){
		window.clearInterval(Timer1);
		document.title=title;
	}
</script>
<!--标题显示新信息闪烁-->
</head>
<body>

<p>网站商务通高级定制教程(1) | 医疗模板库www.120muban.com</p>

<!--引入商务通JS代码 测试请替换为自己的-->
<script type="text/javascript" src="http://kft.zoosnet.net/JS/LsJS.aspx?siteid=KFT41832211&float=0&lng=cn"></script>
<!--引入商务通JS代码 测试请替换为自己的-->

<!--普通弹出框-->
<script type="text/javascript">
var showEnable=true;
function hideSwtBox(){
	$("#swtBox").hide();
	if(showEnable){showSwtBox();}
}
function showSwtBox(){	
	setTimeout(function(){$("#swtBox").show();},5000);
}
//普通弹出框代码,这里为了演示只做了简单布局,大家可以根据自己的需求自由发挥。
	$("body").append('<div id="swtBox" style="margin-top:-120px;margin-left:-170px;width:340px;height:240px;position:fixed;top:50%;left:50%;background:#99CC66;border-radius:5px;_position: absolute;_top: expression(eval(document.documentElement.clientHeight/2+document.documentElement.scrollTop));_left: expression(eval(document.documentElement.clientWidth/2+document.documentElement.scrollLeft));"><h1 style="width:280px;margin:5px;padding:0;font-size:16px;color:#333;font-family:\'Microsoft Yahei\';display:inline-block;">在线专家请求与您对话</h1><a href="javascript:void(0);" onclick="hideSwtBox();" style="color:#CC3333;text-decoration:none;">关闭</a><div style="width:340px;height:200px;line-height:200px;text-align:center;"><a href="javascript:void(0);" onclick="openZoosUrl();hideSwtBox();showEnable=false;">接受邀请</a>&#160;&#160;&#160;&#160;<a href="javascript:void(0);"  onclick="hideSwtBox();">下次再说</a></div></div>');
</script>
<!--普通弹出框-->



<!--邀请弹出框-->
<script type="text/javascript">
function hideInvite(){
	$("#inviteBox").hide();
}
//覆盖商务通函数
function LR_showInviteDiv(h1, h2){
	NewMsg();//标题显示新信息闪烁
	showEnable=false;hideSwtBox();
	$("#inviteBox").remove();

	//邀请弹出框代码,这里为了演示只做了简单布局,大家可以根据自己的需求自由发挥。
	$("body").append('<div id="inviteBox" style="margin-top:-120px;margin-left:-170px;width:340px;height:240px;position:fixed;top:50%;left:50%;background:#FF6666;border-radius:5px;_position: absolute;_top: expression(eval(document.documentElement.clientHeight/2+document.documentElement.scrollTop));_left: expression(eval(document.documentElement.clientWidth/2+document.documentElement.scrollLeft));"><h1 style="width:280px;margin:5px;padding:0;font-size:16px;color:#333;font-family:\'Microsoft Yahei\';display:inline-block;">在线专家请求与您对话</h1><a href="javascript:void(0);" onclick="hideInvite();LR_RefuseChat();stopNewMsg();showEnable=true;showSwtBox();" style="color:#EEEEEE;text-decoration:none;">关闭</a><div style="width:340px;height:200px;line-height:200px;text-align:center;"><a href="javascript:void(0);" onclick="openZoosUrl();hideInvite();">接受邀请</a>&#160;&#160;&#160;&#160;<a href="javascript:void(0);"  onclick="hideInvite();stopNewMsg();LR_RefuseChat();showEnable=true;showSwtBox();">下次再说</a></div></div>');	
	window.focus();//是窗口获得焦点,IE浏览器有效,IE浏览器最小化时这句代码会使浏览器窗口显示并展现在屏幕最上层。
	setTimeout("alert('在线专家请求与您对话!');",3000);//弹出对话框,不需要可去除,实现功能:当浏览器是Google浏览器的时候这句代码会使浏览器窗口显示并展现在屏幕最上层。
}
</script>
<!--邀请弹出框-->

</body>
</html>

相关文章

  1. 自定义商务通二次弹出原理

    自定义商务通二次弹出原理,商务通窗口被关闭后,指定时间后再次弹出。演示代码仅使用纯色作为弹出窗背景,实际运用中可替换为图片。 核心代码: 复制代码 代码如下: script function hideSwt(){ document.getElementById(swtBox).style.display=none;//隐藏

  2. 360网站卫士常用前端公共库CDN服务

    360网站卫士常用前端公共库CDN服务 网址: http://libs.useso.com/ 这里提供了由360网站卫士CDN驱动的常用前端公共库以及和谐使用Google公共库字体库的调用方法 常用前端公共库 libs.useso.com 360网站卫士独立提供 这里为您提供常用的JavaScript前端库,托管

  3. 百度离线宝调用接口

    医疗模板库(www.120muban.com)收集整理的百度离线宝调用接口,使用方便,可自定义离线宝样式。 //data-lxb-uid 为百度推广账户ID //data-lxb-gid 为离线宝分组ID,没有可留空。

  4. 商务通轨迹代码未加载出来前执行的打开商通对话的函数

    医疗网站上的商务通代码在一些情况下可能出现无法加载的情况(常见的有网络速度慢,商务通服务器速度慢,商务通服务器受到攻击等),导致商务通代码无法执行,访客无法进入商务通进行咨询,这样错失了很多的对话机会,给我们造成很大的损失。 下面医疗模板库为

  5. 表单提交到商务通后台 中文说明加换行的实现方法

    实现将表单中的数据提交到商务通后台的效果,中文说明并且实现换行显示。 代码简单容易理解,这里就不多解释了。 要点:1、使用escape函数对中文进行编码;2、使用br标签进行换行。 效果如下图: 前台界面 提交到商务通后台的结果 提交到商务通后台的结果

随机推荐

  1. 自定义商务通二次弹出原理

    自定义商务通二次弹出原理,商务通窗口被关闭后,指定时间后再次弹出。演示代码仅使用纯色作为弹出窗背景,实际运用中可替换为图片。 核心代码: 复制代码 代码如下: script function hideSwt(){ document.getElementById(swtBox).style.display=none;//隐藏

  2. 360网站卫士常用前端公共库CDN服务

    360网站卫士常用前端公共库CDN服务 网址: http://libs.useso.com/ 这里提供了由360网站卫士CDN驱动的常用前端公共库以及和谐使用Google公共库字体库的调用方法 常用前端公共库 libs.useso.com 360网站卫士独立提供 这里为您提供常用的JavaScript前端库,托管

  3. 百度离线宝调用接口

    医疗模板库(www.120muban.com)收集整理的百度离线宝调用接口,使用方便,可自定义离线宝样式。 //data-lxb-uid 为百度推广账户ID //data-lxb-gid 为离线宝分组ID,没有可留空。

  4. 商务通轨迹代码未加载出来前执行的打开商通对话的函数

    医疗网站上的商务通代码在一些情况下可能出现无法加载的情况(常见的有网络速度慢,商务通服务器速度慢,商务通服务器受到攻击等),导致商务通代码无法执行,访客无法进入商务通进行咨询,这样错失了很多的对话机会,给我们造成很大的损失。 下面医疗模板库为

  5. 表单提交到商务通后台 中文说明加换行的实现方法

    实现将表单中的数据提交到商务通后台的效果,中文说明并且实现换行显示。 代码简单容易理解,这里就不多解释了。 要点:1、使用escape函数对中文进行编码;2、使用br标签进行换行。 效果如下图: 前台界面 提交到商务通后台的结果 提交到商务通后台的结果