tabstrip.htc

浏览器端看到树型目录结构,用户可以完整地看到像windows资源管理器一样的效果

<!----------------------------------------------------------------------
//  Copyright (c) 2000-2003 Microsoft Corporation.  All Rights Reserved.
//---------------------------------------------------------------------->

<public:component tagName="TabStrip" literalcontent="true" lightweight="true">

<public:property name="targetID" />

<public:property name="tabDefaultStyle" />
<public:property name="tabHoverStyle" />
<public:property name="tabSelectedStyle" />

<public:property name="sepDefaultStyle" />
<public:property name="sepHoverStyle" />
<public:property name="sepSelectedStyle" />

<public:property name="sepDefaultImageUrl" />
<public:property name="sepHoverImageUrl" />
<public:property name="sepSelectedImageUrl" />

<public:property name="numTabs" get="f_NumTabs" id="propNumTabs" />
<public:property name="numItems" get="f_NumItems" id="propNumItems" />
<public:property name="selectedIndex" get="f_GetSelectedIndex" put="f_SetSelectedIndex" id="propSelectedIndex" />

<public:property name="orientation" get="f_GetDirection" put="f_SetDirection" id="propOrientation" />

<public:method name="createTabAt" internalname="f_PublicCreateTabAt" />
<public:method name="createSeparatorAt" internalname="f_PublicCreateSeparatorAt" />
<public:method name="getItem" internalname="f_PublicGetItem" />
<public:method name="getTab" internalname="f_PublicGetTab" />

<public:event name="onselectedindexchange" id="evtIndexChangeEvent" />
<public:event name="onwcready" id="evtWCReady" />

<public:attach event="oncontentready" onevent="f_Init()" />
<public:attach event="ondocumentready" onevent="f_PostInit()" />
<public:attach event="onselectstart" onevent="f_CancelEvent()" />
<public:attach event="onkeydown" onevent="f_OnKeyDown()" />
<public:attach event="onkeyup" onevent="f_OnKeyUp()" />
<public:attach event="onpropertychange" onevent="f_PropChange()" />

<public:defaults
    tabStop=true
    contentEditable=false
    canHaveHTML=true
    viewInheritStyle=true
    viewMasterTab=true
    viewLinkContent=false
    style="display:block"
/>

</public:component>

<script language="JScript">

var _OnStopCount = 0;
var _InInit = true;
var _Tabs = null;
var _HoverIndex = -1;
var _bHorizontal = true;
var _NumTabs = 0;
var _nSelectedIndex = -2;

var _BuiltInTabDefaultStyle = "cursor:hand;background-color:buttonface";
var _BuiltInTabHoverStyle = "background-color:buttonhighlight";
var _BuiltInTabSelectedStyle = "cursor:default;background-color:buttonhighlight";

var _BuiltInSepDefaultStyle = "";
var _BuiltInSepHoverStyle = "";
var _BuiltInSepSelectedStyle = "";

var _StateVals = new Array();
var _StateDefault = 1;
var _StateHover = 2;
var _StateSelected = 3;

var _DelayEvent = false;
var _FirstIndex = -1;

var _TimerSet = false;
var _TimerID = -1;

var _IsSubmitting = false;

//
// Initialize the viewlink with content based on the children of the element.
//
function f_Init()
{
    f_AddStopEvent();

    // Get the images started downloading and into the browser cache
    var cacheImageDef = new Image();
    var cacheImageHov = new Image();
    var cacheImageSel = new Image();
    cacheImageDef.src = sepDefaultImageUrl;
    cacheImageHov.src = sepHoverImageUrl;
    cacheImageSel.src = sepSelectedImageUrl;

    // Initialize the state values to translate strings to state numbers
    _StateVals["default"] = _StateDefault;
    _StateVals["hover"] = _StateHover;
    _StateVals["selected"] = _StateSelected;

    var oRoot = element.document.createElement("SPAN");
    oRoot.innerHTML = innerHTML;

    var oTable = element.document.createElement("TABLE");
    var oTBody = element.document.createElement("TBODY");

    oTable.style.fontSize = currentStyle.fontSize;
    oTable.style.fontFamily = currentStyle.fontFamily;
    oTable.style.fontWeight = currentStyle.fontWeight;
    oTable.style.color = currentStyle.color;
    oTable.cellSpacing = 0;
    oTable.cellPadding = 0;
    oTable.border = 0;
    if (element.currentStyle.direction != element.style.direction)
        oTable.style.direction = element.currentStyle.direction;
    else
        oTable.style.direction = element.style.direction;
    oTable.dir = element.dir;

    if (element.currentStyle.height != null)
        oTable.style.height = element.currentStyle.height;
    if (element.currentStyle.width != null)
        oTable.style.width = element.currentStyle.width;

    var oRow = null;
    if (_bHorizontal)
    {
        oRow = element.document.createElement("TR");
        oTBody.appendChild(oRow);
    }

    //
    // Go through the children and create the tabs and separators
    // within the viewlink.
    //
    for (var nIndex = 0; nIndex < oRoot.children.length; nIndex++)
    {
        if (!_bHorizontal)
        {
            oRow = element.document.createElement("TR");
            oTBody.appendChild(oRow);
        }

        var oNode = oRoot.children[nIndex];
        var szTagName = oNode.tagName.toLowerCase();
        if ((szTagName != "tab") && (szTagName != "tabseparator"))
            continue;

        f_AppendTabContent(oRow, oNode);
    }

    _Tabs = _bHorizontal ? oTBody.childNodes[0] : oTBody;
    oTable.appendChild(oTBody);

    // Set or Reset the selected index and apply selected styles
    var numTabs = f_NumTabs()
    if (numTabs > 0)
    {
        var curIndex = _nSelectedIndex;
        _nSelectedIndex = -1;
        if (curIndex != -1)
        {
            if ((curIndex < 0) || (curIndex >= numTabs))
                curIndex = 0;
            f_SetSelectedIndex(curIndex);
        }
    }
    else
    {
        _nSelectedIndex = -1;
    }

    var oBody = element.document.createElement("BODY");
    var oHtml = element.document.createElement("HTML");
    oBody.appendChild(oTable);
    oHtml.appendChild(oBody);

    defaults.viewLink = oHtml.document;

    _InInit = false;
}

//
// After init functions, sets the MultiPage index
//
function f_PostInit()
{
    f_CleanupEvents();
    f_NavigateMultiPage(f_GetTab(_nSelectedIndex));
    evtWCReady.fire(createEventObject());
}

//
// Cleans up the OnStop events left over from previous postbacks
//
function f_CleanupEvents()
{
    var eventArray = window.__tabStripAttachedEvents;

    if ((eventArray != null) && (eventArray[0]))
    {
        var newArray = new Array(false);

        // First array element is the dirty bit
        for (var i = 1; i < eventArray.length; i++)
        {
            if (element.document.all[eventArray[i][0]] == null)
            {
                element.document.detachEvent("onstop", eventArray[i][1]);
            }
            else
            {
                newArray = newArray.concat(new Array(eventArray[i]));
            }
        }

        window.__tabStripAttachedEvents = newArray;
    }
}

//
// Adds an OnStop event
//
function f_AddStopEvent()
{
    var eventArray = window.__tabStripAttachedEvents;
    if (eventArray == null)
    {
        eventArray = new Array(false);
    }

    element.document.attachEvent("onstop", f_OnStop);
    eventArray[0] = true;
    entry = new Array(element.uniqueID, f_OnStop);
    window.__tabStripAttachedEvents = eventArray.concat(new Array(entry));
}

//
// Given a child node from the tabstrip, convert it into a tab or 
// separator for the viewlink and append it to the parent.
//
function f_AppendTabContent(parent, node)
{
    var szTagName = node.tagName.toLowerCase();
    var isTab = (szTagName == "tab");
    var oCell = element.document.createElement("TD");

    // Merge attributes from the original node to the viewlinked cell
    oCell.mergeAttributes(node, false);

    // Setup type specific attributes
    if (isTab)
    {
        oCell.setAttribute("_type", "tab", 0);

        oCell.attachEvent("onclick", f_TabClick);
        oCell.attachEvent("onmousedown", f_TabClick);
        oCell.attachEvent("onmouseover", f_TabOver);
        oCell.attachEvent("onmouseout", f_TabOut);
        oCell.setAttribute("index", _NumTabs, 0);
        _NumTabs++;
    }
    else if (szTagName == "tabseparator")
    {
        oCell.setAttribute("_type", "separator", 0);
    }
    else
    {
        // Unknown tagname
        return;
    }

    // Get the images started downloading and into the browser cache
    var cacheImageDef = new Image();
    var cacheImageHov = new Image();
    var cacheImageSel = new Image();
    cacheImageDef.src = node.getAttribute("defaultImageUrl");
    cacheImageHov.src = node.getAttribute("hoverImageUrl");
    cacheImageSel.src = node.getAttribute("selectedImageUrl");

    var content;
    if (isTab)
    {
        content = element.document.createElement("A");
        oCell.appendChild(content);
        if (oCell.tabIndex > 0)
        {
            content.tabIndex = oCell.tabIndex;
            oCell.tabIndex = -1;
        }
        if (oCell.title != "")
        {
            content.title = oCell.title;
            oCell.title = "";
        }
    }
    else
    {
        content = oCell;
    }
    var szText = node.getAttribute("text");
    if (szText != null)
    {
        // If the text attribute is specified, then make it the content
        var oTextSpan = element.document.createElement("SPAN");
        oTextSpan.innerText = szText;
        content.appendChild(oTextSpan);
    }
    else
    {
        // If there is no text attribute, then the child nodes become content
        while (node.childNodes.length > 0)
            content.appendChild(node.childNodes[0]);
    }

    f_ApplyState(oCell, "default");
    oCell.noWrap = true;
    
    oCell.attachEvent("onkeyup", f_OnTabKeyUp);

    parent.appendChild(oCell);
}

//
// A property changed
//
function f_PropChange()
{
    switch (event.propertyName)
    {
    case "tabDefaultStyle":
    case "tabHoverStyle":
    case "tabSelectedStyle":
    case "sepDefaultStyle":
    case "sepHoverStyle":
    case "sepSelectedStyle":
    case "sepDefaultImageUrl":
    case "sepHoverImageUrl":
    case "sepSelectedImageUrl":
        if (!_InInit)
        {
            f_Redraw();
        }
        break;
    case "_submitting":
        _IsSubmitting = (element.getAttribute("_submitting") == 'true');
        _OnStopCount = 0;
        break;
    case "style.direction":
        if (_bHorizontal)
            _Tabs.parentElement.parentElement.style.direction = element.style.direction;
        else
            _Tabs.parentElement.style.direction = element.style.direction;
        break;
    case "dir":
        if (_bHorizontal)
            _Tabs.parentElement.parentElement.dir = element.dir;
        else
            _Tabs.parentElement.dir = element.dir;
        break;
    }
}

//
// Adds a tab to the tabstrip
//
function f_PublicCreateTabAt(index)
{
    return f_AddItemAt(index, "tab");
}

//
// Adds a separator to the tabstrip
//
function f_PublicCreateSeparatorAt(index)
{
    return f_AddItemAt(index, "tabseparator");
}

//
// Adds an item of a certain type to the tabstrip at the specified index
// and returns a contract object for that item
//
function f_AddItemAt(index, type)
{
    var numItems = f_NumItems();
    if ((index < 0) || (index > numItems))
        index = numItems;

    var renumber = false;
    var cell = element.document.createElement("TD");

    // Setup type specific attributes
    if (type == "tab")
    {
        cell.setAttribute("_type", "tab", 0);

        cell.attachEvent("onclick", f_TabClick);
        cell.attachEvent("onmousedown", f_TabClick);
        cell.attachEvent("onmouseover", f_TabOver);
        cell.attachEvent("onmouseout", f_TabOut);
        _NumTabs++;
        renumber = true;

        var link = element.document.createElement("A");
        cell.appendChild(link);
    }
    else if (type == "tabseparator")
    {
        cell.setAttribute("_type", "separator", 0);
    }
    else
    {
        // Unknown type
        return null;
    }

    f_ApplyState(cell, "default");
    cell.noWrap = true;
    cell.attachEvent("onkeyup", f_OnTabKeyUp);

    var addItem = cell;
    if (!_bHorizontal)
    {
        row = element.document.createElement("TR");
        row.appendChild(cell);
        addItem = row;
    }

    if (index == numItems)
        _Tabs.appendChild(addItem);
    else
        _Tabs.children[index].insertAdjacentElement("beforeBegin", addItem);

    if (renumber)
        f_RenumberTabs();

    if (type == "tab")
    {
        var tabIndex = cell.getAttribute("index");
        if (tabIndex <= _nSelectedIndex)
        {
            _nSelectedIndex++
            f_FireIndexChangeEvent();
            f_NavigateMultiPage(cell);
        }
        else if (_nSelectedIndex < 0)
        {
            f_SetSelectedIndex(0);
        }
    }

    f_NumItemsChanged();
    if (type == "tab")
        f_NumTabsChanged();

    return f_PublicMakeContract(cell);
}

//
// Signals that the number of items has changed
//
function f_NumItemsChanged()
{
    if (!_InInit)
        propNumItems.fireChange();
}

//
// Signals that the number of tabs has changed
//
function f_NumTabsChanged()
{
    if (!_InInit)
        propNumTabs.fireChange();
}

//
// Reindexes the tabs
//
function f_RenumberTabs()
{
    var tabIndex = 0;
    for (var index = 0; index < _Tabs.children.length; index++)
    {
        var cell = _Tabs.children[index];
        if (!_bHorizontal)
            cell = cell.children[0];