tabstrip.htc

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

// Applies the look of a state to a tab or
// separator and does all the inheritance work.
//
// state should be one of the following:
//      default
//      hover
//      selected
//      redraw - forces a redraw
//
function f_ApplyState(tab, state)
{
    var content = getContent(tab);

    // Check that we don't reapply the same state
    var curState = tab.getAttribute("state");
    if (curState == state)
        return;

    if (state == "redraw")
        state = curState;

    var szImageUrl = f_CreateImageUrl(tab, state);
    if (szImageUrl != null)
    {
        if (tab.getAttribute("_spadded") != null)
        {
            content.childNodes[0].removeNode(true);
            tab.removeAttribute("_spadded", 0);
        }

        var oImg = element.document.createElement("IMG");
        oImg.src = szImageUrl;
        oImg.align = "absmiddle";

        if (tab.getAttribute("_imgadded") == null)
            tab.setAttribute("_imgadded", "true", 0);
        else
            content.children[0].removeNode(true);

        if (content.hasChildNodes())
            content.insertBefore(oImg, content.childNodes[0]);
        else
            content.insertBefore(oImg);
    }
    else if (tab.getAttribute("_imgadded") != null)
    {
        // There was an image, now there isn't
        content.children[0].removeNode(true);
        tab.removeAttribute("_imgadded", 0);
    }
    
    if (!content.hasChildNodes())
    {
        // If there is absolutely no content, then add a space
        content.innerHTML = " ";
        tab.setAttribute("_spadded", "true", 0);
    }

    // Apply the style
    var szStyle = f_CreateStyleString(tab, state);
    if (szStyle != "")
        tab.style.cssText = ";" + szStyle;

    // Record the current state
    tab.setAttribute("state", state, 0);
}

//
// Applies a state to a separator.
//
// nIndex should be the index of the separator in the children collection
//
// state should be one of the following:
//      default
//      hover
//      selected
//
// Assumes: If you want to set to a particular state,
//          then there is at least one tab of that state that is adjacent.
//
function f_SetSeparatorState(sep, nIndex, state)
{
    // If the state is selected, then it should be applied
    if (state == "selected")
    {
        f_ApplyState(sep, state);
        return;
    }

    // If the state is default or hover, the surrounding items need to be checked

    // Retrieve the items before and after
    var oPrev = (nIndex >= 1) ? _Tabs.children[nIndex - 1] : null;
    var oNext = ((nIndex + 1) < _Tabs.children.length) ? _Tabs.children[nIndex + 1] : null;
    if (!_bHorizontal && (oPrev != null))
        oPrev = oPrev.childNodes[0];
    if (!_bHorizontal && (oNext != null))
        oNext = oNext.childNodes[0];

    var szPrevState = null;
    var szNextState = null;

    // We are only interested in tabs, if they are separators, then ignore
    if ((oPrev != null) && (oPrev.getAttribute("index") != null))
        szPrevState = oPrev.getAttribute("state");
    if ((oNext != null) && (oNext.getAttribute("index") != null))
        szNextState = oNext.getAttribute("state");

    var stateVal = _StateVals[state];

    if (szPrevState != null)
    {
        // If the state value is greater than the one we're trying to set,
        // then don't set to that state
        if (_StateVals[szPrevState] > stateVal)
            return;
    }
    if (szNextState != null)
    {
        if (_StateVals[szNextState] > stateVal)
            return;
    }

    f_ApplyState(sep, state);
}

//
// Applies a state to a tab.
//
// state should be one of the following:
//      default
//      hover
//      selected
//
function f_SetTabState(tab, state)
{
    f_ApplyState(tab, state);

    var nIndex = f_GetTabNodeIndex(tab);

    // Retrieve the items before and after
    var oPrev = (nIndex >= 1) ? _Tabs.children[nIndex - 1] : null;
    var oNext = ((nIndex + 1) < _Tabs.children.length) ? _Tabs.children[nIndex + 1] : null;
    if (!_bHorizontal && (oPrev != null))
        oPrev = oPrev.childNodes[0];
    if (!_bHorizontal && (oNext != null))
        oNext = oNext.childNodes[0];

    if ((oPrev != null) && (oPrev.getAttribute("index") == null))
        f_SetSeparatorState(oPrev, nIndex - 1, state);
    if ((oNext != null) && (oNext.getAttribute("index") == null))
        f_SetSeparatorState(oNext, nIndex + 1, state);
}

//
// Set the tab to use the selected style and be selected
//
function f_SetTabActive(tab)
{
    f_SetTabState(tab, "selected");
    tab.children[0].tabIndex = 0;
    tab.children[0].focus();
}

//
// Set the tab to use the default style and be inactive
//
function f_SetTabInactive(tab)
{
    f_SetTabState(tab, "default");
    tab.children[0].tabIndex = -1;
}

//
// Set the tab to use hover style
//
function f_SetTabHover(tab)
{
    f_SetTabState(tab, "hover");
}

//
// Returns the number of tabs
//
function f_NumTabs()
{
    return _NumTabs;
}

//
// Returns the number of items
//
function f_NumItems()
{
    return _Tabs.children.length;
}

//
// Returns the index of the selected tab
//
function f_GetSelectedIndex()
{
    if (_nSelectedIndex < 0)
        return -1;
    return _nSelectedIndex;
}

//
// Navigates the multipage based on this tab
//
function f_NavigateMultiPage(oTab)
{
    var oTargetID = (oTab == null) ? null : oTab.getAttribute("targetid");
    if (oTargetID != null)
    {
        var oTarget = element.document.all[oTargetID];
        if (oTarget != null)
        {
            oTarget.setAttribute("activate", "true", 0);
        }
    }
    else if (targetID != null)
    {
        var oTarget = element.document.all[targetID];
        if (oTarget != null)
        {
            oTarget.selectedIndex = _nSelectedIndex;
        }
    }
}

//
// Changes the currently selected tab
//
function f_SetSelectedIndex(value)
{
    if (_nSelectedIndex == value)
        return;

    if (value == -1)
    {
        var oPrevTab = f_GetTab(_nSelectedIndex);
        if (oPrevTab != null)
            f_SetTabInactive(oPrevTab);

        _nSelectedIndex = -1;

        if (!_InInit)
        {
            if (!_DelayEvent)
                f_FireIndexChangeEvent();
        }

         return;
    }

    var oTab = f_GetTab(value);
    if (oTab != null)
    {
        var oPrevTab = f_GetTab(_nSelectedIndex);
        if (oPrevTab != null)
            f_SetTabInactive(oPrevTab);

        f_SetTabActive(oTab);
        _nSelectedIndex = value;

        if (!_InInit)
        {
            f_NavigateMultiPage(oTab);

            if (!_DelayEvent)
                f_FireIndexChangeEvent();
        }
    }
    else if (_InInit)
    {
        _nSelectedIndex = value;
    }
}

//
// Fire the index changed event
//
function f_FireIndexChangeEvent()
{
    var oEvent = createEventObject();
    oEvent.index = _nSelectedIndex;
    evtIndexChangeEvent.fire(oEvent);

    if (!_InInit)
        propSelectedIndex.fireChange();
}

//
// Get the orientation of the tabstrip
//
function f_GetDirection()
{
    return _bHorizontal ? "horizontal" : "vertical";
}

//
// Change the orientation of the tabstrip
//
function f_SetDirection(value)
{
    if (value == null)
        return;

    value = value.toLowerCase();
    if (value == "")
        return;

    if (!_bHorizontal && (value == "horizontal"))
    {
        _bHorizontal = true;
        if (!_InInit)
        {
            f_RearrangeHorizontal();
            propOrientation.fireChange();
        }
    }
    else if (_bHorizontal && (value == "vertical"))
    {
        _bHorizontal = false;
        if (!_InInit)
        {
            f_RearrangeVertical();
            propOrientation.fireChange();
        }
    }
}

//
// Rearranges the layout from vertical to horizontal
//
function f_RearrangeHorizontal()
{
    while (_Tabs.children.length > 1)
    {
        _Tabs.children[0].appendChild(_Tabs.children[1].children[0]);
        _Tabs.children[1].removeNode(true);
    }
    _Tabs = _Tabs.children[0];
}

//
// Rearranges the layout from horizontal to vertical
//
function f_RearrangeVertical()
{
    _Tabs = _Tabs.parentElement;
    while (_Tabs.children[0].children.length > 1)
    {
        var row = element.document.createElement("TR");
        _Tabs.appendChild(row);
        row.appendChild(_Tabs.children[0].children[1]);
    }
}

//
// Change the selected tab when arrow keys are pressed
//
function f_OnKeyDown()
{
    if (_IsSubmitting)
        return;

    // Check that left or right arrow keys were pressed when horizontal
    // and up or down arrow keys were pressed when vertical
    if ((_bHorizontal && ((event.keyCode == 37) || (event.keyCode == 39))) ||
        (!_bHorizontal && ((event.keyCode == 38) || (event.keyCode == 40))))
    {
        // Left or up goes backward, right or down goes forward
        var dir = (event.keyCode <= 38) ? -1 : 1;

        // If the tabstrip is right to left, then the left/right direction switches
        if ((element.dir != null) && (element.dir == "rtl") &&
            ((event.keyCode == 37) || (event.keyCode == 39)))
            dir *= -1;

        // Find the next non-disabled tab
        if (!_DelayEvent)
            _FirstIndex = _nSelectedIndex;
        var newIndex = _nSelectedIndex;
        var oTab = null;
        var oStopTab = f_GetTab(_nSelectedIndex);        
        do
        {
            newIndex = Number(newIndex) + Number(dir);

            // If the index falls off the end, flip around to the other end
            if (newIndex < 0)
                newIndex = _NumTabs - 1;
            else if (newIndex >= _NumTabs)
                newIndex = 0;

            oTab = f_GetTab(newIndex);
        }
        while ((oTab != null) && (oTab.isDisabled) && (oTab != oStopTab));

        _DelayEvent = true;
        f_SetSelectedIndex(newIndex);
    }
}

function f_OnKeyUp()
{
    if (_IsSubmitting)
        return;

    if (_DelayEvent)
    {
        _DelayEvent = false;
        if (_FirstIndex != _nSelectedIndex)
            f_SetEventTimeout();
        _FirstIndex = -1;
    }
}

//
// Deal with access keys
//
function f_OnTabKeyUp()
{
    if (_IsSubmitting)
        return;

    if ((event.srcElement.accessKey != null) && event.altKey &&
        (event.srcElement.accessKey.toUpperCase().charCodeAt() == event.keyCode))
    {
        // Access key pressed
        f_SetIndexByEvent();
    }
}

//
// Set the index based on the event information
//
function f_SetIndexByEvent()
{
    var oNode = f_FindSurroundingCell(event.srcElement);
    if (oNode == null)
        return;

    if (oNode.isDisabled)
        return;

    var nIndex = oNode.getAttribute("index");
    if ((nIndex != null) && (nIndex != _nSelectedIndex))
        f_SetSelectedIndex(nIndex);
}

//
// Clears the current event timer
//
function f_ClearEventTimeout()
{
    if (_TimerSet)
    {
        window.clearTimeout(_TimerID);
        _TimerSet = false;
    }
}

//
// Sets an event timer
//
function f_SetEventTimeout()
{
    f_ClearEventTimeout();

    _TimerID = window.setTimeout(f_FireIndexChangeEvent, 500, "JScript");
    _TimerSet = true;
}

//
// Re-enables interactivity
//
function f_OnStop()
{
    if (!_IsSubmitting || (_OnStopCount > 0))
    {
        _IsSubmitting = false;
        element.removeAttribute("_submitting");
    }

    _OnStopCount++;
}

</script>