快速而方便地: 為 SharePoint 創建您自己的 jQuery 沙箱

這是另一個帖子中的我 系列 有關如何使用 jQuery 使用 SharePoint.
如果您想要瞭解更多關於 jQuery, 我強烈建議你: jQuery 在行動 由熊 Bibeault 和 Routes.

在 SharePoint 中的 jQuery 入門是非常的簡單 (對我來說). (我有嚴重的問題,關於"最佳做法"的做法對生產部署這些東西, 但這是另一天). 我剛開始玩這種技術,並為此目的, 我創建了一個沙箱環境使用. 如果你想要瞭解的 jQuery 入門, 您可能會發現這種方法很有用.

1. 創建一個空白網站

在您的網站在某個地方創建一個空白網站和叫它像"jQuery 沙箱"聰明的東西.

2. 下載 jQuery

您可以從這裡下載的 jQuery javascript 庫: http://docs.jquery.com/Downloading_jQuery

要保存到您的桌面.

我一直在用的"還是測試"的版本.

3. 創建一個 SharePoint 文件庫

在沙箱網站, 創建文件庫.

4. 上載到 SharePoint 的 jQuery 庫

訪問您剛剛創建的文件庫和上傳的 jQuery 庫.

5. 創建自訂 SharePoint 清單

因為我想要標準 SharePoint 形式再亂動,我已經開始自訂清單. 您還可以創建頁面庫中的網頁或 web 部件頁和可能很多其他的地方.

將一些列添加到自訂清單,所以,你有什麼要運行 jQuery 反對. 我最初的目標是 ︰:

  1. 隱藏欄位.
  2. 將一個值分配給欄位.

與這一目標, 我添加了兩個文字欄位. 隨著時間的推移, 我會玩的連結, 圖像, 查找, 等.

6. NewForm.aspx Web 組件頁面修改和添加內容編輯器 Web 組件

這是一個小的黑色 magic-ish , 它是一個新的概念,對我. 我第一次聽說這從 保羅翼, SharePoint jQuery 超級巨星, 他 CodePlex 專案工地: http://spff.codeplex.com/.

請按照以下步驟添加到同一頁,為任何自訂的清單中顯示 NewForm.aspx 的布魯塞爾:

  1. 訪問自訂清單,並按一下新建.
  2. 將以下內容追加到 URL: 流覽量 = 共用&ToolPaneView = 2

這將改變你無聊的香草的資料輸入表單從這樣的事情:

image

到這:

image

向頁面添加內容編輯器 web 部件.

7. 寫你的第一個 jQuery 代碼

開放,CEWP 在代碼視圖中,添加以下內容:

image

這是實際的代碼,如果你想要複製/粘貼:

<腳本類型 ="文本 javascript"
    src ="../../jQuery Library/jquery-1.3.2.min.js">
</腳本>

<腳本類型 ="文本 javascript">
  $(功能() {

    $('' #resultsID).html(' 有 ' + $('' a).大小() + ' 標記此頁上標籤 '。);

  });
</腳本>

結果:
<div id ='' resultsID></div>
/結果

請注意,第一次 <腳本> 標記引用實際的 jQuery 庫. 大概是, 這些東西隨著時間的推移改變, 所以你要確保你) 使用合適的名稱,b) 它指向正確的 SharePoint 文件庫.

沐浴在榮耀

如果你能做到正確, 您將看到類似于以下內容的結果:

image

總結

這不是唯一的方法,要開始, 但它是快, 容易與您現有的 SharePoint 環境隔絕.

</結束>

訂閱我的博客.

跟我在 Twitter 上 http://www.twitter.com/pagalvin

del.icio.us 標籤: ,

2 上“的想法快速而方便地: 為 SharePoint 創建您自己的 jQuery 沙箱

  1. sujith krish

    你注意到在 editform.aspx 中添加 CEWP 將打破頁和版本資訊部分顯示在 UI 中嗎? 這的任何變通辦法?

    任何人 ?

    答覆

留言

您的電子郵件地址不會被公開. 必需的地方已做標記 *