toolbar.htc

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

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

<public:component tagname="Toolbar" literalcontent="true">

<public:method name="createLabelAt" internalname="f_PublicCreateLabelAt" />
<public:method name="createButtonAt" internalname="f_PublicCreateButtonAt" />
<public:method name="createCheckButtonAt" internalname="f_PublicCreateCheckButtonAt" />
<public:method name="createSeparatorAt" internalname="f_PublicCreateSeparatorAt" />
<public:method name="createGripperAt" internalname="f_PublicCreateGripperAt" />
<public:method name="createTextBoxAt" internalname="f_PublicCreateTextBoxAt" />
<public:method name="createDropDownListAt" internalname="f_PublicCreateDropDownListAt" />
<public:method name="createCheckGroupAt" internalname="f_PublicCreateCheckGroupAt" />

<public:method name="getItem" internalname="f_PublicGetItem" />
<public:property name="numItems" get="f_PublicGetCount" />

<public:property name="defaultStyle" id="prDefaultStyle" get="get_defaultStyle" put="set_defaultStyle" />
<public:property name="hoverStyle" id="prHoverStyle" get="get_hoverStyle" put="set_hoverStyle" />
<public:property name="selectedStyle" id="prSelectedStyle" get="get_selectedStyle" put="set_selectedStyle" />
<public:property name="movement" id="prMovement" get="get_movement" put="set_movement" />
<public:property name="orientation" id="prOrientation" get="get_orientation" put="set_orientation" />
<public:property name="turnVerticalContent" id="prTurnVerticalContent" get="get_turnVerticalContent" put="set_turnVerticalContent" />

<public:event name="onwcready" id="evWCReady" />
<public:event name="onbuttonclick" id="evButtonClick" />
<public:event name="oncheckchange" id="evCheckChange" />

<public:defaults
    tabStop="true"
    contentEditable="false"
    canHaveHTML="true"
    viewInheritStyle="true"
    viewMasterTab="true"
    viewLinkContent="false"
    style="display:none;overflow:visible;cursor:default;padding:1px;background-color:buttonface;border-top:solid 1px buttonhighlight;border-top:solid 1px buttonhighlight;border-left:solid 1px buttonhighlight;border-right:solid 1px buttonshadow;border-bottom:solid 1px buttonshadow"
/>

<public:attach event="oncontentready" onevent="f_CreateToolbar()" />
<public:attach event="onpropertychange" onevent="f_OnPropertyChange()" />
<public:attach event="ondocumentready" onevent="f_OnDocReady()" />

<script language="JScript">

var _oTable; // Global reference to the table that holds the items within the ViewLink
var _oInteractNode;
var _OnStopCount = 0;
var _Ready = false;
var _bDragging = false;
var _bDocked = false;
var _szDockedLocation = "";
var _nLastClientX;
var _nLastClientY;
var _nLastScreenX;
var _nLastScreenY;

var _tbDefaultStyle = "";
var _tbHoverStyle = "";
var _tbSelectedStyle = "";

var _Orientation = "horizontal";
var _TurnVerticalContent = false;
var _Movement = "";

var _KeyboardClick = false;
var _PreDockOrientation = "";

var _IsSubmitting = false;

// Built-in styles
var _BuiltInDefaultStyle = "color:buttontext;padding:2px;border:solid 1px buttonface";
var _BuiltInHoverStyle = "border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow";
var _BuiltInSelectedStyle = "border-top-color:buttonshadow;border-left-color:buttonshadow;border-bottom-color:buttonhighlight;border-right-color:buttonhighlight;padding-top:3px;padding-left:3px;padding-bottom:1px;padding-right:1px";

// Horiz refers to the direction of the toolbar, not the separator
var _szSeparatorHorizStyle = "\
    border-left-width:1px;border-left-style:solid;border-left-color:buttonshadow;\
    border-right-width:1px;border-right-style:solid;border-right-color:buttonhighlight;\
    margin-left:2px;margin-right:2px;\
    width:2px;overflow:hidden;";

// Vert refers to the direction of the toolbar, not the separator
var _szSeparatorVertStyle = "\
    border-top-width:1px;border-top-style:solid;border-top-color:buttonshadow;\
    border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:buttonhighlight;\
    margin-top:2px;margin-bottom:2px;margin-left:3px;margin-right:3px;\
    height:2px;overflow:hidden;";

var _szGripperHorizStyle = "\
    cursor:move;\
    margin-left:2px;margin-right:2px;\
    border-top:buttonhighlight;border-bottom:buttonshadow;border-right:buttonshadow;border-left:buttonhighlight;\
    border-style:solid;border-width:1px;\
    width:3px;overflow:hidden;";

var _szGripperVertStyle = "\
    cursor:move;\
    margin-top:2px;margin-bottom:2px;margin-left:3px;margin-right:3px;\
    border-top:buttonhighlight;border-bottom:buttonshadow;border-right:buttonshadow;border-left:buttonhighlight;\
    border-style:solid;border-width:1px;\
    height:3px;overflow:hidden;";

//+----------------------------------------------------------------------------
//  Function:       f_GetParent
//  Description:    Retrieves the TR element within the TABLE element
//                  inside the ViewLink.
//  Returns:        The TR element or undefined
//-----------------------------------------------------------------------------
function f_GetParent()
{
    // First, make sure there is a TBODY
    if (_oTable.children[0] == null)
    {
        return;
    }

    if (orientation == "vertical")
    {
        // Return the TBODY
        return _oTable.children[0];
    }
    else
    {
        // Return the one TR within the table.
        if (_oTable.children[0].children.length > 0)
            return _oTable.children[0].children[0];
    }
}

//+----------------------------------------------------------------------------
//  Function:       get_orientation and set_orientation
//  Description:    Gets and sets the orientation property
//  Get:    Returns "vertical" if vertical, "horizontal" if horizontal.
//  Set:    Sets the orientation property. Accepts string values.
//-----------------------------------------------------------------------------
function get_orientation()
{
    return _Orientation;
}

function set_orientation(value)
{
    var szOrig = _Orientation;

    if (typeof value == "string")
    {
        var lVal = value.toLowerCase();
        switch (lVal)
        {
        case "horizontal":
        case "vertical":
            _Orientation = lVal;
            break;
        }
    }

    if (_Ready && (szOrig != _Orientation))
    {
        if (_Orientation == "horizontal")
            f_RearrangeHorizontal();
        else
            f_RearrangeVertical();
        prOrientation.fireChange();
    }
}

//+----------------------------------------------------------------------------
//  Function:       f_RearrangeHorizontal and f_RearrangeVertical
//  Description:    Rearranges from one orientation to the other
//-----------------------------------------------------------------------------
function f_RearrangeHorizontal()
{
    var root = _oTable.children[0];
    if (root.children.length == 0)
    {
        root.appendChild(element.document.createElement("TR"));
        return;
    }
    var topRow = root.children[0];

    if (topRow.children.length > 0)
    {
        var item = topRow.children[0];
        f_AdjustContents(item);
        f_AdjustSeps(item);
    }

    while (root.children.length > 1)
    {
        var item = topRow.appendChild(root.children[1].children[0]);
        f_AdjustContents(item);
        f_AdjustSeps(item);
        root.children[1].removeNode(true);
    }

    f_ApplyStylesToChildren();
}

function f_RearrangeVertical()
{
    var root = _oTable.children[0];
    if (root.children.length == 0)
        return;
    var oldRow = root.children[0];
    if (oldRow.children.length == 0)
    {
        oldRow.removeNode(true);
        return;
    }

    if (oldRow.children.length > 0)
    {
        var item = oldRow.children[0];
        f_AdjustContents(item);
        f_AdjustSeps(item);
    }

    while (oldRow.children.length > 1)
    {
        var row = element.document.createElement("TR");
        if (item._type == "emptygroup")
            row.style.display = "none";
        root.appendChild(row);
        var item = row.appendChild(oldRow.children[1]);
        f_AdjustContents(item);
        f_AdjustSeps(item);
    }

    f_ApplyStylesToChildren();
}

//+----------------------------------------------------------------------------
//  Function:       f_AdjustSeps
//  Description:    Adjusts separators and grippers when turning
//-----------------------------------------------------------------------------
function f_AdjustSeps(item)
{
    if ((item._type != "separator") && (item._type != "gripper"))
        return;

    var builtIn;
    if ((element.style.writingMode != null) && (element.style.writingMode == "tb-rl"))
    {
        if (item._type == "separator")
            builtIn = (orientation == "vertical") ? _szSeparatorHorizStyle : _szSeparatorVertStyle;
        else
            builtIn = (orientation == "vertical") ? _szGripperHorizStyle : _szGripperVertStyle;
    }
    else
    {
        if (item._type == "separator")
            builtIn = (orientation == "vertical") ? _szSeparatorVertStyle : _szSeparatorHorizStyle;
        else
            builtIn = (orientation == "vertical") ? _szGripperVertStyle : _szGripperHorizStyle;
    }

    item.children[0].style.cssText = builtIn + ";" + item.children[0]._origStyle;
}

//+----------------------------------------------------------------------------
//  Function:       get_turnVerticalContent and set_turnVerticalContent
//  Description:    Gets and sets the turnVerticalContent property
//  Get:    Returns true if OK to trun, false otherwise.
//  Set:    Sets the turnVerticalContent property. Accepts boolean or string values.
//-----------------------------------------------------------------------------
function get_turnVerticalContent()
{
    return _TurnVerticalContent;
}

function set_turnVerticalContent(value)
{
    var bOrig = _TurnVerticalContent;

    if (typeof value == "boolean")
    {
        _TurnVerticalContent = value;
    }
    else if (typeof value == "string")
    {
        var lVal = value.toLowerCase();
        _TurnVerticalContent = (lVal != "false") && (lVal != "no") && (lVal != "0");
    }

    if (_Ready && (bOrig != _TurnVerticalContent))
    {
        if (_Orientation == "vertical")
            f_RearrangeVerticalContent();
        prTurnVerticalContent.fireChange();
    }
}

function f_RearrangeVerticalContent()
{
    var root = _oTable.children[0];
    if (root.children.length == 0)
        return;

    for (var row = 0; row < root.children.length; row++)
    {
        f_AdjustContents(root.children[row].children[0]);
    }

    f_ApplyStylesToChildren();
}

//+----------------------------------------------------------------------------
//  Function:       get_ and set_ defaultStyle, hoverStyle, and selectedStyle
//  Description:    Gets and sets the different styles for the control.
//  Get:    Returns the CSS style string.
//  Set:    Sets the CSS style. Accepts strings.
//-----------------------------------------------------------------------------
function get_defaultStyle()
{
    return _tbDefaultStyle;
}

function set_defaultStyle(value)
{
    var orig = _tbDefaultStyle;

    if (typeof value == "string")
    {
        _tbDefaultStyle = value;

        if (_Ready)
            f_ApplyStylesToChildren();
    }

    if (_Ready && (orig != _tbDefaultStyle))
    {
        prDefaultStyle.fireChange();
    }
}

function get_hoverStyle()
{
    return _tbHoverStyle;
}

function set_hoverStyle(value)
{
    var orig = _tbHoverStyle;

    if (typeof value == "string")
    {
        _tbHoverStyle = value;

        if (_Ready)
            f_ApplyStylesToChildren();
    }

    if (_Ready && (orig != _tbHoverStyle))
    {
        prHoverStyle.fireChange();
    }
}

function get_selectedStyle()
{
    return _tbSelectedStyle;
}

function set_selectedStyle(value)
{
    var orig = _tbSelectedStyle;

    if (typeof value == "string")
    {
        _tbSelectedStyle = value;

        if (_Ready)
            f_ApplyStylesToChildren();
    }

    if (_Ready && (orig != _tbSelectedStyle))
    {
        prSelectedStyle.fireChange();
    }
}

//+----------------------------------------------------------------------------
//  Function:       get_movement and set_movement
//  Description:    Gets and sets the movement property
//  Get:    Returns "move" or "move-dock"
//  Set:    Sets the movement property. Accepts strings.
//-----------------------------------------------------------------------------
function get_movement()
{
    return _Movement;
}

function set_movement(value)
{
    var szOrig = _Movement;

    if (typeof value == "string")
    {
        var lVal = value.toLowerCase();
        switch (lVal)
        {
        case "move":