业务系统设计之三：系统主控设计（下）

      关于业务系统设计之系统主控设计，前一篇文章里已经将整个流程走了一便，最终开发出来的案例运行效果如下图：

                        

      本文将深入到系统主控的开发实现上，层层分析系统主控的各部分。首先从创建选项标签开始，通过点击菜单项来创建或选择一个已存在的选项标签，RadMenu和RadTabstrip控件对客户端事件的支持很强大，我们可以通过他的客户端事件去创建一个选项标签、选中一个存在的标签和关闭标签等等。

*程序功能：RadMenu客户端单击事件
*开发日期：2008-11-08 Beniao
*参数说明：
*          sender:执行请求的当前对象
*          eventArgs:当前对象的事件
*------------------------------------------------
*>>>>>直接使用硬参数,Url值为相对路径(不加任何前缀修饰)
*/
function OnClientClick(sender, eventArgs)
{
    var value = eventArgs.Item.Value;  //隐藏Url
    var text = eventArgs.Item.Text;     //显示文本

    //设置容器高度
    SetContentHeight();
    //关闭菜单项
    CloseItem(sender, eventArgs);
    
    //是否为首节点
    if(IsFirstTab(value))
    {
        //显示当前页签    
        DisplayCurrentTab(text);
        return;
    }
    
    if(value != '#')
    {
        //存在则直接显示(即实现选中)
        if(IsExsitTab(value))
        {
            DisplayCurrentTab(text);
            eventArgs.Item.Blur();
        }
        else
        {
            //是否为动态创建的第一个Tab
            
            //不存在,创建新的
            CreateTabPage(value,text);
            eventArgs.Item.Blur();
        }
    }
}

      首先通过RadMenu控件的客户端事件参数获取到菜单项的文本和隐藏的URL值，因为系统主控一般有一个默认的首页，当在创建或选择的时候都需要判断下当前是否为默认的首页。

/*
*程序功能：是否为首节点
*开发日期：2008-11-08 20:15
*参数说明：
*          requestUrl:请求的Url
*/
function IsFirstTab(requestUrl)
{
    var flag = false;
    if(requestUrl == "")
        return flag;
    
    if(requestUrl.toLowerCase() =="First.aspx".toLowerCase())
    {
        flag = true;
    }
    
    return flag;
}

      如果当前页不是首页，则需要判断当前所选的菜单项的隐藏URL值是不是为“#”，数据库中的设计为如果是"#"则代表是顶层菜单项，否则则创建新的选项标签。这里又需要注意，如果将要创建的选项已经存在则选中就OK，如果不存在则创建。

/*
*程序功能：判断当前页签是否存在
*开发日期：2008-11-08 10:20
*参数说明：
*          requestUrl:请求的Url
*/
function IsExsitTab(requestUrl)
{
    var flag = false;
    var tabStrip = <%=RadTabStripMain.ClientID %>;
    
    var ofrms = divMain.childNodes;
    var count = ofrms.length;
    
    for (var i = 0; i < count; i++)
    {
        //if(i == 1) continue;
        
        var frmID = ofrms[i].id;
        var index = GetIndex(frmID);
        
        var value = tabStrip.Tabs[index].Value;
        
        if(value.toLowerCase() == requestUrl.toLowerCase())
        {
            flag = true;
            break;
        }
    }
    
    return flag;
}

/*
*程序功能：显示当前页签
*开发日期：2008-11-08 10:20
*参数说明：
*          text:Tab上显示的文本内容
*/
function DisplayCurrentTab(text)
{
    var tab = <%=RadTabStripMain.ClientID %>.FindTabByText(text);
    
    if(tab)
    {
        tab.SelectParents();
    }
}

      按照上面的代码则实现了判断是否为默认页---当前项是否存在---显示已经存在的选项标签。那要创建新的该怎么实现呢？这里首先需要弄清楚一个规则，实现多选项标签是利用的RadTabstrip控件的标签功能，而其下是通过iframe嵌入的一个页面，这个页面通过动态创建iframe包含到主控台上。其中每一个iframe的命名为：frm+一个数字(从0开始)，如果要创建新的iframe则首先将现在的最大“frm数字”中的数字取出来然后加1，来作为新的选项标签的iframe的ID。

/*
*程序功能：创建一个新的页签
*开发日期：2008-11-08 10:45
*参数说明：
*          value:请求的Url
*          text:显示的文本
*/
function CreateTabPage(requestUrl,text)
{
    var tabStrip = <%=RadTabStripMain.ClientID %>;
    var number = GetMaxNumber(tabStrip);
    
    //动态创建选项卡
    var li = document.createElement("li");
    li.id='tab' + number;
    var a = document.createElement('a');
    a.id = 'Id' + number;
    li.appendChild(a);
    
    var span = document.createElement('span');
    span.className = "wrap";
    a.appendChild(span);
    
    var span1 = document.createElement('span');
    span1.className = "innerWrap";
    
    var image = document.createElement('img');
    image.src="Images/close.gif";
    image.attachEvent("onclick",OnCloseTab);
    image.attachEvent("onmouseover",function(){HightLight(image);});  //鼠标移入
    image.attachEvent("onmouseout",function(){Normal(image);});       //鼠标移出  
    image.alt="关闭";
    
    span1.appendChild(image);
    span1.appendChild(document.createTextNode(text));
    a.firstChild.appendChild(span1);
    
    tabStrip.ChildStripDomElement.appendChild(li);
    
    var tabObject = tabStrip.CreateTabObject(tabStrip,li.firstChild,number);
    tabObject.Value = requestUrl;  //Modify by Beniao at 2008-11-07 14:10
    
    tabObject.Text = text;
    tabObject.Initialize();
    
    //为当前页签选项创建一个iframe并添加到界面上
    CreateDivAppend(requestUrl,number);
    
    //选中当前页签选项
    var sid = "Id" + number;
    var stab = tabStrip.FindTabById(sid);
    stab.Select();
    
    SetIndex(tabStrip, number);
    SetImage(tabStrip, tabObject);
}

      通过JavaScript动态的创建一个RadTabstrip控件的页签选项，然后又动态的创建一个DIV和iframe并将指定的页面包含到iframe中。

/*
*程序功能：查找DIV对象(divMain),并根据参数新创建一个iframe对象追加到divMain的子节点上
*开发日期：2008-11-07 09:32
*参数说明：
*          requestUrl:请求Url
*          index:索引号
*/
function CreateDivAppend(requestUrl,index)
{
    var divObject = document.getElementById("divMain");
    
    //根据Url创建iframe
    var oForm = CreateForm(requestUrl,index);
    //将新创建的iframe追加到divMain的子节点中
    divObject.appendChild(oForm); 
}

/*
*程序功能：创建一个特定请求Url的iframe对象
*开发日期：2008-11-08 11:05
*参数说明：
*          requestUrl:请求Url
*          index:索引号
*/
function CreateForm(requestUrl,index)
{
    var oFrom = document.getElementById("frm0");
    
    var oFromNew = document.createElement("iframe");
    oFromNew.id = "frm" + index;    //新创建的iframe的唯一id
    oFromNew.src = requestUrl;
    oFromNew.style.position = "absolute";
    oFromNew.style.setAttribute("left","0px");
    oFromNew.style.setAttribute("top","0px");
    oFromNew.style.setAttribute("width","100%");
    oFromNew.style.setAttribute("height","100%");
    oFromNew.style.setAttribute("z-index",index);
    oFromNew.setAttribute("frameBorder","0");
    oFromNew.setAttribute("marginHeight","0");
    oFromNew.className="tabFrm";
    
    return oFromNew;
}

      创建和选择已存在的页签选项都已经完成，这一切都是通过菜单驱动完成的。用户自己选择已存在的其中一页签选项怎么实现的呢？这个功能很简单实现，RadTabstrip控件有这样的一个客户端API，只要实现这样一个方法就可以完成功能。

/*
*程序功能：页签的选择事件
*开发日期：2008-11-08 11:30
*参数说明：无参数
*修改时间：2008-11-08 17:20
*/
function OnTabSelected()
{
    //debugger;
    var tabStrip = <%=RadTabStripMain.ClientID %>;
    //当前所选择的页签
    var selectTab = tabStrip.SelectedTab;
     
    //如:Default.aspx
    var requestUrl = selectTab.Value;
    
    var oForms = divMain.childNodes;
    var count = oForms.length;
    
    //将第二个选项的关闭X图片处理掉
    for ( var i = 0; i< count; i++)
    {
       //. 
    } 
    
    for (var i = 0; i < count; i++)
    {
        //当前选择的Tab相对应的iframe的id
        var formID = oForms[i].id;
        
        var index = GetIndex(formID);   
        
        if(document.getElementById(formID) != undefined)
        {
            if(document.getElementById(formID).getAttribute('src') != requestUrl)
            {
                document.getElementById(formID).style.display='none';
            }
            else
            {
                document.getElementById(formID).style.display='';
            }
        }    
    }
    
    SetIndex(tabStrip, index);
    SetImage(tabStrip, selectTab);
}

      当我么双击页签选项的时候可实现关闭页签，这一功能也可以通过控件提供的客户端API来实现，实现API功能的方法就OK。

/*
*程序功能：鼠标双击关闭当前页签
*          首页是不允许关闭的
*开发日期：2008-11-08 16:30
*参数说明：无参数
*/
function OnDoubleClick()
{
    if(!IsDoubleClickClose())
    {
        RemoveTab();
    }
}

/*
*程序功能：鼠标双击是否允许关闭当前页签(默认为不可关闭)
*          首页是不允许关闭的
*开发日期：2008-11-08 16:35
*参数说明：无参数
*/
function IsDoubleClickClose()
{
    var flag = false;
    var selectedTab = <%=RadTabStripMain.ClientID %>.SelectedTab;
    var value = selectedTab.Value;
    
    if(value == 'Default.aspx')
    {
        flag = true;
    }
    return flag;
}

       

       其他的就是设置一些效果的功能开发了，这全是一些脚本的开发，主要就是利用RadMenu和RadTabstrip控件的客户端API来实现各种功能，详细也没有什么好介绍的，本文几乎全是代码短，不过我相信对大家有所帮助。

      文中只是贴出了比较关键的代码以作参考，如果有什么不明白之处，请大家下载源代码了解。 

      本文示例代码下载 

版权说明

  本文属原创文章，欢迎转载，其版权归作者和博客园共有。  

  作      者：Beniao

 文章出处：http://beniao.cnblogs.com/  或  http://www.cnblogs.com/