panel.option

最新推荐文章于 2023-09-20 17:14:01 发布
原创最新推荐文章于 2023-09-20 17:14:01 发布 · 327 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#function #null #div #url #delete #module
本文介绍了一个用于网页中管理页面标签的选项组件实现方法，包括显示、隐藏、重命名、删除等操作，支持不同浏览器环境。
/// 
/// 
//页面标签选项类
ND.Panel.Options = function(panelID)
{
    var panel = document.getElementById(panelID);
    var options = ND.Panel.Options.Create(panelID);
    //当前显示页面，则允许添加模块
    document.getElementById("panelAddModule").style.display = panelID == ND.Panel.ShowPanelID ? "block" : "none";
    document.getElementById("panelUpdateLayout").style.display = panelID == ND.Panel.ShowPanelID ? "block" : "none";
    options.style.display = "block";
    
    var panelEvt = document.getElementById(panelID + "_options");
    var left = ND.Offset.GetLeft(panelEvt);
    var top = ND.Offset.GetTop(panelEvt) + panelEvt.offsetHeight;

    if(left + options.offsetWidth >= document.body.offsetWidth - 20)
    {
        //防止超出浏览器右部
        left = document.body.offsetWidth  - options.offsetWidth - 20;
    }
    
    options.style.left = left + "px";
    options.style.top = top + "px";
    
    if(ND.Brower.IsIE)
    {
        document.attachEvent("onmouseup", ND.Panel.Options.Bound);
    }
    else
    {
        document.addEventListener("mouseup", ND.Panel.Options.Bound, false);
    }
    
    panelEvt = null;
    panel = null;
    options = null;
}


//创建选项
ND.Panel.Options.Create = function(panelID)
{
    var options = document.getElementById("panelOptions");
    if(options)
    {
        options.setAttribute("panel", panelID);
        return options;
    }
    
    options = document.createElement("div");
    options.id = "panelOptions";
    options.onselectstart = function() {return false};
    options.setAttribute("panel", panelID);
    var str = new ND.String();
    str.Append("");
    str.Append("
");
    str.Append("");
    str.Append("");
    str.Append("");
    str.Append("");
    str.Append("");
    var li = "
{2}";
    str.AppendFormat(li, "panelRename", "ND.Panel.Options.Rename(this, event)", "重命名");
    str.AppendFormat(li, "panelDelete", "ND.Panel.Options.Delete(this, event)", "删除");
    str.AppendFormat(li, "panelAddModule", "var option=new ND.Option();option.Create('Module');ND.Panel.Options.Hidden()", "添加模块");
    str.AppendFormat(li, "panelUpdateLayout", "var option=new ND.Option();option.Create('Layout');ND.Panel.Options.Hidden()", "布局设置");
    str.AppendFormat(li, "panelIconChange", "ND.Panel.Options.ChangeIcon(this, event)", "更改图标");
    str.AppendFormat(li, "panelOptionsClose", "ND.Panel.Options.Hidden()", "关闭选项组");
    str.Append("");
    options.innerHTML = str.toString();
    document.body.appendChild(options);
    
    try
    {
        return options;
    }
    finally
    {
        options = null;
        str = null;
        li = null;
    }
}

//改变颜色
ND.Panel.Options.ChangeStyle = function(styleType)
{
    var options = document.getElementById("panelOptions");
    var panel = document.getElementById(options.getAttribute("panel"));
    panel.setAttribute("styleType", styleType);
    var showState = panel.getAttribute("showState");
    var className = "panelTabs " + ND.Panel.GetClass(styleType, showState);
    
    if(className != panel.className)
    {
        panel.className = className;
        
        var data = {};
        data.panelCode = panel.getAttribute("panelCode");
        data.styleType = styleType;
        ND.Ajax.Request({
            url: "Handle/panel.aspx?action=ChangeStyle",
            success: ND.Panel.Options.ChangeStyle.Success,
            param: data
          });
    }
    
    options = null;
    panel = null;
}

//变更颜色样式成功
ND.Panel.Options.ChangeStyle.Success = function(result)
{
    result = result.responseXML;
    ND.Success.Check(result);
}

//重命名
ND.Panel.Options.Rename = function(el, evt)
{
    ND.Panel.ChangeText(el.parentNode.parentNode.getAttribute('panel'), evt);
    ND.Panel.Options.Hidden();
}

//删除
ND.Panel.Options.Delete = function()
{
    if(document.getElementById("panelTabs").childNodes.length <= 2)
    {
        //只剩一个标签页
        alert("您不能删除唯一的标签页");
        return;
    }
    
    var panelID = document.getElementById("panelOptions").getAttribute("panel");
    var title = document.getElementById(panelID + "_title").firstChild;
    var confirmText = title.tagName == "INPUT" ? title.value : title.innerHTML;
    title = null;
    if(confirm("您确认要删除 {0} 标签页吗？".Format(confirmText)) == 0)
    {
        return;
    }
    
    var panel = document.getElementById(panelID);
    panel.parentNode.removeChild(panel);
    
    //标签对应页存在，删除页
    var page = document.getElementById(panelID.replace("panel", "page"));
    if(page)
    {
        page.parentNode.removeChild(page);
    }
    
    //删除页为当前显示页，变更第一页为当前显示页
    if(panelID == ND.Panel.ShowPanelID)
    {
        ND.Panel.ShowPanelID = null;
        ND.Panel.ChangePanel(document.getElementById("panelTabs").firstChild.id);
    }
    
    var data = {};
    data.panelCode = panel.getAttribute("panelCode");
    ND.Ajax.Request({
        url: "Handle/panel.aspx?action=Delete",
        success: ND.Panel.Options.Delete.Success,
        param: data
      });
    
    ND.Panel.Options.Hidden();
    
    panel = null;
    page = null;
}
//删除成功
ND.Panel.Options.Delete.Success = function(result)
{
    result = result.responseXML;
    ND.Success.Check(result);
}

//创建图标集
ND.Panel.Options.ChangeIcon = function()
{
    var changeIcon = document.getElementById("panelIconChangeBar");
    if(changeIcon)
    {
        changeIcon.style.display = changeIcon.style.display == "none" ? "block" : "none";
        return;
    }
    
    var div = document.createElement("div");
    div.id = "panelIconChangeBar";
    div.innerHTML = "读取中,请稍后...";
    document.getElementById("panelOptions").appendChild(div);
    changeIcon = null;
    div = null;
    
    function success(result)
    {
        
        document.getElementById("panelIconChangeBar").innerHTML = result.responseText;
    }
    
    ND.Ajax.Request({url: "icon.aspx", param: {size: 9, type: 'panel'}, success: success});
}

//更改图标
ND.Panel.Options.ChangeIcon.Change = function(el)
{
    var panelID = document.getElementById("panelOptions").getAttribute("panel");
    var icon = document.getElementById(panelID + "_icon");
    var iconLink = el.getAttribute("icon");
    if(icon.getAttribute("oldIcon") != iconLink)
    {
        icon.setAttribute("oldIcon", iconLink);
        icon.style.backgroundImage = "url(" + iconLink + ")";
        
        var data = {};
        data.panelCode = document.getElementById(panelID).getAttribute("panelCode");
        data.icon = iconLink;
        ND.Ajax.Request({
            url: "Handle/panel.aspx?action=ChangeIcon",
            success: ND.Panel.Options.ChangeIcon.Success,
            param: data
          });
    }
}

//更改图标成功
ND.Panel.Options.ChangeIcon.Success = function(result)
{
    result = result.responseXML;
    ND.Success.Check(result);
}

//判断范围
ND.Panel.Options.Bound = function(evt)
{
    evt = evt || window.event;
    var x = evt.x ? evt.x + document.documentElement.scrollLeft : evt.pageX;
    var y = evt.y ? evt.y + document.documentElement.scrollTop : evt.pageY;
    
    var options = document.getElementById("panelOptions");
    var left = ND.Offset.GetLeft(options);
    var right = left + options.offsetWidth;
    var top = ND.Offset.GetTop(options);
    var bottom = top + options.offsetHeight;

    if(x < left || x > right || y < top || y > bottom)
    {
        ND.Panel.Options.Hidden();
    }
    options = null;
}

//隐藏
ND.Panel.Options.Hidden = function()
{
    var options = document.getElementById("panelOptions");
    if(options)
    {
        options.style.display = "none";
        if(ND.Brower.IsIE)
        {
            document.detachEvent("onmouseup", ND.Panel.Options.Bound);
        }
        else
        {
            document.removeEventListener("mouseup", ND.Panel.Options.Bound, false);
        }
        options = null;
    }
}