NTKO Office文档控件自定义工具栏按钮从右到左排列
NTKO Posted on 2017-03-16 2936
案例描述
NTKO OFFICE文档控件支持自定义工具栏按钮，自定义工具栏上的按钮的布局默认是从左至右显示的。本文探讨的是如何利用js代码实现按钮从右至左的布局效果。
产品相关方法
-
自定义工具栏的方法：
AddCustomToolButton(ButtonText, ImgIndex)
参数ButtonText：如果设置为""字符串则为不显示字符串
参数ImgIndex：只能设置内部拥有的图片，传入的是图片索引。 -
设定工具栏上的按钮状态的方法：
SetCustomToolButtonStatus(ButtonIndex, IsEnable, IsVisible)
参数ButtonIndex：在调用AddCustomToolButton创建的时候得到。
参数IsEnable：传True是可用，False为不可用
参数IsVisible：传True是显示，False是不显示
解决思路及方法
- 让左侧的按钮用空格按钮来占位，从而实现需要的按钮在右边显示。
- 通过
SetCustomToolButtonStatus设置空白按钮为可见但不可用，这样给用户的感觉就是没有按钮的。 - 控件支持全屏功能，还要实现全屏后自定义的按钮也要居右显示。实现办法是定义两套按钮，在非全屏状态下，仅显示第一套按钮，在全屏状态下，把第一套按钮隐藏掉，仅显示第二套按钮。
- 空格与文字说占用的宽度说明：
a、每个空格占用4px
b、每个文字占用12px
c、每个按钮控件会自动加一个空格，加的空格占用11px - 效果：
案例代码参考
<html>
<head>
<title>NTKO Office文档控件自定义工具栏按钮从右到左排列JS示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
#officecontrol { height:100% ; width:100%; position:absolute;}
body { margin:0px; padding:0px; overflow:hidden;}
</style>
<script type="text/javascript">
var TANGER_OCX_OBJ;
var TANGER_OCX_Width=0;
//每个空格4px 每个按钮加11px 每个中文12px 仅图片是16px 图片加文字图片是20px
var ButtonWordsNum=14; //所有按钮上的总字数
var ButtonNum=4; //定义的按钮数量加1（要加上空格按钮）
var ButtonWidthImageNum=2; //带图片的按钮的个数
var ButtonOnlyImageNum=0; //仅图片的按钮的个数
function init()
{
TANGER_OCX_OBJ=document.getElementById("TANGER_OCX");
TANGER_OCX_Width=document.getElementById("TANGER_OCX").offsetWidth;
TANGER_OCX_OBJ.Menubar=false;
AddNormalCustomToolButton(); //添加非全屏状态下的自定义工具栏
AddFullScreenCustomToolButton(); //添加全屏状态下的自定义工具栏
SetButtionVisable(true); //设置按钮的可用及可见状态
}
function CreateSpaceString(IsNoramalShow) //根据自定义按钮说占用的宽度，求出要用多少空格占位。
{
var spacestring="";
var num=0;
if(IsNoramalShow){
num=(TANGER_OCX_Width-6-ButtonWordsNum*12-ButtonNum*11-ButtonWidthImageNum*20-ButtonOnlyImageNum*16)/4;
}else{
num=(screen.width-8-ButtonWordsNum*12-ButtonNum*11-ButtonWidthImageNum*20-ButtonOnlyImageNum*16)/4;
}
for(var i=0;i<num;i++)
{
spacestring+=" ";
}
return spacestring;
}
function AddNormalCustomToolButton() //添加非全屏状态下的自定义工具栏
{
TANGER_OCX_OBJ.CustomToolBar=true;
TANGER_OCX_OBJ.AddCustomToolButton(CreateSpaceString(true), -1); //添加自定义工具栏按钮
TANGER_OCX_OBJ.AddCustomToolButton("保存文档", 0); //添加自定义工具栏按钮
TANGER_OCX_OBJ.AddCustomToolButton("关闭痕迹保留", 1); //添加自定义工具栏按钮
TANGER_OCX_OBJ.AddCustomToolButton("全屏缩放", -1); //添加自定义工具栏按钮
}
function AddFullScreenCustomToolButton() //添加全屏状态下的自定义工具栏
{
TANGER_OCX_OBJ.CustomToolBar=true;
TANGER_OCX_OBJ.AddCustomToolButton(CreateSpaceString(false), -1); //添加自定义工具栏按钮
TANGER_OCX_OBJ.AddCustomToolButton("保存文档", 0); //添加自定义工具栏按钮
TANGER_OCX_OBJ.AddCustomToolButton("关闭痕迹保留", 1); //添加自定义工具栏按钮
TANGER_OCX_OBJ.AddCustomToolButton("全屏缩放", -1); //添加自定义工具栏按钮
}
function SetButtionVisable(IsNoramalShow) //设置按钮的可用及可见状态
{
for(i=0;i<ButtonNum*2;i++)
{
if(IsNoramalShow)
{
TANGER_OCX_OBJ.SetCustomToolButtonStatus(i,(i==0||i>=ButtonNum)?false:true,(i>=ButtonNum)?false:true);
}else{
TANGER_OCX_OBJ.SetCustomToolButtonStatus(i,(i>=0&&i<=ButtonNum)?false:true,(i>=0&&i<ButtonNum)?false:true);
}
}
}
function CustomToolBarCom(btnIdx) //自定义按钮事件触发后执行的方法
{
if (0 == btnIdx) {
}else if (1 == btnIdx ||btnIdx==ButtonNum+1 ) {
alert(btnIdx);
} else if (3 == btnIdx ||btnIdx==ButtonNum+3 ) {
TANGER_OCX_OBJ.FullScreenMode=!TANGER_OCX_OBJ.FullScreenMode;
}else{
alert(btnIdx);
}
}
</script>
</head>
<body onload='init()' sroll="no">
<div id="officecontrol" class="officecontrol" >
<script type="text/javascript" src="officecontrol/ntkoofficecontroldemo.js"></script>
</div>
<script language="javascript" for="TANGER_OCX" event="OnCustomToolBarCommand(btnIdx)">
CustomToolBarCom(btnIdx);
</script>
<script language="javascript" for="TANGER_OCX" event="OnScreenModeChanged(IsFullScreenMode)">
SetButtionVisable(!IsFullScreenMode);
</script>
</body>
</html>
