1. 程式人生 > >SharePoint 2013 託管導航及相關配置

SharePoint 2013 託管導航及相關配置

  本文的思路是使用JQuery重寫SharePoint自帶託管導航的樣式,其實思路和指令碼都非常簡單,引用一下JQuery指令碼,然後重寫導航的樣式,把指令碼放到母版頁中,即可。當然,使用JQuery可以做很炫的導航,還是要看你的JQuery功底了,筆者前臺比較弱,JQuery也不經常使用,只是簡單例子介紹使用方法,還請勿見笑。

  之前看到一篇類似的部落格,是使用Asp.net讀取當前導航,然後解析html用JQuery重寫的,看到裡面的程式碼也不是很完整,實踐起來比較有難度,不如在頁面上直接操作DOM物件,來實現我們想要的效果。特別要說的是,SharePoint預設只支援三級導航,暫時我還沒有發現,如何繼續擴充套件,下面,進入圖文描述。

  1、 用SPD(SharePoint Designer 2013)開啟網站,找到母版頁,在高階模式下編輯檔案;

clip_image001

  2、 將指令碼拷貝到伺服器目錄,在Layouts目錄下建立一個MyScript資料夾;

  如下圖,兩個JQuery庫的檔案,一個是指令碼檔案(當然,你可以直接將指令碼放到母版頁中,也沒問題,但是需要SPD開啟母版頁,才能編輯指令碼,這樣記事本就可以了);

clip_image002

  3、 在母版頁中新增指令碼引用,我新增到了head節點裡面了,如下圖;

clip_image003

  4、 找到頂部導航,在外面套一個div標籤,寫上一定要不重複的id,方便JQuery獲取;

clip_image004

  5、 編寫引用的Navigation.js指令碼,如下圖:

clip_image005

  6、 儲存指令碼,檢視效果,如下圖:

  特:加上$("#OlderNavigationMenu li[class*='editArea']").css({"display":"none"});可以將後面的編輯連結隱藏;

clip_image006

       7、 同樣的方法,還可以修改左側導航,檢視效果,如下圖:

結束語

  本文介紹的就是一個思路,沒太在意效果,有需要的可以自己去調整樣式或者寫很炫的指令碼,好了,就到這裡,希望對大家有所幫助。

附  錄