Click here to Skip to main content
11,567,922 members (39,056 online)
Click here to Skip to main content

Tagged as

Update mpc.htc(HTML Components) to JS since IE10 Standard Mode Doesn't Support htc Again

, 12 Jan 2013 CPOL 5.8K 46 2
Rate this:
Please Sign up or sign in to vote.
This tip gives a method to update mpc.htc code to js because IE10 standard mode doesn't support htc (Html Components).

Introduction

This tip gives a method to update mpc.htc code to js because IE10 standard mode doesn't support htc (HTML Components) again.

Background

To learn more about mpc.htc, please refer to the article in MSDN: MPC Behavior.

Using the Code

The idea is to save mpc.htc as mpc.js, and modify the code in it one by one.

The main changes are as follows:

  1. Change all PROPERTY to JavaScript var.
  2. Remove some useless Event and Method.
  3. Add a new DoBeforeInit() function, and invoke it before DoInit() function.
  4. Add a new ChangeTab() function to switch in tab pages.
  5. Modify DoInit(), MakeContent(), MakeTab() and so on.

Please see the final ie10_mp2c_htc.js code as follows:

View Code 


//+----------------------------------------------------------------------------
//
//  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;
}

In HTML, you need to invoke the DoBeforeInit() in form onload().

The HTML code that uses ie10_mp2c_htc.js is as follows:

    <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>

Running Screenshot

Conclusion

With this tip and the previous tip: Update .htc (HTML Components) custom attributes to js since IE10 standard mode doesn't support htc again, we can draw a conclusion that though IE10 standard mode doesn't support htc again, we can still update the old code to js and reuse it.

I think it's the best evidence of the adage:
If God closes the door for you, he must open the window somewhere else.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Bob.LiuZhenDong
Software Developer (Senior) Microsoft China
China China
Consultant at Microsoft (China) Corporation Ltd.

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150624.2 | Last Updated 13 Jan 2013
Article Copyright 2013 by Bob.LiuZhenDong
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid