WebPart(SharePoint)中如何使用自訂的Javascript和css樣式

   最近一直在搞Share Point 和Workflow 的項目.好不容易做了出來,被老闆噴了一頓.說樣式太醜,performance太低.其實並不是不想去修飾Share point Webpart的介面.而是實在不知道怎麼去做.,不知道如何使用自訂的Js方法和css樣式.但是都被老闆指出來了.不做不行.做吧.於是上網搜了一堆的文檔,終於找到一個比較滿意的方法.提供給大家share一下.(已經會的expert ,請不要噴俺了)

　　由於SharePoint WebPart 不像asp.net,可以拖拽控制項,而且沒有前台代碼.你只能發布倒sharepoint上進行瀏覽.由於沒有前台的HTML,只有背景cs檔案.所以不能通過通常的在html中進行引用.不過最終你通過瀏覽器查看源碼的時候,肯定還是

<link rel...../>或者<script src....../>這種形式.關鍵問題是你如何才能達到這樣的目的.

1:首先我們來查看下sharepoint的頁面源碼:

通過源碼我們可以看到sharepoint的很多基本的東西都是放在:C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\template\LAYOUTS .目錄下.包括很多js,css ,html等,

2:如果不知道如何找到這個目錄,看(郵件_layouts->open就到該目錄了)

 

OK,既然知道了sharepoint很多引用的js,css檔案在_layouts,我們就好辦了.直接把你自己單獨的js檔案,css檔案在後台註冊就可以了.

3:定義javascript和css檔案.定義都很簡單

jsfile.js

Code
 function showMe(obj)
{

alert("Johnny zhang");

}

Mycss.css就更簡單了

Code
.MyCSS{background-color:red;font-size:36px}

4:在_layouts建立一個檔案夾,然後把你的js和css檔案copy進去
 

5:在sharepoint的webpart中註冊.方法也很簡單,沒有什麼說的(代碼簡單注釋)

Code
 protected override void OnPreRender(EventArgs e)
        {
//Register external Javascript code 
            Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "js0001", "/_layouts/JSfiles/JsFile.js");
//Regiser custom css style
            CssRegistration cssControls = new CssRegistration();
            cssControls.Name = "/_layouts/JSfiles/myStyle.css";
            Page.Header.Controls.Add(cssControls);            
        }
//Test js and css style
        protected override void Render(HtmlTextWriter writer)
        {
            writer.Write("<input type='button' class='MyCSS' id='dd' onclick='showMe(this)' value='Click Me'/>");
//userName.RenderControl(writer);
//saveButton.RenderControl(writer);
        }

5:效果:

 哈哈.問題的關鍵是我們找到了sharepoint的檔案目錄.
 正打算寫一個如何開發sharepoint webpart的系列.就算記錄自己的學習過程.