爲SharePoint網站創建自定義導航菜單

相信不少人都希望把SharePoint網站內置的那個頂部導航菜單,換成自己希望的樣式。由於SharePoint 2007/2010的網站導航基本上基於標準的ASP.NET SiteMap模型,所以只要你對ASP.NET SiteMap有一些瞭解,就能創建一個自定義的導航菜單。

在開始之前,讓我們先從網上隨便找一個樣子比較cool的菜單控件。在下面的示例中,我會選擇使用Smooth Navigation Menu這個jQuery控件,來渲染出SharePoint網站的頂部導航菜單。將Smooth Navigation Menu控件相關的.js、.css、.gif文件統統下載下來,我們將把它們都放進SharePoint項目中。

打開Visual Studio 2010,創建一個SharePoint 2010項目(我最喜歡的項目模板是“空白SharePoint項目”),在項目中添加一個映射文件夾,來存放Smooth Navigation Menu控件所需的所有文件。我選擇在Layouts文件夾中創建一個SmoothNavMenu子文件夾來存放這些文件,如下圖所示:

image

接下來開始創建自定義導航菜單。實際上,我們有很多方法可以用來創建自定義導航菜單。例如,我們可以選擇以自定義控件的方式,來創建一個自定義導航菜單。由於在這個示例中,我們使用的是一個jQuery插件來實現界面渲染,所以選擇以用戶控件(.ascx)的方式來創建自定義導航菜單,似乎是一個更好的選擇。

在Visual Studio 2010中,向項目中添加一個用戶控件,爲其命名爲SmoothNavMenu.ascx。

image

然後打開新建的這個SmoothNavMenu.ascx用戶控件,爲其填充內容。

image

SmoothNavMenu.ascx中大部分的內容,都是按照Smooth Navigation Menu控件的要求,添加所需的.css和.js引用。從第20行到第34行的JavaScript代碼,作用是在頁面載入之後,將Smooth Navigation Menu初始化。具體用法請參考Smooth Navigation Menu的網站

第16行到第18行,我們將一個Literal控件放到一個<div>元素中。在用戶控件的後臺代碼中,會查詢當前網站的頂部導航結構,並生成相應的html元素,然後通過這個Literal控件填充進用戶控件。<div>元素的聲明同樣是Smooth Navigation Menu的要求。Smooth Navigation Menu會根據Literal控件所輸出的html元素,渲染出導航菜單。

接着打開用戶控件SmoothNavMenu.ascx的後臺代碼文件,SmoothNavMenu.ascx.cs。在用戶控件的後臺代碼中,我們需要獲得當前網站的頂部導航結構,並根據其結構生成html元素。獲得網站頂部導航結構的代碼是:

image

然後在Page_Load事件中,我們調用此方法來得到網站頂部導航結構,然後通過BuildMenuContent方法(此方法的具體實現代碼略)生成Smooth Navigation Menu所需的html元素,然後將這些html元素通過Literal控件的Text屬性填充到用戶控件界面上。

image

好了,到這裏,我們已經把自定義的導航菜單創建好了。但是,如果你想要在網站上使用它,還需要把它放到網站的母版頁上面去,同時刪除母版頁上那個默認的導航菜單控件。要做到這些,你可以使用SharePoint Designer,打開網站,找到母版頁,然後蠻幹。或者使用更好的方法,在項目中創建一個新的母版頁,讓新母版頁上使用我們創建的自定義導航菜單,然後使網站使用新的母版頁。

在Visual Studio 2010中,向項目中添加一個“模塊”,把VS2010自動創建的那個Sample.txt文件改名爲v4_SmoothNavMenu.master,然後把內容替換爲SharePoint 2010網站默認使用的v4.master母版頁的內容(直接在SharePoint Designer中找到v4.master,打開它,全選所有html內容,複製,然後到VS2010中打開v4_SmoothNavMenu.master,粘貼)。

image

由於我們需要把v4_SmoothNavMenu.master文件放進網站的母版頁樣式庫裏面,所以打開Elements.xml,編輯其內容,修改<Module>標籤的Url屬性爲“_catalogs/masterpage”,修改<File>標籤的Type屬性爲“GhostableInLibrary”:

image

現在我們來修改v4_SmoothNavMenu.master這個母版頁文件,從Visual Studio 2010中打開它,首先在頭部區域,添加一個<%@ Register %>標籤,將之前創建的那個用戶控件註冊到頁面上:

image

然後搜索母版頁中一個ID爲“PlaceHolderHorizontalNav”的ContentPlaceHolder控件,將裏面的那個AspMenu控件刪除掉(它就是母版頁上原本用來顯示頂部導航菜單的控件),然後將我們創建的用戶控件添加到這個地方:

image

母版頁就成功改好了!我們希望網站的管理員可以通過激活或停用一個Feature,就相應的啓用或停用這個新建的母版頁。所以,在Visual Studio 2010中,打開Features文件夾,將VS2010自動創建的Feature1改名爲SmoothNavMenuFeature,雙擊它,在Feature設計器界面上爲這個Feature添加更友好的說明信息:

image

在SmoothNavMenuFeature上點擊鼠標右鍵,選擇“添加事件接收器”,然後在生成的代碼文件中,取消FeatureActivated和FeatureDeactivating方法的註釋,並添加如下代碼。簡單來說,這些代碼的作用是在管理員激活這個功能時,自動爲網站應用新的母版頁,並在管理員停用功能時,恢復網站原有的母版頁。

image

大功告成!編譯,部署,激活“Smooth Navigation Menu 導航菜單”功能,回到網站首頁,應該就能看到網站的頂部導航菜單已經被替換成了我們創建的這個自定義導航菜單。

通過“網站設置 - 頂部鏈接欄”管理頁面,你可以爲頂部導航添加新的節點。但是,如果這個SharePoint網站不是一個發佈網站,通過內置的“網站設置 - 頂部鏈接欄”管理頁面是沒法直接創建二級菜單的。嗯,實際上,這裏有一個小技巧,通過直接在地址欄輸入“http://網站url/_layouts/AreaNavigationSettings.aspx”,就能打開原本只有發佈網站才能使用的導航設置頁面,其中的“全局導航”就是網站的頂部導航,在這裏是可以直接向“全局導航”添加二級菜單的:

image 

然後,下面就是你可以看到的效果,這個菜單就是通過我們在上面所創建的自定義導航菜單所渲染出來的:

image

雖然這篇文章是以SharePoint 2010爲基礎進行演示,但其中絕大部分內容是可以工作在SharePoint 2007網站中的(當然肯定沒有Visual Studio 2010如此之好的工具支持)。另外,對於導航中的權限、訪問羣組,並沒有在這個示例中有所體現。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章