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、同樣的方法還可以修改左側導航,如下圖:

結束語

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

附  錄

  SharePoint 2013 托管導航及相關配置


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM