SharePoint 2010中的用戶端AJAX應用——jQuery的整合與持久化

本次我們將示範如何與jQuery進行整合，在一塊虛擬布告牌（Corkboard）上以可拖動的索引卡片的方式顯示每個清單項目，並且我們將擷取X和Y座標返回給SharePoint。

布告牌上的卡片

首先，為了使我們的應用更有趣一些，在PageHead裡加上一些CSS樣式設定（放在一個單獨的CSS樣式檔案裡的話當然更好）以便使我們的user stories項以卡片的方式顯示在布告牌上。

01　<style　type="text/css">
02　　　.sys-template
03　　　{
04　　　　　display:none;
05　　　}
06　　　.userStoryBackground
07　　　{
08　　　　　background-image:　url('Images/corkboard.png');
09　　　　　width:695px;
10　　　　　height:397px;
11　　　}
12　　　.userStoryCard
13　　　{
14　　　　　border:　1px　solid　#777777;
15　　　　　width:　208px;
16　　　　　height:140px;
17　　　　　cursor:　move;
18　　　　　background-image:　url('Images/blankcard.png');
19　　　　　margin:4px;
20　　　}
21　　　.userStoryDescription
22　　　{
23　　　　　font-size:　17px;
24　　　　　padding:　4px　5px　5px　5px;
25　　　}
26　　　.userStoryTitle
27　　　{
28　　　　　font-size:　15px;
29　　　　　font-weight:　bold;
30　　　　　padding:　2px　5px　0px　5px;
31　　　}
32　</style>

然後，更新Main裡的內容以使用這些樣式：

1　<asp:Content　ID="Main"　ContentPlaceHolderID="PlaceHolderMain"　runat="server">
2　　　　　<div　id="userStoriesList"　class="sys-template　userStoryBackground">
3　　　　　　　　　<div　　class="userStoryCard">
4　　　　　　　　　　　　　<div　class="userStoryTitle">{{　標題　}}</div>
5　　　　　　　　　　　　　<div　class="userStoryDescription"><div>{{　描述　}}</div>
6　　　　　　　　　</div>
7　　　　　</div>
8　</asp:Content>

結果看起來是這樣的：