創建與SharePoint 2010風格一致的下拉菜單

在筆者公司中,SharePoint得到了大規模的使用。最近,在IT託管的SharePoint 2010系統中,頁面最上方被統一加上了一個額外的區域,右上角放置了兩個額外的下拉菜單。

image

這兩個下拉菜單爲用戶提供了一些快捷鏈接,包括訪問IT的Support網站、查看當前網站的信息,以及從系統中申請一個新的SharePoint網站等。

imageimage

從上面的截圖可以看到,這兩個定製的下拉菜單使用了SharePoint的內置風格,它們的樣式與SharePoint 2010頁面上的網站操作與歡迎菜單保持了一致。如果我們要在自己的應用中,創建這樣一個與SharePoint 2010風格一致的下拉菜單,應該如何做呢?

要創建一個使用SharePoint內置風格的下拉菜單,可以創建一個自定義類,並讓其繼承自Microsoft.SharePoint.WebControls.ToolBarMenuButton類。通過調用父類所提供的各個屬性與方法,我們的自定義類就可以爲菜單添加自定義的菜單項。

在下面所示的代碼中,從第18到28行,初始化了這個菜單的基本樣式。基本上,我們會複用SharePoint 2010內置的CSS Class和圖片。第19行通過將MenuTemplateControl.LargeIconMode屬性指定爲true,使得菜單以大圖標模式進行展現。

第31行通過MenuControl.Text屬性指定了這個下拉菜單所顯示出來的文本內容。

image

接下來,我們開始向這個下拉菜單中添加子菜單項。添加子菜單項的方法有兩種,第一種是直接調用父類所提供的AddMenuItem()方法。此方法的各個參數分別是:

  • id:指定一個唯一的ID號;
  • displayName:菜單項的標題文字;
  • imageUrl:菜單項的圖標;
  • description:菜單項的描述文字;
  • navigateUrl:用戶點擊菜單項時,將用戶導航到此路徑;
  • onClickScript:用戶點擊菜單項時,執行指定的JavaScript腳本

image

第二種方法是先創建一個MenuItemTemplate對象,爲它的各個屬性賦值,然後將它添加到MenuTemplateControl.Controls集合裏面。

image

要在下拉菜單中添加一個分割線,調用父類的AddMenuItemSeparator()方法。

image

如果想在下拉菜單中添加二級菜單,就需要先創建一個SubMenuTemplate對象,將它添加到MenuTemplateControl.Controls集合裏面。然後一個一個的創建MenuItemTemplate對象,將它們添加到SubMenuTemplate對象的Controls集合中。

下面的代碼創建了一個“Support”二級菜單,然後向這個二級菜單添加了一個“GetIT”子菜單項。

image

最後要做的,就是將我們創建的這個自定義控件,放到頁面上去。根據我們想要放置的地方的不同,可以有不同的方式。比如,可以修改(或創建一個新的)母版頁。

通過上面的示範代碼最後創建出來的下拉菜單的呈現效果,如下圖所示。在下圖中,筆者將這個額外的菜單,放到了頁面的用戶歡迎菜單的左側。

image

在下一篇文章中,我將講述如何讓我們創建的自定義菜單,能夠和SharePoint Feature框架中的Custom Action整合在一起。也就是說,網站開發人員可以使用Custom Action,直接向我們所創建的自定義菜單中添加子菜單項,就如同向“網站操作”菜單中添加子菜單項那樣。通過這樣的整合,我們的自定義菜單將具有更好的靈活性和可擴展性。

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