随笔 - 235  文章 - 0  评论 - 246  阅读 - 84万

IE10标准模式不支持HTC (Html Components) ，升级重写Htc原有代码之三: mpc.htc选项卡组件

有了之前两文（ 事件，自定义属性）的积累后，就可以对mpc.htc选项卡组件进行升级改造了。

关于这个mpc选项卡的介绍，可以参考msdn上的：mpc Behavior　http://technet.microsoft.com/zh-cn/ms531585

修改的思路还是以Mpc.htc中代码为基础，直接把mpc.htc改为js，然后再逐一修改升级里面的代码。

主要改动如下：

1.将PROPERTY全部改为普通的js变量。
2.去掉无用的Event, Method。
3.添加一个DoBeforeInit()方法，在原DoInit()方法前执行。
4.添加一个切换tab页的ChangeTab()方法。
5.修改原有的DoInit, MakeContent, MakeTab等方法。

最终修改完成后的ie10_mp2c_htc.js代码如下：

复制代码
View Code 
<!-- ---------------------------------------------------------------------
//
//  Copyright 2000 Microsoft Corporation.  All Rights Reserved.
//
//  File:        mpc.htc
//
//  Description:    This behavior allows web authors to a tabbed dialog
//            style control for grouping information on a page.
//
//
//-------------------------------------------------------------------- -->


//+----------------------------------------------------------------------------
//
//  Global Variables
//
//-----------------------------------------------------------------------------
var selectedIndex;  
var CumulativeTabWidth 
var ContainerHeight
var TABTEXT
var TABTITLE

var StyleInfo;
var StyleRules = new Array();
var iIndex = null;
var bReady = false;
var ThisObject;
var element;
var parentElement;
var uniqueID;

//+----------------------------------------------------------------------------
//
//  Function:       DoInit
//
//  Description:    Calls functions, set variables, and attaches events to
//                  initialize behavior
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------
function DoBeforeInit() {

    var containers= document.getElementsByTagName("mpc:container");
    for(i=0;i<containers.length;i++)
    {
        tagName = "container";
        ThisObject = containers[i];
        DoInit();
    }
    
    var pages = document.getElementsByTagName("mpc:page")
    for(i=0;i<pages.length;i++)
    {    
        tagName = "page";
        ThisObject = pages[i];
        element = pages[i];
        parentElement = pages[i].parentElement;
        TABTEXT = pages[i].getAttribute("tabtext");
        TABTITLE = pages[i].getAttribute("tabtitle");
        innerHTML = pages[i].innerHTML;       
        DoInit();
    }
}

function DoInit() {
    //if container....
    if(tagName=="container")
    {
        ThisObject.style.position = "absolute";
        CumulativeTabWidth = -1;
        if(selectedIndex==null) selectedIndex = 1;
        SetDefaults();
        ContainerHeight = ThisObject.style.posHeight;
    }
    
    //*************************************************************************
    //*************************************************************************
    //if page.....
    if (tagName == "page") {      
        
        var iIndex = null;
        for(c=0; c<parentElement.children.length; c++)
        {
            if (element == parentElement.children(c)) {               
                iIndex = c + 1;
            }
        }  

        uniqueID="ms__id" + iIndex;

        //create and insert the HTML that is the content area for the tab
        MakeContent();
    
        //determine the width of this tab, using a simple algorithm (fairly reliable,
        //since the font family and size are restricted
        var factor = 1;

        if (/.*[\u4e00-\u9fa5]+.*$/.test(TABTEXT)) {
            factor = 18;
        }
        else {
            factor = 7;
        }

        var iWidth = factor * parseInt(TABTEXT.length);   
       
        //create and insert the HTML that is the tab
        if (parentElement.CumulativeTabWidth==null)
          parentElement.CumulativeTabWidth = -1;

        MakeTab(parentElement.CumulativeTabWidth + 1, iWidth+6, TABTEXT, TABTITLE, iIndex);
    
        //reset CumulativeTabWidth
        parentElement.CumulativeTabWidth = parentElement.CumulativeTabWidth + iWidth + 18;

        //create a stylesheet for the tab
        CreatePageStyleSheet();
      
        //determine which tab in the collection this one is.  If last, do some configuring
       var Tabs = window.document.all("Tab");
        
        if(parentElement.children.length == 1)
        {
            SelectTab();
            SelectContent();
        }
        else {
            if(Tabs.length >= parentElement.children.length) 
            {
                SelectTab();
                SelectContent();
            }    
        }
    }       

    attachEvent("onpropertychange", DoPropChange); 
    bReady = true;
}

//+----------------------------------------------------------------------------
//
//  Function:       ChangeTab
//
//  Description:    Change One tab to another tab
//
//  Arguments:      Index
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------
function ChangeTab(Index)
{
    selectedIndex = Index;
    DeselectTab();
    SelectTab();
    DeselectContent();
    SelectContent();
}

//+----------------------------------------------------------------------------
//
//  Function:       MakeContent
//
//  Description:    Makes Content Area that holds content
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------
function MakeContent(iIndex)
{   
    var sHTML = '<DIV onclick="window.event.cancelBubble = true" CLASS=DormantContent_' + uniqueID + '>' + innerHTML + '</DIV>';
    innerHTML =  "";
    element.innerHTML = sHTML;
}
//+----------------------------------------------------------------------------
//
//  Function:       MakeTab
//
//  Description:    Makes Tabs
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function MakeTab(iLeft, iWidth, sLabel, sTitle, iIndex)
{
    var sTopDisplay = null;
    var sBottomDisplay = null;

    if (parentElement.style.tdTabOrientation != "" && parentElement.style.tdTabOrientation.toUpperCase() == "TOP") {
        sTopDisplay = "inline";
        sBottomDisplay = "none";
    }

    if (parentElement.style.tdTabOrientation != "" && parentElement.style.tdTabOrientation.toUpperCase() == "BOTTOM") {
        sTopDisplay = "none";
        sBottomDisplay = "inline";
    }

    var sHTML = "";
    sHTML = sHTML + '<TABLE ID=Tab onclick="ChangeTab(' + iIndex + ')" CLASS=DormantTab_' + uniqueID + ' index=' + iIndex + ' CELLPADDING=0 CELLSPACING=0 STYLE="left:' + iLeft + 'px">';
    sHTML = sHTML + '<TR STYLE="display:' + sTopDisplay + '">';
    sHTML = sHTML + '<TD STYLE="width:1px; height:1px" CLASS=Transparent_' + uniqueID + '></TD>';
    sHTML = sHTML + '<TD STYLE="width:1px" CLASS=Transparent_' + uniqueID + '></TD>';
    sHTML = sHTML + '<TD CLASS=LightShadow_' + uniqueID + '></TD>';
    sHTML = sHTML + '<TD STYLE="width:1px" CLASS=Transparent_' + uniqueID + '></TD>';
    sHTML = sHTML + '<TD STYLE="width:1px" CLASS=Transparent_' + uniqueID + '></TD>';
    sHTML = sHTML + '</TR>';
    sHTML = sHTML + '<TR STYLE="display:' + sTopDisplay + '">';
    sHTML = sHTML + '<TD CLASS=Transparent_' + uniqueID + ' STYLE="height:1px"></TD>';
    sHTML = sHTML + '<TD CLASS=LightShadow_' + uniqueID + '></TD>';
    sHTML = sHTML + '<TD CLASS=Tab_' + uniqueID + '></TD>';
    sHTML = sHTML + '<TD CLASS=DarkShadow_' + uniqueID + '></TD>';
    sHTML = sHTML + '<TD CLASS=Transparent_' + uniqueID + '></TD>';
    sHTML = sHTML + '</TR>';
    sHTML = sHTML + '<TR>';
    sHTML = sHTML + '<TD CLASS=LightShadow_' + uniqueID + '></TD>';
    sHTML = sHTML + '<TD CLASS=Tab_' + uniqueID + '></TD>';
    sHTML = sHTML + '<TD CLASS=Tab_' + uniqueID + ' TITLE="' + sTitle + '" STYLE="font:9pt MS Sans Serif; width:' + iWidth + 'px; height:20px; padding-left:4px; padding-right:4px">' + sLabel + '</TD>';
    sHTML = sHTML + '<TD CLASS=MediumShadow_' + uniqueID + '></TD>';
    sHTML = sHTML + '<TD CLASS=DarkShadow_' + uniqueID + '></TD>';
    sHTML = sHTML + '</TR>';
    sHTML = sHTML + '<TR STYLE="display:' + sBottomDisplay + '">';
    sHTML = sHTML + '<TD CLASS=Transparent_' + uniqueID + ' STYLE="height:1px"></TD>';
    sHTML = sHTML + '<TD CLASS=LightShadow_' + uniqueID + '></TD>';
    sHTML = sHTML + '<TD CLASS=Tab_' + uniqueID + '></TD>';
    sHTML = sHTML + '<TD CLASS=DarkShadow_' + uniqueID + '></TD>';
    sHTML = sHTML + '<TD CLASS=Transparent_' + uniqueID + '></TD>';
    sHTML = sHTML + '</TR>';
    sHTML = sHTML + '<TR STYLE="display:' + sBottomDisplay + '">';
    sHTML = sHTML + '<TD STYLE="width:1px; height:1px" CLASS=Transparent_' + uniqueID + '></TD>';
    sHTML = sHTML + '<TD STYLE="width:1px" CLASS=Transparent_' + uniqueID + '></TD>';
    sHTML = sHTML + '<TD CLASS=DarkShadow_' + uniqueID + '></TD>';
    sHTML = sHTML + '<TD STYLE="width:1px" CLASS=Transparent_' + uniqueID + '></TD>';
    sHTML = sHTML + '<TD STYLE="width:1px" CLASS=Transparent_' + uniqueID + '></TD>';
    sHTML = sHTML + '</TR>';
    sHTML = sHTML + '</TABLE>';
    
    element.insertAdjacentHTML('BeforeEnd', sHTML);
}


//+----------------------------------------------------------------------------
//
//  Function:       CreatePageStyleSheet
//
//  Description:    
//
//  Arguments:      none
//
//  Returns:        nothing
//
//+----------------------------------------------------------------------------

function CreatePageStyleSheet()
{
    //  Create Page StyleSheet page
    element.document.body.MPCPageStyleSheet = element.document.createStyleSheet();
    StyleInfo = element.document.body.MPCPageStyleSheet;

    //get values of container background color and foreground color
    var sForeColor = parentElement.style.color + "\9\0";
    var sBackColor = parentElement.style.background + "\9\0";
    
    //determine value of iTop for placement of tabs
    var iTop = null;

    if(parentElement.style.tdTabOrientation !="" && parentElement.style.tdTabOrientation.toUpperCase() == "TOP") iTop = -22;
    if(parentElement.style.tdTabOrientation !="" && parentElement.style.tdTabOrientation.toUpperCase() == "BOTTOM") iTop = parentElement.style.posHeight - 2;
    

    StyleInfo.addRule(   '.Transparent_' + uniqueID, 'width:1px; height:1px; font-size:0px');
    StyleRules['Transparent'] = StyleInfo.rules[StyleInfo.rules.length-1].style;
    
    StyleInfo.addRule(   '.LightShadow_' + uniqueID, 'background:white; font-size:0px');
    StyleRules['LightShadow'] = StyleInfo.rules[StyleInfo.rules.length-1].style;
    
    StyleInfo.addRule(   '.MediumShadow_' + uniqueID, 'background:gray; font-size:0px');
    StyleRules['MediumShadow'] = StyleInfo.rules[StyleInfo.rules.length-1].style;
    
    StyleInfo.addRule(   '.DarkShadow_' + uniqueID, 'background:black; font-size:0px');
    StyleRules['DarkShadow'] = StyleInfo.rules[StyleInfo.rules.length-1].style;

    StyleInfo.addRule('.Tab_' + uniqueID, 'background:' + sBackColor + '; border-top:solid 1px white; height:50px; color:' + sForeColor);
    StyleRules['Tab'] = StyleInfo.rules[StyleInfo.rules.length-1].style;

    StyleInfo.addRule('.DormantTab_' + uniqueID, 'position:absolute; z-index:2; border-left:solid 1px white; border-top:solid 1px white; border-bottom:solid 1px white; border-right:solid 1 white;cursor:default');
    StyleRules['DormantTab'] = StyleInfo.rules[StyleInfo.rules.length-1].style;
    
    StyleInfo.addRule(   '.ActiveTab_' + uniqueID, 'position:absolute; z-index:4;  cursor:default');
    StyleRules['ActiveTab'] = StyleInfo.rules[StyleInfo.rules.length-1].style;
    
    StyleInfo.addRule(   '.DormantContent_' + uniqueID, 'position:absolute; visibility:hidden; top:3px; left:0px; background:silver');
    StyleRules['DormantContent'] = StyleInfo.rules[StyleInfo.rules.length-1].style;

    StyleInfo.addRule('.ActiveContent_' + uniqueID, 'position:absolute; top:15px; height:100%; width:100%; border-left:solid 1px white; border-bottom:solid 1px; border-right:solid 1 black; background:' + sBackColor + '; z-index:3');

    StyleRules['ActiveContent'] = StyleInfo.rules[StyleInfo.rules.length-1].style;

}



//+----------------------------------------------------------------------------
//
//  Function:       SetDefaults
//
//  Description:    Called during the initialization of the behavior.  Sets
//                  the defaults for custom CSS properties (calls the
//                  CustomDefault() function), regular CSS properties (the
//                  NormalDefault() function), and attribute/properties.
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function SetDefaults()
{
    if(tagName=="container")
    {
        CustomDefault('td--tab-orientation', 'tdTabOrientation', 'top');
        NormalDefault('width',   'auto');
        NormalDefault('height',   'auto');   
        NormalDefault('background',   'buttonface');
        NormalDefault('color',   'buttontext');
    }
}


//+----------------------------------------------------------------------------
//
//  Function:       CustomDefault
//
//  Description:    Sets the defaults for custom CSS properties and establishes
//                  a scriptable name for the property
//
//  Arguments:      sCSSName - the CSS name of the property
//                  sScriptName - the desired Scriptable name of the property
//                  sDefault - the desired default value
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function CustomDefault(sCSSName, sScriptName, sDefault)
{    
    if (ThisObject.currentStyle[sCSSName] == null)
    {
        ThisObject.style[sCSSName] = sDefault;
    }
    else ThisObject.style[sCSSName] = ThisObject.currentStyle[sCSSName];
    
    ThisObject.style[sScriptName] = ThisObject.style[sCSSName];  
}


//+----------------------------------------------------------------------------
//
//  Function:       NormalDefault
//
//  Description:    Sets the defaults for CSS properties by checking the
//                  currentStyle and style of the object against the IE
//                  default.
//
//  Arguments:      sCSSName - the CSS name of the property
//                  sIEDefault - the IE standard default of the property
//                  sDefault - the desired default of the property
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function NormalDefault(sCSSName, sDefault)
{
    if (ThisObject.style[sCSSName] == "" || ThisObject.style[sCSSName] == null)   
    {
        ThisObject.style[sCSSName] = sDefault;
    }
}


//+----------------------------------------------------------------------------
//
//  Function:       SelectTab
//
//  Description:    Selects the selected tab
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function SelectTab()
{
    var oContainer = null;
    if(tagName=="container") 
    {
       oContainer = element;
    }
    if(tagName=="page") 
    { 
       oContainer = parentElement;
    }
    
    //handle the possibility that selectedIndex is a string.  Change it to an integer.
    if(isNaN(parseInt(selectedIndex)))
    {
        //alert("oContainer.selectedIndex=" + selectedIndex);
        for(i=0; i<oContainer.children.length; i++)
        {
            if(oContainer.children(i).getAttribute("TABTEXT")==selectedIndex) 
            {
                selectedIndex = i + 1;
            }
        }
        if(isNaN(parseInt(selectedIndex))) selectedIndex = 1;
    }
    
    if(selectedIndex > oContainer.children.length)
    {       
        var TempClass = oContainer.children(0).children(1).getAttribute("class");
        TempClass = "ActiveTab" + TempClass.substring(TempClass.indexOf("_"), TempClass.length);
        oContainer.children(0).children(1).setAttribute("class") = TempClass;
        return;
    }
    
    var TempClass = oContainer.children(selectedIndex - 1).children(1).getAttribute("class");
    TempClass = "ActiveTab" + TempClass.substring(TempClass.indexOf("_"), TempClass.length);
    oContainer.children(selectedIndex - 1).children(1).className = TempClass;   
}

//+----------------------------------------------------------------------------
//
//  Function:       DeselectTab
//
//  Description:    Deselects the selected tab
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function DeselectTab() {
    var oContainer = null;
    if (tagName == "container") oContainer = element;
    if (tagName == "page") oContainer = parentElement;

    for (i = 0; i < oContainer.children.length; i++) {
        var TempClass = oContainer.children(i).children(1).className;
        TempClass = "DormantTab" + TempClass.substring(TempClass.indexOf("_"), TempClass.length);
        oContainer.children(i).children(1).className = TempClass;
    }
}

//+----------------------------------------------------------------------------
//
//  Function:       SelectContent
//
//  Description:    Selects the selected content page
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function SelectContent()
{
    var oContainer = null;
    if(tagName=="container") oContainer = element;
    if(tagName=="page") oContainer = parentElement;
    
    if(selectedIndex > oContainer.children.length)
    {
        var TempClass = oContainer.children(0).children(0).getAttribute("class");
        TempClass = "ActiveContent" + TempClass.substring(TempClass.indexOf("_"), TempClass.length);
        oContainer.children(0).children(0).className = TempClass;
        return;
    }
    
    var TempClass = oContainer.children(selectedIndex-1).children(0).getAttribute("class");
    TempClass = "ActiveContent" + TempClass.substring(TempClass.indexOf("_"), TempClass.length);
    oContainer.children(selectedIndex-1).children(0).className = TempClass;
}

//+----------------------------------------------------------------------------
//
//  Function:       DeselectContent
//
//  Description:    Deselects the selected tab
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function DeselectContent() {
    var oContainer = null;
    if (tagName == "container") oContainer = element;
    if (tagName == "page") oContainer = parentElement;

    for (i = 0; i < oContainer.children.length; i++) {
        var TempClass = oContainer.children(i).children(0).className;
        TempClass = "DormantContent" + TempClass.substring(TempClass.indexOf("_"), TempClass.length);
        oContainer.children(i).children(0).className = TempClass;
    }
}
//+----------------------------------------------------------------------------
//
//  Function:       SetTabTop
//
//  Description:    Sets the top position of the tabs, based on container.tdTabOrientation
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function SetTabTop() {
        var sOrient = null;
        var iTop = null;
        var iHeight = null;

        if (tagName == "container") sOrient = style.tdTabOrientation.toUpperCase();
        if (tagName == "page") sOrient = parentElement.style.tdTabOrientation.toUpperCase();

        var Tabs = window.document.all("Tab");
        if (sOrient == "TOP") iTop = -21;
        if (sOrient == "BOTTOM" && tagName == "container") iTop = style.posHeight - 1;
        if (sOrient == "BOTTOM" && tagName == "page") {
            if (isNaN(parentElement.ContainerHeight)) parentElement.ContainerHeight = 0;
            iTop = parentElement.style.posHeight - 1;

            for (i = 0; i < parentElement.children.length; i++) {
                if (parentElement.children(i).children(0).offsetHeight > parentElement.ContainerHeight) {
                    parentElement.ContainerHeight = parentElement.children(i).children(0).offsetHeight;
                    parentElement.style.height = parentElement.ContainerHeight;
                }
            }
            iTop = parentElement.ContainerHeight - 1;
        }


        //if there are no tabs
        if (Tabs == null) return;

        //if there is only one tab
        if (Tabs.length == null) {
            Tabs.style.top = iTop;
            return;
        }

        //if there are more than 1 tab
        for (i = 0; i < Tabs.length; i++) {
            Tabs(i).style.top = iTop;
        }
    }

function SetContainerHeight() {
    if (isNaN(parentElement.style.posHeight)) parentElement.style.height = 0;
    parentElement.ContainerHeight = 0;
    for (i = 0; i < parentElement.children.length; i++) {
        try {
            if (parentElement.children(i).children(0).offsetHeight > parentElement.ContainerHeight) {
                parentElement.ContainerHeight = parentElement.children(i).children(0).offsetHeight;
                parentElement.style.height = parentElement.ContainerHeight;
            }
        }
        catch (e) { }
    }
}

//+----------------------------------------------------------------------------
//
//  Function:       SetTabFormat
//
//  Description:    Formats the tab for display at top or bottom orientation
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function SetTabFormat()
{
    var sOrient = null;
    
    if(tagName=="container")
    {
        sOrient = style.tdTabOrientation.toUpperCase();
    }
    if(tagName=="page")
    {
        sOrient = parentElement.style.tdTabOrientation.toUpperCase();
    }  
    
    var Tabs = window.document.all("Tab");
    
    //if there are no tabs
    if(Tabs==null) return;
    
    //if there is only one tab
    if(Tabs.length==null)
    {
        if(sOrient=="TOP")
        {
            Tabs.rows(0).style.display = "inline";
            Tabs.rows(1).style.display = "inline";
            Tabs.rows(3).style.display = "none";
            Tabs.rows(4).style.display = "none";
        }
        if(sOrient=="BOTTOM")
        {
            Tabs.rows(0).style.display = "none";
            Tabs.rows(1).style.display = "none";
            Tabs.rows(3).style.display = "inline";
            Tabs.rows(4).style.display = "inline";
        }
        return;
    }
    
    //if there are more than 1 tab
    for(i=0; i<Tabs.length; i++)
    {
        if(sOrient=="TOP")
        {
            Tabs(i).rows(0).style.display = "block";
            Tabs(i).rows(1).style.display = "block";
            Tabs(i).rows(3).style.display = "none";
            Tabs(i).rows(4).style.display = "none";
        }
        if(sOrient=="BOTTOM")
        {
            Tabs(i).rows(0).style.display = "none";
            Tabs(i).rows(4).style.display = "block";
            Tabs(i).rows(1).style.display = "none";
            Tabs(i).rows(3).style.display = "block";
        }        
    }    
}

//+----------------------------------------------------------------------------
//
//  Function:       PositionTabs
//
//  Description:    Positions all tabs.  Called after resetting the label in a tab 
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function PositionTabs()
{
    var iIndex = parseInt(children(1).index);
    iCurrentLeft = children(1).style.posLeft + children(1).offsetWidth;
    for(i=iIndex; i<parentElement.children.length; i++)
    {
        var CurrentTab = parentElement.children(i).children(1);
        CurrentTab.style.left = iCurrentLeft;
        iCurrentLeft = CurrentTab.style.posLeft + CurrentTab.offsetWidth;
    }
    
    for(i=0; i<parentElement.children.length; i++)
    {
        parentElement.CumulativeTabWidth = parentElement.CumulativeTabWidth + parentElement.children(i).children(1).offsetWidth;
    }
}

//+----------------------------------------------------------------------------
//
//  Function:       DoPropChange
//
//  Description:    Handles property changes on CSS and regular property
//                  attributes.
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function DoPropChange()
{
    var propertyName = window.event.propertyName;
    
    detachEvent("onpropertychange", DoPropChange);
    if (propertyName.substring(0,5) == "style")
    {
        
        switch (propertyName)
        {
            case "style.tdTabOrientation"        :
                SetTabTop();
                SetTabFormat();
                break;
            case "style.backgroundColor"        :
                SetBackgroundColor();
                break;
            case "style.color"        :
                SetColor();
                break;
            case "style.width"        :
                ConfirmContainerWidth();
                break;
            case "style.height"        :
                if(ContainerHeight>style.posHeight) style.height = ContainerHeight;
                SetTabTop();
                break;
            default                         :
                break;
        }
    }
    else
    {
        switch(propertyName)
        {
            case "selectedIndex"                 :
                DeselectTab();
                SelectTab();
                DeselectContent();
                SelectContent();
                //change.fire();
                //children(selectedIndex-1).FireFocus();
                break;   
            case "TABTITLE"                 :
                children(1).rows(2).cells(2).title = TABTITLE;
                break;   
            case "TABTEXT"                 :
                children(1).rows(2).cells(2).innerText = TABTEXT;
                children(1).rows(2).cells(2).style.width = parseInt((TABTEXT.length*6)+8);
                PositionTabs();
                ConfirmContainerWidth();
                break;   
                
                     
            default                         :
                break;
        }
    }
    attachEvent("onpropertychange", DoPropChange);
}

//+----------------------------------------------------------------------------
//
//  Function:       ConfirmContainerWidth
//
//  Description:    Sets container width to Cumulative width of tabs + 10 if
//                  container is not wide enough to accommodate tab widths
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function ConfirmContainerWidth() {
    if (tagName == "container") {
        if (style.posWidth < CumulativeTabWidth + 10) {
            style.width = CumulativeTabWidth + 10;
        }
    }
    if (tagName == "page") {

        //skip if the container is automatically determining width
        if (parentElement.style.width == 'auto') return;
        if (parentElement.style.posWidth < parentElement.CumulativeTabWidth + 10) {
            parentElement.style.width = parentElement.CumulativeTabWidth + 10;
        }
    }
}

//+----------------------------------------------------------------------------
//
//  Function:       SetBackgroundColor
//
//  Description:    Sets the background color for the control
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function SetBackgroundColor()
{
    if(tagName!="container") return;
    var Tabs = element.children;
    //window.external.alert(Tabs.length);
    
    if(Tabs==null) return;
    if(Tabs.length==null)
    {
        Tabs.children(0).style.background = style.background;
        Tabs.children(1).rows(2).cells(1).style.background = style.background;
        Tabs.children(1).rows(2).cells(2).style.background = style.background;
        return;
    }
    for(i=0; i<Tabs.length; i++)
    {
        Tabs(i).children(0).style.background = style.background;
        Tabs(i).children(1).rows(2).cells(1).style.background = style.background;
        Tabs(i).children(1).rows(2).cells(2).style.background = style.background;
    }
}

//+----------------------------------------------------------------------------
//
//  Function:       SetColor
//
//  Description:    Sets the foreground color for the control
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function SetColor()
{
    if(tagName!="container") return;
    var Tabs = element.children;
    //window.external.alert(Tabs.length);
    
    if(Tabs==null) return;
    if(Tabs.length==null)
    {
        Tabs.children(0).style.color = style.color;
        Tabs.children(1).rows(2).cells(1).style.color = style.color;
        Tabs.children(1).rows(2).cells(2).style.color = style.color;
        return;
    }
    for(i=0; i<Tabs.length; i++)
    {
        Tabs(i).children(0).style.color = style.color;
        Tabs(i).children(1).rows(2).cells(1).style.color = style.color;
        Tabs(i).children(1).rows(2).cells(2).style.color = style.color;
    }
}

//+----------------------------------------------------------------------------
//
//  Function:       FireFocus
//
//  Description:    Fires the onfocus event
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------
function FireFocus()
{
    focus.fire();
}

//+----------------------------------------------------------------------------
//
//  Function:       IsReady
//
//  Description:    Returns whether initialization is completed or not 
//
//  Arguments:      none
//
//  Returns:        true if initialization is completed, otherwise false
//
//-----------------------------------------------------------------------------
function IsReady()
{
    return bReady;
}
复制代码

而在htm中调用此控件时，除了引入这个js以外，因为没有了htc的自动注册，所以还需要在form的onload中添加一个DoBeforeInit()的方法调用，或者在JQuery的Ondocument.ready时调用DoBeforeInit()方法。

调用ie10_mp2c_htc.js的具体htm代码可以如下： 

复制代码
<HTML xmlns:mpc="mpc">
    <HEAD>
    <TITLE ></TITLE>
    <META http-equiv="X-UA-Compatible" content="IE=9" />        
    <SCRIPT language="javascript" src="ie10_mp2c_htc.js" type="text/javascript">
    </SCRIPT>        
    </HEAD>
    <BODY onload="DoBeforeInit()">
    <FORM method="post" >
        <mpc:container xmlns:mpc="mpc" STYLE="top:25; width:600px; height:480px">
        <mpc:page TABTITLE="Page 1" TABTEXT="China">      
            <p>&nbsp;
            <input type="text" id="tid" value="China" />
            </p>
        </mpc:page>
        <mpc:page TABTITLE="Page 2" TABTEXT="American">
            <p>&nbsp;
            <input type="text" id="Text1" value="American" /> </p>
        </mpc:page>
        <mpc:page TABTITLE="Page 3" TABTEXT="France"> </p>
            <p>&nbsp;
            <input type="text" id="Text2" value="France" /> </p>
        </mpc:page>
        <mpc:page TABTITLE="Page 4" TABTEXT="German">
            <p>&nbsp;
            <input type="text" id="Text3" value="German" /> </p>
        </mpc:page>
        </mpc:container>
    </FORM>
    </BODY>
</HTML>
复制代码

最后贴上运行效果图：

当然，这一版的mpc.js里只是把tab最常用的显示和切换的功能完成了，文件里其他的js代码还待用到时再继续完善。

至此，因为IE10标准模式不支持HTC ，升级重写Htc原有代码系列的三文已经全了，总体来说，虽然htc死了，但是，其尸体经过一些包装处理后，还是能继续获得新生的，这就是所谓的上帝在关闭一个大门之后，同时还会打开一个窗户的道理吧！

posted on   BobLiu  阅读(2577)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

Powered by: 博客园 Copyright © 2025 BobLiu
Powered by .NET 9.0 on Kubernetes
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛