為SharePoint網(wǎng)站創(chuàng)建自定義導(dǎo)航菜單

1、相信不少人都希望把SharePoint網(wǎng)站內(nèi)置的那個(gè)頂部導(dǎo)航菜單，換成自己希望 的樣式。由于SharePoint 2007/2010的網(wǎng)站導(dǎo)航基本上基于標(biāo)準(zhǔn)的ASP.NET SiteMap模型，所以只要你對(duì)ASP.NET SiteMap有一些了解，就能創(chuàng)建一個(gè)自 定義的導(dǎo)航菜單。在開始之前，讓我們先從網(wǎng)上隨便找一個(gè)樣子比較cool的菜單控件。在下面的 示例中，我會(huì)選擇使用Smooth Navigation Menu這個(gè)jQuery控件，來(lái)渲染出 SharePoint網(wǎng)站的頂部導(dǎo)航菜單。將Smooth Navigation Menu控件相關(guān) 的.js、.css、.gif文件統(tǒng)統(tǒng)下載下來(lái)，我們將把

2、它們都放進(jìn)SharePoint項(xiàng)目中。打開Visual Studio 2010，創(chuàng)建一個(gè)SharePoint 2010項(xiàng)目（我最喜歡的項(xiàng)目模 板是“空白SharePoint項(xiàng)目”），在項(xiàng)目中添加一個(gè)映射文件夾，來(lái)存放Smooth Navigation Menu控件所需的所有文件。我選擇在Layouts文件夾中創(chuàng)建一個(gè) SmoothNavMenu子文件夾來(lái)存放這些文件，如下圖所示：接下來(lái)開始創(chuàng)建自定義導(dǎo)航菜單。實(shí)際上，我們有很多方法可以用來(lái)創(chuàng)建自定義 導(dǎo)航菜單。例如，我們可以選擇以自定義控件的方式，來(lái)創(chuàng)建一個(gè)自定義導(dǎo)航菜 單。由于在這個(gè)示例中，我們使用的是一個(gè)jQuery插件來(lái)實(shí)現(xiàn)界面渲染，所以

3、 選擇以用戶控件（.ascx）的方式來(lái)創(chuàng)建自定義導(dǎo)航菜單，似乎是一個(gè)更好的選 擇。在Visual Studio 2010中，向項(xiàng)目中添加一個(gè)用戶控件，為其命名為 SmoothNavMenu.ascx。然后打開新建的這個(gè)SmoothNavMenu.ascx用戶控件，為其填充內(nèi)容。SmoothNavMenu.ascx 中大部分的內(nèi)容，都是按照 Smooth Navigation Menu 控件的要求，添加所需的.css和.js引用。從第20行到第34行的JavaScript代 碼，作用是在頁(yè)面載入之后，將Smooth Navigation Menu初始化。具體用法請(qǐng) 參考 Smooth Navig

4、ation Menu 的網(wǎng)站第16行到第18 行,我們將一個(gè)Literal控件放到一個(gè)vdiv元素中。在用戶控件 的后臺(tái)代碼中，會(huì)查詢當(dāng)前網(wǎng)站的頂部導(dǎo)航結(jié)構(gòu)，并生成相應(yīng)的html元素，然 后通過(guò)這個(gè)Literal控件填充進(jìn)用戶控件。vdiv元素的聲明同樣是Smooth Navigation Menu 的要求。Smooth Navigation Menu 會(huì)根據(jù) Literal 控件所輸出 的html元素，渲染出導(dǎo)航菜單。接著打開用戶控件SmoothNavMenu.ascx的后臺(tái)代碼文件， SmoothNavMenu.ascx.cs。在用戶控件的后臺(tái)代碼中，我們需要獲得當(dāng)前網(wǎng)站 的頂部導(dǎo)航結(jié)構(gòu)，

5、并根據(jù)其結(jié)構(gòu)生成html元素。獲得網(wǎng)站頂部導(dǎo)航結(jié)構(gòu)的代碼 是：66叭63697666叭636976SiteMapProvider siteMapPnovider = PortalSiteMapProvider.CombineSiterupJJode root Node = siteMpProviderRootNode;return rootNode;然后在Page_Load事件中，我們調(diào)用此方法來(lái)得到網(wǎng)站頂部導(dǎo)航結(jié)構(gòu)，然后通 過(guò)BuildMenuContent方法（此方法的具體實(shí)現(xiàn)代碼略）生成Smooth Navigation Menu所需的html元素，然后將這些html元素通過(guò)Litera

6、l控件的Text屬性填 充到用戶控件界面上。E1819202122protected void Page_Load(E1819202122SiteNapNode rootNode 二 GetSiteMapRootNodeOfCurrentWeb(jString menuContent = ESu 1_丄7曲己門1；匚011七11上(廠001:11。He); menuContentLiteral.Text = menuContentj好了，到這里，我們已經(jīng)把自定義的導(dǎo)航菜單創(chuàng)建好了。但是，如果你想要在網(wǎng) 站上使用它，還需要把它放到網(wǎng)站的母版頁(yè)上面去，同時(shí)刪除母版頁(yè)上那個(gè)默認(rèn) 的導(dǎo)航菜單控件。要做

7、到這些，你可以使用SharePoint Designer，打開網(wǎng)站， 找到母版頁(yè)，然后蠻干?；蛘呤褂酶玫姆椒?，在項(xiàng)目中創(chuàng)建一個(gè)新的母版頁(yè)， 讓新母版頁(yè)上使用我們創(chuàng)建的自定義導(dǎo)航菜單，然后使網(wǎng)站使用新的母版頁(yè)。在Visual Studio 2010中，向項(xiàng)目中添加一個(gè)“模塊”，把VS2010自動(dòng)創(chuàng)建的那 個(gè)Sample.txt文件改名為v4_SmoothNavMenu.master,然后把內(nèi)容替換為 SharePoint 2010網(wǎng)站默認(rèn)使用的v4.master母版頁(yè)的內(nèi)容（直接在SharePoint Designer中找到v4.master,打開它，全選所有html內(nèi)容，復(fù)制，然后到VS20

8、10 中打開 v4_SmoothNavMenu.master,粘貼）。由于我們需要把v4_SmoothNavMenu.master文件放進(jìn)網(wǎng)站的母版頁(yè)樣式庫(kù)里 面，所以打開Elements.xml,編輯其內(nèi)容，修改vModule標(biāo)簽的Url屬性為 “_catalogs/masterpage”，修改 vF ile 標(biāo)簽的 Type 屬性為“ GhostablelnLibrary”：現(xiàn)在我們來(lái)修改v4_SmoothNavMenu.master這個(gè)母版頁(yè)文件，從Visual Studio 2010中打開它，首先在頭部區(qū)域，添加一個(gè)% Register %標(biāo)簽，將之前創(chuàng) 建的那個(gè)用戶控件注冊(cè)到頁(yè)面上：

9、.SaeethlHtviltiw * 胡9I DOCTYPE htrfll PUBLIC H-.SaeethlHtviltiw * 胡9html lan= di r=1,%$ Re sources : wss, multipages_ H 產(chǎn)i i卄 1 * N 亡厶聲kJ凸產(chǎn) w E 1 r U 宀=用i i盧丹-亡J* B凸rift勻上 血 ；J* mt嚴(yán)軍4* - 產(chǎn)丹硏 -C*希彳產(chǎn)d f * 產(chǎn)旦川凸wHH-hria】-詞35SSharePoint DeleeteCantrcl i*unat =MserverH ContirclId=TopNavig3tionDat3Sour%Mas

10、ter languagX#Regist&p Tdgprefix=SharePoint Nam$spac= Microsoft.SharePoint.WebControls Assembly-Microsoft .SharePoint, Version=14.3.G.0, Culture=neutralJ PutiliclCeyToket麵 Register Tagpref ix=*Utilit i&51 Namespace=Microsoft. SharePoint, Uti litiesM, Assembly=MMicrosoft,SharePointV&r5ion=14,0,0. Cult

11、ure=neutral, PublicKeyTokeAsmbly Njme=MicrosoftWeVersion=14.G.G.Gj Culture=neutrai PublieKeyToken=71e9bcelll9429c %Import Nsmespsce- *Mic rosof t, SharePoint. Applicat ionPages * %O邂 Register Tagpref ix=RIWebPartPages* Namespace= Microsoft.SharePoint,WebPartPag Assembly=Microsoft.SharePointj V&rsior

12、t= Culture=neutrlPuhlicKeyTokeRegister TjgPrefix=HwSsucir TagNsme = HWe 1 come1- 5rc = H*-/_Controltemplates/WelCQniv懸 Register TagPrefix=ptwssuc TagNamesMUISelector src= Pl/_controltemplates/MUFtegitep TagPiref ix=,rwssuc T a gN a me - Design Mode 匚 onEcJ壬src=/_contrfllteinpla a石 wtt 獸冷 尺亡gi妣亡廠 Tag

13、Prefix=blwssuc TagName = HSmoothNavMenuH src= /controltemplates/ SmoothNavMenu,ascx %然后搜索母版頁(yè)中一個(gè)ID為“PlaceHolderHorizontalNaV的ContentPlaceHolder控件，將里面的那個(gè)AspMenu控件刪除掉（它就是母版頁(yè) 上原本用來(lái)顯示頂部導(dǎo)航菜單的控件），然后將我們創(chuàng)建的用戶控件添加到這個(gè) 地方： |Ii?-TopNavigationHenuV41Runat-J，server*1En abl eV iew5tBJ_e=,false才嚴(yán)*DataSourceID=top2 t

14、eMap,hAcces5Key= UseSimpleR.endej-i.ngitUseS epa rateCss=事Jrf曲廣Orientatioinjtfrfzontal1Stet i亡尖護(hù)費(fèi);x W 2MaxiWy na mi cDi splay Level s=l* XipLirtkText=，r，匚 mg匸二百4 -tasp:ContentPlaceHolder id-PlaceHolderTopNavEarn runat asp:ContentPlaceholder id=PlaceHolderHorizont SharePoint: AspMenuamiX3413423433443

15、45346347348349350351352353354355356母版頁(yè)就成功改好了！我們希望網(wǎng)站的管理員可以通過(guò)激活或停用一個(gè)Feature, 就相應(yīng)的啟用或停用這個(gè)新建的母版頁(yè)。所以，在Visual Studio 2010中，打開 Features文件夾，將VS2010自動(dòng)創(chuàng)建的Featurei改名為SmoothNavMenuFeature,雙擊它，在Feature設(shè)計(jì)器界面上為這個(gè)Feature 添加更友好的說(shuō)明信息：勺護(hù)thN權(quán)胡畔黔屯F*電twrt, fttur褓:夬方塞痢世翟勺護(hù)thN權(quán)胡畔黔屯F*電twrt, fttur褓:夬方塞痢世翟B j CnstoHi! 田 3 Pra

16、piB 3引用日FtatvKEB0EF“kw Cnti 匚護(hù)：nHLtyg kty. i在SmoothNavMenuFeature上點(diǎn)擊鼠標(biāo)右鍵，選擇“添加事件接收器”，然后在 生成的代碼文件中，取消FeatureActivated和FeatureDeactivating方法的注釋, 并添加如下代碼。簡(jiǎn)單來(lái)說(shuō)，這些代碼的作用是在管理員激活這個(gè)功能時(shí)，自動(dòng) 為網(wǎng)站應(yīng)用新的母版頁(yè)，并在管理員停用功能時(shí)，恢復(fù)網(wǎng)站原有的母版頁(yè)。大功告成！編譯，部署，激活“Smooth Navigation Menu導(dǎo)航菜單”功能，回到 網(wǎng)站首頁(yè)，應(yīng)該就能看到網(wǎng)站的頂部導(dǎo)航菜單已經(jīng)被替換成了我們創(chuàng)建的這個(gè)自 定義導(dǎo)航菜

17、單。通過(guò)“網(wǎng)站設(shè)置-頂部鏈接欄”管理頁(yè)面，你可以為頂部導(dǎo)航添加新的節(jié)點(diǎn)。但 是，如果這個(gè)SharePoint網(wǎng)站不是一個(gè)發(fā)布網(wǎng)站，通過(guò)內(nèi)置的“網(wǎng)站設(shè)置-頂 部鏈接欄”管理頁(yè)面是沒(méi)法直接創(chuàng)建二級(jí)菜單的。嗯，實(shí)際上，這里有一個(gè)小技 巧，通過(guò)直接在地址欄輸入“ http:/網(wǎng)站url/_layouts/AreaNavigationSettings.aspx”，就能打開原本只有發(fā)布網(wǎng)站才能 使用的導(dǎo)航設(shè)置頁(yè)面，其中的“全局導(dǎo)航”就是網(wǎng)站的頂部導(dǎo)航，在這里是可以直 接向“全局導(dǎo)航”添加二級(jí)菜單的：上移 下移 丸編輯X刪除Bi管加標(biāo)包逵加鏈 蜃全局導(dǎo)航口欄目一豈欄目一之前半部分豈欄目一之后半部分口欄目二J當(dāng)前導(dǎo)航口庫(kù)曳網(wǎng)站頁(yè)面豈共享文檔口列表豈曰歷豈任務(wù)口討論豈工作組討論然后，下面就是你可以看到的效果，這個(gè)菜單就是通過(guò)我們?cè)谏厦嫠鶆?chuàng)建的自定 義導(dǎo)航菜單所渲染出來(lái)的：Dev Site