WebOffice快速集成入门教程:生成菜单及响应事件

如要实现：生成菜单及响应事件

前提条件

请你确认是否具备如下知识条件：

阅读本节教程，我们假定您已阅读《如何快速打开一个WORD文档》《引入JS文件快速打开文档》教程，如果还没有，请前往学习：《如何快速打开一个WORD文档》《引入JS文件快速打开文档》

使用方法

本教程的里所述的大部代码，用户不一定要通过手工编写，可以直接复制到记事本里保存为网页文件扩展名.html的文件即可用浏览器测试。

开始工作

要实现WebOffice引入JS文件代码打开文档，请您按如下步骤执行：

1、生成JS文件

找到《引入JS文件快速打开文档》教程里生成的index.html文件所在文件夹，或网上下载解压出来，找到weboffice.js文件，并打开加入如下代码:

function setMenu(){
	WebOffice.WebClearMenuItem(0);//清除控件默认文件菜单里的所有子项
	WebOffice.SetMenuName(0,'新建文件');//修改文件菜单名称为：新建文件
	WebOffice.CustomMenuCount=2;//设置新增的菜单个数
	WebOffice.SetMenuName(1,'打开文件'); 
	WebOffice.SetMenuName(2,'保存文件'); 
}

2、增加加载函数

打开index.html找到代码:

strUrl = strUrl +'&-&jsonload:OpenFile';

将此代码修改为：

strUrl = strUrl +'&-&jsonload:setMenu,OpenFile';

修改完成后，index.html代码如下：

<html>
<head>
</head>
<script language="javascript" type ="text/javascript">
///////////////////////////////////////////////////////////////////
///以下代码采用JS自动检测浏览器地址栏的根地址,并返回相关数据
var varpath = decodeURI(window.location.pathname);
var varhost=window.location.host; 
var strRoot;
if (varhost=='')
{
	//使用本地机地址打开此页面，地址类似于：file:///c:/***/index.html	
	strRoot = varpath.substring(1,varpath.lastIndexOf('/')+1);//取得打开、保存路径 
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
	
}else
{
	//使用网络地址运行本页面,地址类似于: http://localhost/*/index.html
	varpro=window.location.protocol;
	strRoot= varpro + "//" + varhost + "/" + varpath.substring(1,varpath.lastIndexOf('/')+1);
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
}
////以上JS代码目的是取得 strRoot 的值
////////////////////////////////////////////////
var strUrl = 'BaseAddr:'+strRoot;//BaseAddr  一般是项目的发布路径 strRoot 的值，strRoot 的值通过浏览器地址栏检测出，也可以直接由程序写定。
strUrl = strUrl + '&-&jsfile:BaseAddr:weboffice.js';//jsfile指定控件运行的Javascript API接口函数库的js代码文件名称 BaseAddr: 经控件解析执行后即为上面 strRoot 的值
strUrl = strUrl + '&-&jsutf8:0';//Javascript API接口函数库的js代码文件的编码格式 当值为1时表示是：utf-8，0为gb2312
strUrl = strUrl +'&-&jsonload:setMenu,OpenFile'; 
strUrl = strUrl +'&-&OpenUrl:http://www.officectrl.com/weboffice/temp/file1.doc';
strUrl = strUrl +'&-&DocType:doc';
function OpenDoc()
{
window.open('WebView://|Officectrl.com|' + encodeURI(strUrl),'_self');
}
</script>
<body><a href="javascript:OpenDoc();">查看</a>
</body>
</html>

完成以上代码，可以用浏览器打开index.html，测试效果如下：

3、增加菜单事件响应函数

菜单栏标题栏响应识别编号是从50100开始的，即从左至右，新建文件的响应号为:50100,打开文件的响应号为:50101,保存文件的响应号为:50102。

智能窗根据响应识别号自动到加入的js文件里寻找格式为：menu_识别号()的JS函数，即点击新建文件时，智能窗查找Menu_50100的JS函数，加载执行。

本示例教程加入的JS文件名为weboffice.js,因此，我们要找到weboffice.js文件，在里面加入Menu_50100(),Menu_50101(),Menu_50102()函数及实现代码。

完成后,weboffice.js代码将成为如下：

function OpenFile()
{
	WebOffice.Open(strOpenUrl,false,doctype)
}
function setMenu(){
	WebOffice.WebClearMenuItem(0);//清除控件默认文件菜单里的所有子项
	WebOffice.SetMenuName(0,'新建文件');//修改文件菜单名称为：新建文件
	WebOffice.CustomMenuCount=2;//设置新增的菜单个数
	WebOffice.SetMenuName(1,'打开文件'); 
	WebOffice.SetMenuName(2,'保存文件'); 
}
function Menu_50100()
{
	WebOffice.CreateNew("Word.Document");//新建Word文档的实现代码,也可以打开一个空白word文档实现新建
}
function Menu_50101()
{
	WebOffice.Open(strOpenUrl,true,"Word.Document","","");
}
function Menu_50102()
{
	alert('您点击了保存按钮！');
}

完成以上代码，可以用浏览器打开index.html，测试实际效果。

本示例教程源代码下载：lession2_09.rar。

设置子菜单及响应事件

通过WebOffice软件的WebAddMenuItem接口，可以实现在一级菜单里增加下拉菜单

WebAddMenuItem里有三个参数，第一个参数是指定一级菜单的序号，第二个参数是子菜单的名称，第三个是子菜单的事件响应编号。

智能窗根据事件响应编号(或者说是识别号)自动在JS文件里查找 menu_事件响应编号()的函数实现，加载入后执行。

本示例修改WebOffice.js文件代码如下，以实现增加子菜单：

function OpenFile()
{
	WebOffice.Open(strOpenUrl,false,doctype)
}
function setMenu(){
	WebOffice.WebClearMenuItem(0);//清除控件默认文件菜单里的所有子项
	WebOffice.SetMenuName(0,'文件');//修改文件菜单名称为：新建文件
	WebOffice.CustomMenuCount=2;//设置新增的菜单个数
	WebOffice.SetMenuName(1,'编辑'); 
	WebOffice.SetMenuName(2,'帮助'); 
	WebOffice.WebAddMenuItem(0,'新建','51001'); 
	WebOffice.WebAddMenuItem(0,'打开','51002'); 
	WebOffice.WebAddMenuItem(0,'保存','51003'); 
	WebOffice.WebAddMenuItem(1,'允许复制','52001'); 
	WebOffice.WebAddMenuItem(1,'不允许复制','52002'); 
	WebOffice.WebAddMenuItem(1,'测试','52003'); 
	WebOffice.WebAddMenuItem(2,'帮助手册','53001'); 
	WebOffice.WebAddMenuItem(2,'在线站点','53002'); 

}
function Menu_51001()
{
	alert('您点击了新建文件按钮！');
}
function Menu_51002()
{
	alert('您点击了打开文件按钮！');
}
function Menu_51003()
{
	alert('您点击了保存文件按钮！');
}

function Menu_52001()
{
	alert('您点击了允许复制按钮！');
}
function Menu_52002()
{
	alert('您点击了不允许复制按钮！');
}
function Menu_52003()
{
	alert('您点击了测试按钮！');
}
function Menu_53001()
{
	alert('您点击了帮助按钮！');
}
function Menu_53002()
{
	alert('您点击了站点按钮！');
}

完成以上weboffice.js代码后，重新打开index.html测试效果。

本示例教程源代码下载：lession2_10.rar。