SharePoint Welcome.ascx 控件自定义样式的另类解决方式
SharePoint网站中默认的welcome菜单如下样式是固定的如下:
下拉列表如下:
现在需要把菜单颜色改成白色,下拉列表中只保留Sign in as Different User 和 Sign Out两项。
查看相关代码如下:
<%@ Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/Welcome.ascx" %> <wssuc:Welcome id="IdWelcomeMain" runat="server" EnableViewState="false" > </wssuc:Welcome>
网上查了很多方法都是需要改写Welcome.ascx控件。Welcome.ascx是在SharePoint服务器上,但是公司安装SharePoint环境是没法擅自改的。于是想到了一个另类的解决方法。
查看客户端Welcome部分代码如下:
View Code <td valign="middle" class="ms-globallinks"> <span style="display:none"> <menu type='ServerMenu' id="zz3_ID_PersonalActionMenu" largeIconMode="true"> <ie:menuitem id="zz4_ID_PersonalInformation" type="option" iconSrc="/_layouts/images/menuprofile.gif" onMenuClick="javascript:GoToPage('\u002fteams\u002fmysite\u002f_layouts\u002fuserdisp.aspx?Force=True\u0026ID=' + _spUserId);return false;" text="My Settings" description="Update your user information, regional settings, and alerts." menuGroupId="100"></ie:menuitem> <ie:menuitem id="zz5_ID_LoginAsDifferentUser" type="option" onMenuClick="javascript:LoginAsAnother('\u002fteams\u002fmysite\u002f_layouts\u002fAccessDenied.aspx?loginasanotheruser=true', 0)" text="Sign in as Different User" description="Login with a different account." menuGroupId="200"></ie:menuitem> <ie:menuitem id="zz6_ID_RequestAccess" type="option" onMenuClick="window.location = '/teams/mysite/_layouts/reqacc.aspx?type=web';" text="Request Access" description="Email the site administrator to request additional permissions." menuGroupId="200"> </ie:menuitem> <ie:menuitem id="zz7_ID_Logout" type="option" onMenuClick="window.location = '/teams/mysite/_layouts/SignOut.aspx';" text="Sign Out" description="Logout of this site." menuGroupId="200"></ie:menuitem> <ie:menuitem id="zz8_ID_PersonalizePage" type="option" iconSrc="/_layouts/images/menupersonalize.gif" onMenuClick="javascript:MSOLayout_ChangeLayoutMode(true);" text="Personalize this Page" description="Add, remove, or update Web Parts on this page." menuGroupId="300"></ie:menuitem> </menu> </span> <span title="Open Menu"> <div id="zz9_Menu_t" class="ms-SPLink ms-SpLinkButtonInActive" onmouseover="MMU_PopMenuIfShowing(this);MMU_EcbTableMouseOverOut(this, true)" hoverActive="ms-SPLink ms-SpLinkButtonActive" hoverInactive="ms-SPLink ms-SpLinkButtonInActive" onclick=" MMU_Open(byid('zz3_ID_PersonalActionMenu'), MMU_GetMenuFromClientId('zz9_Menu'),event,false, null, 0);" foa="MMU_GetMenuFromClientId('zz9_Menu')" oncontextmenu="this.click(); return false;" nowrap="nowrap"> <a id="zz9_Menu" accesskey="L" href="#" onclick="javascript:return false;" style="cursor:hand;white-space:nowrap;" onfocus="MMU_EcbLinkOnFocusBlur(byid('zz3_ID_PersonalActionMenu'), this, true);" onkeydown="MMU_EcbLinkOnKeyDown(byid('zz3_ID_PersonalActionMenu'), MMU_GetMenuFromClientId('zz9_Menu'), event);" onclick=" MMU_Open(byid('zz3_ID_PersonalActionMenu'), MMU_GetMenuFromClientId('zz9_Menu'),event,false, null, 0);" oncontextmenu="this.click(); return false;" menuTokenValues="MENUCLIENTID=zz9_Menu,TEMPLATECLIENTID=zz3_ID_PersonalActionMenu" serverclientid="zz9_Menu">Welcome Bu, Xiao-Yang (Shawn)<img src="/_layouts/images/blank.gif" border="0" alt="Use SHIFT+ENTER to open the menu (new window)."/></a> <img align="absbottom" src="/_layouts/images/menudark.gif" alt="" /> </div> </span> <script type="text/javascript" language="javascript">var _spUserId=1;</script> </td>
于是想到了可以用JavaScript在客户端改样式和下拉菜单。
如下:
在自定义模板页Main.master中body标签加入onload方法:
function pageOnload() { var welcomeLink = document.getElementById("zz6_Menu"); if(welcomeLink != null) { welcomeLink.style.color = "#fff"; } var PersonalActionMenu = document.getElementById("zz1_ID_PersonalActionMenu"); if(PersonalActionMenu != null) { var PersonalInformation = document.getElementById("zz2_ID_PersonalInformation"); if(PersonalInformation!= null) { PersonalActionMenu.removeChild(PersonalInformation); } var RequestAccess= document.getElementById("zz4_ID_RequestAccess"); if(RequestAccess!= null) { PersonalActionMenu.removeChild(RequestAccess); } } }
最终效果: