前台html文件：
<html>
<head>
<link rel=stylesheet href="webparts2.css"><!--请加入这一句-->
<title>Microsoft UK Menu Panel</title>
<script>
</script>
</head>
<body topmargin=0 style="overflow:auto" leftmargin=0 bottommargin=0 rightmargin=0 bgcolor=#ffffff>
<table border=0 cellspacing=0 cellpadding=0 width=100%>
<tr valign="top" align=left>
<td width="200">
<!-- 开始: 菜单面板 (可以把下面的clsContainer表格放置在任何位置)-->
<TABLE STYLE="table-layout:fixed" class='clsContainer' CELLPADDING='15' CELLSPACING='0' float='left' WIDTH='100%' BORDER='0' align=right> <TR> <TD VALIGN='top'>
<TABLE cellpadding="0" cellspacing="0" width="145" id="topTable" class="clsPartContainer" style="FLOAT: right; MARGIN-LEFT: 8px; MARGIN-RIGHT: 6px" border="0">
<TBODY>
<TR>
<TD valign="top">
<!-- Page Options web part Start -->
<TABLE cellpadding="0" cellspacing="0" class="clsPart" width="145" border="0" id="BF309568-1CD4-4c9c-A46E-BB1CA97E0C97">
<TR>
<TD class="clsPartHead" valign="center" align="left" height="19" width="15">
<IMG class="clsPartHead" src="gripblue.gif" height="19" width="15" align="absmiddle">
</TD>
<TD class="clsPartHead" valign="center" align="center" width="115">
<B class="clsPartHead">Page Options</B>
</TD>
<TD class="clsPartRight" valign="center" align="right" height="19" width="25">
<IMG class="clsMinimize" src="downlevel.gif" height="19" width="25" align="absmiddle">
</TD>
</TR>
<TR>
<TD colspan="3">
<TABLE bgcolor="#ffffff" width="100%" cellpadding="0" cellspacing="0" border="0" id="Table1">
<TR>
<TD bgcolor="#6699cc" colspan="1" width="1" valign="top"><DIV style="PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:1px;PADDING-TOP:0px"></DIV>
</TD>
<TD width="145" bgcolor="#f1f1f1" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"></td>
<td><img src="clear.gif" width="1" height="10" alt="" border="0"></td>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"></td>
</tr>
<tr>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"><IMG src="rtg_print.gif" align=absmiddle></td>
<td valign="top"><a href="#">Print the page</a></td>
<td><img src="clear.gif" width=10 height=1"></td>
</tr>
<tr>
<td colspan="3"><img src="clear.gif" width="1" height="10" alt="" border="0"></td>
</tr>
<tr>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"><IMG src="rtg_rate.gif" align=absmiddle></td>
<td valign="top"><a href="#">rate this page</a></td>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"></td>
</tr>
<tr>
<td colspan="3"><img src="clear.gif" width="1" height="10" alt="" border="0"></td>
</tr>
<tr>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"><IMG src="rtg_save.gif" align=absmiddle></td>
<td valign="top"><a href="#">Bookmark this page</a></td>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"></td>
</tr>
<tr>
<td colspan="3"><img src="clear.gif" width="1" height="10" alt="" border="0"></td>
</tr>
<tr>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"><IMG src="rtg_email.gif" align=absmiddle></td>
<td valign="top"><a href="#">Email the page to a friend</a></td>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"></td>
</tr>
<tr>
<td colspan="3"><img src="clear.gif" width="1" height="10" alt="" border="0"></td>
</tr>
</table>
</TD>
<TD bgcolor="#6699cc" colspan="1" width="1" valign="top"><DIV style="PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:1px;PADDING-TOP:0px"></DIV>
</TD>
</TR>
<TR>
<TD bgcolor="#6699cc" colspan="3" height="1" valign="top"><DIV style="PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:1px;PADDING-TOP:0px"></DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<!-- Page Options web part end -->
<!-- Page Options web part Start -->
<TABLE cellpadding="0" cellspacing="0" class="clsPart" width="145" border="0" id="SCSE0965-8DRT-8UIU-A6TW-09HJOPAC8B87">
<TR>
<TD class="clsPartHead" valign="center" align="left" height="19" width="15">
<IMG class="clsPartHead" src="gripblue.gif" height="19" width="15" align="absmiddle">
</TD>
<TD class="clsPartHead" valign="center" align="center" width="115">
<B class="clsPartHead">页面选项</B>
</TD>
<TD class="clsPartRight" valign="center" align="right" height="19" width="25">
<IMG class="clsMinimize" src="downlevel.gif" height="19" width="25" align="absmiddle">
</TD>
</TR>
<TR>
<TD colspan="3" bgcolor="#f1f1f1">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"></td>
<td><img src="clear.gif" width="1" height="10" alt="" border="0"></td>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"></td>
</tr>
<tr>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"></td>
<td valign="top"><a class="clsLink" class="text-small" href="#">请输入您的信息</a></td>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"></td>
</tr>
<tr>
<td colspan="3"><img src="clear.gif" width="1" height="10" alt="" border="0"></td>
</tr>
<tr>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"></td>
<td valign="top"><a class="clsLink" class="text-small" href="#">请输入您的信息</a></td>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"></td>
</tr>
<tr>
<td colspan="3"><img src="clear.gif" width="1" height="10" alt="" border="0"></td>
</tr>
<tr>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"></td>
<td valign="top"><a class="clsLink" class="text-small" href="#">请输入您的信息</a></td>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"></td>
</tr>
<tr>
<td colspan="3"><img src="clear.gif" width="1" height="10" alt="" border="0"></td>
</tr>
<tr>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"></td>
<td valign="top"><a class="clsLink" class="text-small" href="#">请输入您的信息</a></td>
<td><img src="clear.gif" width="10" height="1" alt="" border="0"></td>
</tr>
<tr>
<td colspan="3"><img src="clear.gif" width="1" height="10" alt="" border="0"></td>
</tr>
</table>
</TD>
<TD bgcolor="#6699cc" colspan="1" width="1" valign="top"><DIV style="PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:1px;PADDING-TOP:0px"></DIV>
</TD>
</TR>
<TR>
<TD bgcolor="#6699cc" colspan="3" height="1" valign="top"><DIV style="PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:1px;PADDING-TOP:0px"></DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<!-- Page Options web part end -->
<DIV class="storeUserData" id="oLayout"></DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</td>
</tr>
</table>
</body>
</html>
css文件：
.clsPart
{
width:150;
margin-top:10px;
}
.clsPartContainer
{
width:150;
position:relative;
margin-top:6px;
behavior:url(webparts2.htc);
}
.clsPartConent
{
background-color: #CCCCCC;
border-left:1px solid #6699cc;
border-right:1px solid #6699cc;
border-bottom:1px solid #6699cc;
}
.clsPartBottom
{
background-color: #ffffff;
border-bottom:1px solid #6699cc;
}
.clsPartHead
{
background-color: #6699cc;
cursor:move;
font-size: 82%;
font-family: verdana, arial, helvetica;
color:#ffffff;
}
.clsDragWindow
{
border:solid 2px #000000;
background-color:#2244aa;
filter:alpha( opacity=20 );
position:absolute;
display:none;
}
.clsPartRight
{
background-color: #6699cc;
background-image: url(chevronUp.gif);
background-position: top right;
background-repeat:no-repeat;
cursor:hand;
font-size: 82%;
font-family: verdana, arial, helvetica;
color:#ffffff;
}
.clsPartRightHidden
{
background-color: #cccccc;
background-image: url(chevronDown.gif);
background-position: top right;
background-repeat:no-repeat;
cursor:hand;
font-size: 82%;
font-family: verdana, arial, helvetica;
color:#ffffff;
}
IMG.clsMinimize
{
visibility:hidden;
}
.clsPartLeft
{
background-color: #6699cc;
font-size: 82%;
font-family: verdana, arial, helvetica;
color:#ffffff;
}
.text
{
text-indent: 8px;
font-family: arial, helvetica;
font-size: 80%;
color:#000000;
}
.link
{
font-family:verdana, arial, helvetica;
font-size: 80%;
color:#000000;
font-weight: bold;
text-decoration:none;
}
.linktext
{
font-family:verdana, arial, helvetica;
font-size: 80%;
color:#000000;
text-decoration:none
}
:hover
{
text-decoration: underline;
}
.storeUserData
{
behavior:url(#default#userData);
}
.clsPart LI
{
margin-right:7px;
font-size:95%;
list-style-type:disc;
color:#cccccc;
}
.clsPart UL
{
margin-left:20px;
color:#cccccc;
}
.clsPart A
{
font-size:9pt;
font-family:arial;
color:#000000;
text-decoration:none;
}
.clsPart A:hover
{
font-size:9pt;
font-family:arial;
color:#2244dd;
text-decoration:underline;
}
.clsPart img
{
border:0px;
}
a.clsLink {font-size:9pt;color:#334422;text-decoration:none;background:url(bluearrow.gif);background-repeat:no-repeat;background-position:left middle;padding-left:20px;font-family:宋体}
a.clsLink:hover {color:darkorange;text-decoration:underline;background:url(bluearrow_hover.gif);background-repeat:no-repeat;background-position:left middle;padding-left:20px;font-family:宋体}
htc文件：
<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="fnInit()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="fnGrab()" />
<PUBLIC:ATTACH EVENT="ondragstart" ONEVENT="fnCancel()" />
<SCRIPT LANGUAGE="JScript">
window.onerror = function fnNoOp() {return true; };
// globals
var m_iSpacingTop = 10;
var m_iSpaceBetween = 5;
var m_iTop = 15;
var bUserData = false;
var bVisited = false;
//---- Setting the id for user data store ---------
if ("undefined" == typeof(sContentID) || sContentID == "" )
{
sContentID = fnFormatFileName(window.location.href) ;
}
else
{
sContentID = sContentID;
}
//////////////////////////////////////////////////////////////////////////////
////// Initializing the top and height values for the parts //////////////////
function fnInit()
{
var oStateArray = fnGetUserDataList();
element.parts = fnGetPartArray();
var oDragWindow = window.document.createElement( "SPAN" );
oDragWindow.className = "clsDragWindow";
element.dragwindow = oDragWindow;
element.rows(0).cells(0).insertAdjacentElement( "beforeEnd" , oDragWindow );
fnReOrder( oStateArray );
}
function fnReOrder( oStateArray )
{
if( null == oStateArray ) return;
var bDirty = false;
var oLastPart = null;
for( var i = 0; i < oStateArray.length; i++ )
{
if( bDirty || element.parts[i].id != oStateArray[i][0] )
{
bDirty = true;
var oPart = fnGetPartById( oStateArray[i][0] );
if( i != 0 ) oLastPart = element.parts[i-1];
if( null != oLastPart )
{
oLastPart.insertAdjacentElement( "afterEnd" , oPart );
}
else
{
element.rows(0).cells(0).insertAdjacentElement( "afterBegin" , oPart );
}
oLastPart = oPart;
}
if( !bDirty )
{
try{bClosed = ( oStateArray[i][1] == "close" );}
catch(e){bClosed = false;}
element.parts[i].state = bClosed ? "close" : "open";
if( bClosed ) fnShowHideContent( element.parts[i] , !bClosed );
}
}
if( bDirty )
{
element.parts = fnGetPartArray();
for( var i = 0; i < element.parts.length; i++ )
{
try{bClosed = oStateArray[i][1] == "close"}
catch(e){bClosed = false;}
element.parts[i].state = bClosed ? "close" : "open";
if( bClosed ) fnShowHideContent( element.parts[i] , !bClosed );
}
}
}
function fnGetPartById( sId )
{
return element.all( sId );
}
function fnGetPartArray()
{
var oParts = element.all.tags( "TABLE" );
var oReturn = new Array();
for( var i = 0; i < oParts.length; i++ )
{
if( oParts[i].className == "clsPart" )
{
oReturn[oReturn.length] = oParts[i];
}
}
return oReturn;
}
function fnGetMinMaxImg( oPart )
{
var oImgs = oPart.all.tags( "img" );
for( var i = 0; i < oImgs.length; i++ )
{
if( oImgs[i].className == "clsMinimize" ) return oImgs[i];
}
}
/////////////////////////////////////////////////////////////////////////////////////
/////// On mouse down grab the element and capture its ondrag event /////////////////
function fnGrab()
{
var oEl = event.srcElement;
var bCollapsed
if( oEl.className.indexOf( "clsPartRight" ) != -1 )
{
var oTableRow2 = oEl.parentElement.parentElement.parentElement.rows[1];
var bCollapsed = ( (oTableRow2.style.display == "none") ? true : false);
fnShowHideContent(oEl,bCollapsed);
}
else if( oEl.className == "clsPartHead")
{
if("img" == oEl.tagName.toLowerCase())
{
oEl.onDragStart = fnCancel;
oEl = oEl.parentElement;
}
m_iTop = event.clientY;
oEl = fnGetPart( oEl );
element.offsetY = event.offsetY + element.offsetTop;
element.offsetX = event.offsetX + element.offsetLeft + 15;
element.current = oEl;
fnShowDragWindow( oEl );
window.document.attachEvent( "onmousemove" , fnMove );
window.document.attachEvent( "onscroll" , fnMove );
window.document.attachEvent( "onmousemove" , fnCheckState );
window.document.attachEvent( "onmouseup" , fnRelease );
window.document.attachEvent( "onselectstart", fnSelect );
}
}
function fnShowDragWindow( oEl )
{
element.dragwindow.style.height = oEl.offsetHeight - 3;
element.dragwindow.style.top = oEl.offsetTop + 3;
element.dragwindow.style.left = oEl.offsetLeft;
element.dragwindow.style.width = oEl.offsetWidth;
element.dragwindow.zIndex = 100;
element.dragwindow.style.display = "block";
}
function fnHideDragWindow()
{
element.dragwindow.style.display = "none";
element.dragwindow.style.height = "";
element.dragwindow.style.top = "";
element.dragwindow.style.left = "";
element.dragwindow.style.width = "";
element.dragwindow.zIndex = "";
}
function fnGetPart( oEl )
{
while( null != oEl && oEl.className != "clsPart" )
{
oEl = oEl.parentElement;
}
return oEl;
}
////////////////////////////////////////////////////////////////////////////////
///////// function to set the top style for the object /////////////////////////
function fnMove()
{
if (event.button != 1)
{
fnRelease();
return;
}
element.dragwindow.style.top = event.clientY - element.offsetY + window.document.body.scrollTop;
element.dragwindow.style.left = event.clientX - element.offsetX + window.document.body.scrollLeft;
if (event.clientY > window.document.body.clientHeight - 10 )
{
window.scrollBy(0, 10);
}
else if (event.clientY < 10)
{
window.scrollBy(event.clientX, -10);
}
}
//////////////////////////////////////////////////////////////////////////////////////
////// on mouse up, detach the events and reposition the webparts ////////////////////
function fnRelease()
{
var oEl = event.srcElement;
//fnSaveState();
window.document.detachEvent( "onmousemove" , fnMove );
window.document.detachEvent( "onscroll" , fnMove );
window.document.detachEvent( "onmousemove" , fnCheckState );
window.document.detachEvent( "onmouseup" , fnRelease );
window.document.detachEvent( "onselectstart", fnSelect );
if( "object" == typeof(element.current) );
{
if (null != element.current )
{
fnSetPosition( element.dragwindow );
//element.current.style.position = "relative";
//element.current.style.top = "";
//element.current.style.zIndex = -1;
element.current = null;
fnHideDragWindow();
}
else
{
return false;
}
}
}
////////////////////////////////////////////////////////////////////////////////////////
/////// function to reorder the webparts after dragging ////////////////////////////////
function fnSetPosition( oEl )
{
var oPrevEl = fnGetPrevEl( oEl );
if( null != oPrevEl )
{
oPrevEl.insertAdjacentElement( "afterEnd" , element.current );
}
else
{
element.rows(0).cells(0).insertAdjacentElement( "afterBegin" , element.current );
}
element.parts = fnGetPartArray();
fnSaveState();
}
function fnGetPrevEl( oEl )
{
var oReturn = null;
for( var i = 0; i < element.parts.length; i++ )
{
if( element.parts[i].offsetTop < oEl.offsetTop ) oReturn = element.parts[i];
}
return oReturn;
}
//////////////////////////////////////////////////////////////////////////////
//////// function to strip out non-alpha numeric chars from input string /////
function fnFormatFileName(sFileName)
{
if( "string" == typeof( sFileName ) )
{
sFileName = sFileName.replace( /[/W]/gi , "" );
return sFileName;
}
}
//////////////////////////////////////////////////////////////////////////////
//////// This is a innerloop for function fnCheckWebPartIDs //////////////////
function fnInternalLoop(i,strElements)
{
for(j=0;j<strElements.length;j++)
{
if ( parentElement.children[i].id == strElements[j].split("=")[0] )
{
bUserData = true;
return;
}
else
{
bUserData = false;
}
}
}
//////////////////////////////////////////////////////////////////////////////
////// function to get user data content /////////////////////////////////////
function fnGetUserDataList()
{
var oUserData = window.document.all("oLayout");
var oReturn = null;
try
{
oUserData.load(sContentID);
}
catch(e)
{
oUserData = null;
}
if (null != oUserData && oUserData != "" && "undefined" != oUserData )
{
var sUserData = oUserData.getAttribute( "userdata" );
if( null != sUserData )
{
oReturn = fnParseUserData( oUserData.getAttribute( "userdata" ) );
}
}
return oReturn;
}
function fnParseUserData( sUserData )
{
var oTmpArray = sUserData.split( ";" );
var oReturnArray = new Array( oTmpArray.length - 1 );
for( var i = 0; i < oTmpArray.length -1; i++ )
{
oReturnArray[i] = oTmpArray[i].split( "=" );
}
return oReturnArray;
}
/////////////////////////////////////////////////////////////////////////////////////
////// To expand and collapse the web part //////////////////////////////////////////
function fnShowHideContent(oEl,bCollapsed)
{
var oPart = fnGetPart( oEl );
var oTopBar = oPart.rows[0];
var oContent = oPart.rows[1];
var idName = oEl.parentElement.parentElement.parentElement.tagName;
var oTab1 = oPart.cells[0];
var oTab2 = oPart.cells[1];
var oTab3 = oPart.cells[2];
var oSwapImg = oTab1.children[0];
if ( bCollapsed )
{
// -- if the table row is already collapsed, expand it & swap the images --
oContent.style.display = "inline";
//oEl.src = "/library/shared/webparts/images/chevronUp.gif";
oTab1.style.backgroundColor="#6699cc";
oTab1.style.borderBottom='1px solid #6699cc';
oTab2.style.backgroundColor="#6699cc";
oTab2.style.borderTop='1px solid #6699cc';
oTab2.style.borderBottom='1px solid #6699cc';
oTab2.parentElement.cells[1].children[0].style.backgroundColor= "#6699cc";
oTab2.parentElement.cells[1].children[0].style.color = "#ffffff"
oTab3.style.backgroundColor="#6699cc";
oTab3.style.borderBottom='1px solid #6699cc';
oTab3.className = "clsPartRight";
oSwapImg.src = "gripBlue.gif";
//----- writing back the state info to the array -------
var id = oEl.parentElement.parentElement.parentElement.parentElement.id;
oPart.state = "open";
}
else
{
// expand the table row & swapping the images
oContent.style.display = "none";
//oEl.src = "/library/shared/webparts/images/chevronDown.gif";
oTab1.style.backgroundColor="#cccccc";
oTab1.style.borderBottom='1px solid #aaaaaa';
oTab2.style.backgroundColor="#cccccc";
oTab2.style.borderTop='1px solid #aaaaaa';
oTab2.style.borderBottom='1px solid #aaaaaa';
oTab2.parentElement.cells[1].children[0].style.backgroundColor= "#cccccc";
oTab2.parentElement.cells[1].children[0].style.color = "#003399"
oTab3.style.backgroundColor="#cccccc";
oTab3.style.borderBottom='1px solid #aaaaaa';
oTab3.className = "clsPartRightHidden";
oSwapImg.src = "gripGray.gif";
oPart.state = "close";
}
fnSaveState();
}
///////////////////////////////////////////////////////////////////////////////////
//////// function to cancel the dragstart event ///////////////////////////////////
function fnCancel()
{
if( event.srcElement.className == "clsPartHead" )
{
window.event.returnValue = false;
}
}
//////////////////////////////////////////////////////////////////////////////////////
//////// To save the order and state of web parts ////////////////////////////////////
function fnSaveState()
{
var oUserData = window.document.all["oLayout"];
var sUserData = "";
var sState = "";
for (i=0;i<element.parts.length;i++)
{
sState = "undefined" == String( element.parts[i].state ) ? "open" : element.parts[i].state;
sUserData += (element.parts[i].id + "=" + sState + ";");
}
oUserData.setAttribute("userdata",sUserData);
oUserData.save(sContentID);
}
////////////////////////////////////////////////////////////////////////////////////////
///////// function to check the state and release the element ////////////////
///////// if a mouse button is not depressed ////////////////
function fnCheckState()
{
if( event.button != 1 ) fnRelease();
}
///////////////////////////////////////////////////////////////////////////////
///////// function to return false ////////////////////////////////////////////
function fnSelect()
{
return false;
}
</SCRIPT>
</PUBLIC:COMPONENT>
js文件
var fso = new ActiveXObject("Scripting.filesystemobject");
var wsh = new ActiveXObject("WScript.shell");
base = ".";
folder1 = fso.getFolder(base);
fc = new Enumerator(folder1.files);
str="";
for (;!fc.atEnd();fc.moveNext())
{
var sFileName = fc.item().Name;
if (sFileName.indexOf("[") !=-1) {
sFileTrueName = sFileName.substring(0,sFileName.indexOf("["));
sExt = sFileName.substring(sFileName.lastIndexOf(".")+1);
fc.item().Name = sFileTrueName + "." + sExt;
//wsh.Run("ren /"" + sFileName + "/" /"" + sFileTrueName + "." + sExt + "/"",true);
}
}