l 提供用户自定义屏幕分割模板的功能。
l 提供为节目多屏播出，为每个屏幕设置屏幕模板功能。
屏幕分割模板管理的主体UI如下图所示：
操作说明：
· 点击屏幕左侧矩形方框选中一个区域 被选中颜色为Yellow
· “被选中区域”处显示宽或高数值、水平或垂直方向。修改选中区域的的宽或高并更新修改
· 执行提交 系统把上图左侧显示区域的内容组织成JSON格式并通过DWR提交到系统中
支持任意的分割
源码片段：
<script type="text/javascript">
dojo.require("dijit.layout.SplitContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
dojo.require("dijit.form.Button");
dojo.require("dijit.TitlePane");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
//var CURRENTPANE;
var templateString = "<span SCType='cell'><a href=# οnclick=javascript:SplitComponent.divide('CURRENTPANE','horizontal');>水平</a> | <a href=# οnclick=SplitComponent.divide('CURRENTPANE','vertical');>垂直</a></span>";
/**
* 【注意】SplitComponent 依据dojo1.0版本构建，需重点阅读dojo1.0的dijit.layout.SplitContainer对象方能读懂SplitComponent
*/
if (!SplitComponent)
var SplitComponent = {};
// 最外层的容器的Id
SplitComponent.id = "container";
// pane 被选中的颜色
SplitComponent.selectedColor = "yellow";
// 被选中的pane
SplitComponent.selectedNode;
// pane初始颜色
SplitComponent.initColor = "#FFF";
// 鼠标移动颜色
SplitComponent.slideColor ="#F8FEF2";//备选颜色：F6F7FA,D9E2EA,EDF0F3,EDF0FA
// 屏幕显示最大宽度和高度
SplitComponent.maxWidth = 512;
SplitComponent.maxHeight = 384;
// 像素的倍数,2表示屏幕显示比例50%，1像素表示2像素
SplitComponent.multiple = 2;
// sizer宽度，像素值
SplitComponent.sizerWidth = 6;
// 日志
if (!SplitComponent.LOGGER)
SplitComponent.LOGGER = {};
// 日志Debug级别
SplitComponent.LOGGER.DEBUG = false;
// container 内左上侧距离屏幕左上的距离，LEFT表示距离左侧的距离，TOP表示距离屏幕上侧的距离
SplitComponent.LEFT, SplitComponent.TOP;
if (!SplitComponent.Util)
SplitComponent.Util = {};
SplitComponent.Util.isIE = function(){
return (window.navigator.appName == "Microsoft Internet Explorer");
}
SplitComponent.Util.isNetscape = function(){
return (window.navigator.appName == "Netscape");
}
/**
* ContentPane的相对于Container的内左上的坐标的实际（actual）值 以及ContentPane的宽高实际（actual）值; pane position size<br><br>
* [<b>注意</b>]
* <ul>
* <li>内左上指Container显示区域的左上，不包括Container的边框</li>
* <li>T.coords(DomNode,includeScroll)返回{l,t,width,height,x,y},其中的x、y指的DomNode的外左上距离屏幕的左上的x和y坐标值。</li>
* </ul>
* @param {Object} l 左left
* @param {Object} t 上top
* @param {Object} w 宽width
* @param {Object} h 高height
*/
SplitComponent.PPS = function(l, t, w, h){
this.left = l;
this.top = t;
this.width = w;
this.height = h;
};
/**
* [<b>功能</b>]<br>
* 取出SplitContainer中的所有ContentPane的 坐标位置和尺寸的实际值
* <br>
* [<b>Example</b>]<br>
var container = dijit.byId("container");<br>
var ppsa = SplitComponent.getPPSA(container);<br>
* @param {Object} splitC dijit.layout.SplitContainer
*/
SplitComponent.getPPSA = function(splitC){
function createPPSA(splitC){
if (typeof splitC == "string") {
splitC = dijit.byId(splitC);
}
if (!splitC.getChildren() || !splitC.getChildren().length) {
return;
}
var childs = splitC.getChildren();
for (var i = 0; i < childs.length; i++) {
if (childs[i].orientation) {// splitC.getChildren() 为SplitContainer;
// 递归调用;
createPPSA(childs[i]);
}
else {
// a ContentPane;
PPS_A.push(SplitComponent.getPanePosAndSize(childs[i], splitC));
}
}
}
var PPS_A = [];
createPPSA(splitC);
return PPS_A;
};
/**
* [<b>功能</b>]获得某一个dijit.layout.ContentPane 真实的坐标位置和尺寸,相对于根容器container的内侧左上
* @param {Widget} child Widget
* @param {Widget} parWidget Parent Widget
* @return {Object PPS} pane pos and size.
*/
SplitComponent.getPanePosAndSize = function(/* widget */pane,/* Parent Widget ?*/ parWidget){
var oDomNode = pane.domNode;
//var originPos = dojo.coords(oDomNode, true);
var originPos = T.coords(oDomNode, true);
// DEBUG
if (SplitComponent.LOGGER.DEBUG) {
alert("originPos.x[" + originPos.x + "]:originPos.y[" + originPos.y + "]");
}
if (!parWidget) {
parWidget = dijit.byNode(oDomNode.parentNode);
}
var styleNode = oDomNode.style;
var t, l;
t = parseInt(originPos.y) - parseInt(SplitComponent.TOP);
l = parseInt(originPos.x) - parseInt(SplitComponent.LEFT);
if (parWidget.isHorizontal) {
// horizontal;
return new SplitComponent.PPS(l, t, parseInt(styleNode.width), parseInt(styleNode.height));
}
else {
// vertical;
return new SplitComponent.PPS(l, t, parseInt(styleNode.width), parseInt(styleNode.height));
}
};
/**
* 从根容器container的innerHTML中删除所有的pane的span、a元素
*
*/
SplitComponent.clearAllPaneInnerHTML = function(){
var container = dijit.byId("container");
// TODO 取出container中的内容;
var containerInnerHTML = container.domNode.innerHTML;
if (SplitComponent.LOGGER.DEBUG) {
alert("初始字符串：/r/n" + containerInnerHTML);
}
// wrap所有的Span内容(ContentPane的内容)
var spanNode = dojo.byId("wrap").getElementsByTagName("span");
for (var i = 0; i < spanNode.length; i++) {
var start = containerInnerHTML.search(/<span/i);// 第一个<span> 的index
var end = containerInnerHTML.search(/<//span>/i);// 第一个</span> 的index
var src = containerInnerHTML.substring(start, (end + "</span>".length));// <span> </span>之间(含<span></span>)的字符串
containerInnerHTML = containerInnerHTML.replace(src, "").replace(/yellow/gi, SplitComponent.initColor);
}
if (SplitComponent.LOGGER.DEBUG) {
alert("结果：/r/n" + containerInnerHTML + "/r/n字符总数：" + containerInnerHTML.length);
}
return containerInnerHTML;
}
/**
* pane分割.该方法用sizer把pane分割为水平或垂直的两部分<br><br>
* [<b>注意</b>]<br>
* 设置 dijit.layout.ContentPane.SCType = "ContentPane"
* 用ContentPane的id替换"CURRENTPANE"
*
* @param {Object} paneNode 待分割的区域