為SharePoint網站創建自定義導航菜單_第1頁
為SharePoint網站創建自定義導航菜單_第2頁
為SharePoint網站創建自定義導航菜單_第3頁
為SharePoint網站創建自定義導航菜單_第4頁
為SharePoint網站創建自定義導航菜單_第5頁
已閱讀5頁,還剩4頁未讀 繼續免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

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

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

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

4、ation Menu 的網站第16行到第18 行,我們將一個Literal控件放到一個vdiv元素中。在用戶控件 的后臺代碼中,會查詢當前網站的頂部導航結構,并生成相應的html元素,然 后通過這個Literal控件填充進用戶控件。vdiv元素的聲明同樣是Smooth Navigation Menu 的要求。Smooth Navigation Menu 會根據 Literal 控件所輸出 的html元素,渲染出導航菜單。接著打開用戶控件SmoothNavMenu.ascx的后臺代碼文件, SmoothNavMenu.ascx.cs。在用戶控件的后臺代碼中,我們需要獲得當前網站 的頂部導航結構,

5、并根據其結構生成html元素。獲得網站頂部導航結構的代碼 是:66叭63697666叭636976SiteMapProvider siteMapPnovider = PortalSiteMapProvider.CombineSiterupJJode root Node = siteMpProviderRootNode;return rootNode;然后在Page_Load事件中,我們調用此方法來得到網站頂部導航結構,然后通 過BuildMenuContent方法(此方法的具體實現代碼略)生成Smooth Navigation Menu所需的html元素,然后將這些html元素通過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好了,到這里,我們已經把自定義的導航菜單創建好了。但是,如果你想要在網 站上使用它,還需要把它放到網站的母版頁上面去,同時刪除母版頁上那個默認 的導航菜單控件。要做

7、到這些,你可以使用SharePoint Designer,打開網站, 找到母版頁,然后蠻干。或者使用更好的方法,在項目中創建一個新的母版頁, 讓新母版頁上使用我們創建的自定義導航菜單,然后使網站使用新的母版頁。在Visual Studio 2010中,向項目中添加一個“模塊”,把VS2010自動創建的那 個Sample.txt文件改名為v4_SmoothNavMenu.master,然后把內容替換為 SharePoint 2010網站默認使用的v4.master母版頁的內容(直接在SharePoint Designer中找到v4.master,打開它,全選所有html內容,復制,然后到VS20

8、10 中打開 v4_SmoothNavMenu.master,粘貼)。由于我們需要把v4_SmoothNavMenu.master文件放進網站的母版頁樣式庫里 面,所以打開Elements.xml,編輯其內容,修改vModule標簽的Url屬性為 “_catalogs/masterpage”,修改 vF ile 標簽的 Type 屬性為“ GhostablelnLibrary”:現在我們來修改v4_SmoothNavMenu.master這個母版頁文件,從Visual Studio 2010中打開它,首先在頭部區域,添加一個% Register %標簽,將之前創 建的那個用戶控件注冊到頁面上:

9、.SaeethlHtviltiw * 胡9I DOCTYPE htrfll PUBLIC H-.SaeethlHtviltiw * 胡9html lan= di r=1,%$ Re sources : wss, multipages_ H 產i i卄 1 * N 亡厶聲kJ凸產 w E 1 r U 宀=用i i盧丹-亡J* B凸rift勻上 血 ;J* mt嚴軍4* - 產丹硏 -C*希彳產d f * 產旦川凸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 %然后搜索母版頁中一個ID為“PlaceHolderHorizontalNaV的ContentPlaceHolder控件,將里面的那個AspMenu控件刪除掉(它就是母版頁 上原本用來顯示頂部導航菜單的控件),然后將我們創建的用戶控件添加到這個 地方: |Ii?-TopNavigationHenuV41Runat-J,server*1En abl eV iew5tBJ_e=,false才嚴*DataSourceID=top2 t

14、eMap,hAcces5Key= UseSimpleR.endej-i.ngitUseS epa rateCss=事Jrf曲廣Orientatioinjtfrfzontal1Stet 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母版頁就成功改好了!我們希望網站的管理員可以通過激活或停用一個Feature, 就相應的啟用或停用這個新建的母版頁。所以,在Visual Studio 2010中,打開 Features文件夾,將VS2010自動創建的Featurei改名為SmoothNavMenuFeature,雙擊它,在Feature設計器界面上為這個Feature 添加更友好的說明信息:勺護thN權胡畔黔屯F*電twrt, fttur褓:夬方塞痢世翟勺護thN權胡畔黔屯F*電twrt, fttur褓:夬方塞痢世翟B j CnstoHi! 田 3 Pra

16、piB 3引用日FtatvKEB0EF“kw Cnti 匚護:nHLtyg kty. i在SmoothNavMenuFeature上點擊鼠標右鍵,選擇“添加事件接收器”,然后在 生成的代碼文件中,取消FeatureActivated和FeatureDeactivating方法的注釋, 并添加如下代碼。簡單來說,這些代碼的作用是在管理員激活這個功能時,自動 為網站應用新的母版頁,并在管理員停用功能時,恢復網站原有的母版頁。大功告成!編譯,部署,激活“Smooth Navigation Menu導航菜單”功能,回到 網站首頁,應該就能看到網站的頂部導航菜單已經被替換成了我們創建的這個自 定義導航菜

17、單。通過“網站設置-頂部鏈接欄”管理頁面,你可以為頂部導航添加新的節點。但 是,如果這個SharePoint網站不是一個發布網站,通過內置的“網站設置-頂 部鏈接欄”管理頁面是沒法直接創建二級菜單的。嗯,實際上,這里有一個小技 巧,通過直接在地址欄輸入“ http:/網站url/_layouts/AreaNavigationSettings.aspx”,就能打開原本只有發布網站才能 使用的導航設置頁面,其中的“全局導航”就是網站的頂部導航,在這里是可以直 接向“全局導航”添加二級菜單的:上移 下移 丸編輯X刪除Bi管加標包逵加鏈 蜃全局導航口欄目一豈欄目一之前半部分豈欄目一之后半部分口欄目二J當前導航口庫曳網站頁面豈共享文檔口列表豈曰歷豈任務口討論豈工作組討論然后,下面就是你可以看到的效果,這個菜單就是通過我們在上面所創建的自定 義導航菜單所渲染出來的:Dev Site

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論