MIMS 屏幕分割方案（基于 dijit.layout.SplitContainer）

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 待分割的区域