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>

结果看起来是这样的：